En bootstrap, el contenedor se usa para establecer el margen del contenido. Contiene elementos de fila y los elementos de fila son contenedores de columnas. Esto se conoce como el sistema de rejilla.
Hay dos clases de contenedores en bootstrap:
- .envase
- .contenedor-fluido
Veamos cada una de las dos clases anteriores en detalle con ejemplos:
.container : la clase .container proporciona un contenedor de ancho fijo que responde.
En el siguiente ejemplo, el div con clase «contenedor» tendrá un margen izquierdo y derecho fijo y no ocupará el ancho completo de su padre o la ventana gráfica.
HTML
<!-- Bootstrap container class --> <!DOCTYPE html> <html> <head> <title>Bootstrap Container Example</title> <!-- Add Bootstrap Links --> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script> <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"> </script> </head> <body> <!-- Since we are using the class container, the below div will not take complete width of its parent. --> <div class="container" style="background: green;"> <h1>GeeksforGeeks</h1> <p>A computer science portal for geeks.</p> </div> </body> </html>
Salida :
.container-fluid : la clase .container-fluid proporciona un contenedor de ancho completo que abarca todo el ancho de la ventana gráfica.
En el siguiente ejemplo, el div con clase «contenedor-fluido» ocupará todo el ancho de la ventana gráfica y se expandirá o reducirá cada vez que se cambie el tamaño de la ventana gráfica.
HTML
<!-- Bootstrap container-fluid class --> <!DOCTYPE html> <html> <head> <title>Bootstrap Container Example</title> <!-- Add Bootstrap Links --> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script> <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"> </script> </head> <body> <!-- Since we are using the class container-fluid, the below div will expand whenever the viewport is resized. --> <div class="container-fluid" style="background: green;"> <h1>GeeksforGeeks</h1> <p>A computer science portal for geeks.</p> </div> </body> </html>
Salida :
Navegador compatible:
- Google Chrome
- explorador de Internet
- Firefox
- Ópera
- Safari
Publicación traducida automáticamente
Artículo escrito por chaitanyashah707 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA