Los contenedores Bootstrap son el elemento de diseño más básico en Bootstrap. Los contenedores Bootstrap son bloques de construcción muy esenciales y básicos de bootstrap que envuelven el contenido de una página. Es responsable de configurar y alinear el contenido dentro de él según la ventana gráfica o el dispositivo dado. Los contenedores se definen dentro de la clase de contenedor (.container) . En otras palabras, podemos decir que los contenedores se establecen el ancho de la disposición para dar el contenido. Los elementos y el contenido se agregan dentro del contenedor.
Los contenedores se utilizan para muchos propósitos, tales como:
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"> </script> <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"> </script> </head> <body> <div class="container" style="background-color: yellow;"> <h1>Default-Container</h1> <p> This is the example of container in bootstrap </p> </div> </body> </html>
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"> </script> <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"> </script> </head> <body> <div class=" container container-sm" style="background-color: green;"> <h1>Responsive-Container</h1> <p> This is the example of container in bootstrap </p> </div> </body> </html>
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"> </script> <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"> </script> </head> <body> <div class=" container-fluid" style="background-color: blue;"> <h1>Fluid-Container</h1> <p> This is the example of container in bootstrap </p> </div> </body> </html>
Publicación traducida automáticamente
Artículo escrito por khushiguptakhushi02 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA