sistema - ¿Cuándo debería usar contenedor y fila en Twitter Bootstrap 3?
div class= container que es (5)
Por favor, explíqueme cuándo usar el container clases y la row . No estoy seguro porque la documentación de Bootstrap no está clara acerca de esta parte.
Estoy usando Bootstrap 3.
El ''contenedor'' de clase envuelve el contenido dentro del puerto del centro de vista. El contenido completo con la etiqueta corporal se puede colocar en los resultados de la página que se muestra con el ancho especificado en el centro de la página.
La ''fila'' de clase se usa cuando necesita colocar contenido en columnas con una fila, puede tener hasta 12 columnas en total en cada fila.
En las prácticas tradicionales de CSS probablemente usarías las siguientes clases:
wrapper, header, navigator, contents, footer
el uso de las clases anteriores puede ser como este ejemplo:
<body>
<div class="wrapper">
<div class="header">
</div>
<div class="navigator">
</div>
<div class="content">
</div>
<div class="footer">
</div>
</div>
</body>
En bootstrap puedes usarlo si lo deseas o si estás acostumbrado a la plantilla anterior, las clases de arranque como este ejemplo:
<body>
<div class="container">
<div class="col-md-12">
<h1>Header</h1>
<p>Header contents goes here</p>
</div>
<div class="col-md-12">
<nav role="navigation" class="nav navbar">
<h1>Navigation</h1>
<p>Navigation contents goes here</p>
</nav>
</div>
<div class="col-md-12">
<div class="pagination">
<h1>Page contents</h1>
<p>Webpage contents goes here</p>
</div>
</div>
<div class="col-lg-12">
<h1>Footer contents</h1>
<p>footer contents goes here</p>
</div>
</div>
</body>
Para la clase de fila, puede usar la clase de fila cuando desee diseñar el diseño tabular de la página, pero cuando desee mostrar los datos en formato de tabla, debe usar la clase de tabla, pero la tabla no responderá.
Para crear un diseño tabular que sea diferente de las tablas de datos use la clase de fila como en este ejemplo:
<body>
<div class="container">
<div class="row">
<div class="col-sm-4" >.col-sm-4</div>
<div class="col-sm-4" >.col-sm-4</div>
<div class="col-sm-4" >.col-sm-4</div>
</div>
</div>
</body>
Debe intentar evitar el uso del diseño basado en tablas y tratar de usar tablas receptivas como se describe here
Me preguntaba sobre lo mismo y para entender que bootstrap.css el bootstrap.css de la versión 3. La respuesta se encuentra en la línea no. 1585 a 1605. Publicaré esas líneas aquí para una mejor comprensión de la siguiente manera.
.container
{
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
@media (min-width: 768px) {
.container {
width: 750px;
}
}
@media (min-width: 992px) {
.container {
width: 970px;
}
}
@media (min-width: 1200px) {
.container {
width: 1170px;
}
}
Todo el código es auto explicativo. Sin embargo, para profundizar en esto, el contenedor tomaría 750px si el ancho de la pantalla está entre 768px y 992px y así sucesivamente como lo muestra el código. Ahora, para una resolución de pantalla común de más de 1200, el contenedor tomaría 1170px , pero restando el relleno de 30 px ( 30 px 15px+15px 30 px ), el espacio efectivo restante es 1140px , que se centra en la pantalla ya que el margen de izquierda y derecha establecer en automático.
Ahora, en el caso de class="row" , hay un código debajo:
.row {
margin-right: -15px;
margin-left: -15px;
}
Por lo tanto, si la fila está dentro del contenedor, efectivamente arrebataría el relleno de 15px a cada lado del contenedor y usaría el espacio completo. Pero si la fila de la clase está dentro de la etiqueta del cuerpo, tenderá a moverse fuera del área visible hacia el lado izquierdo y derecho del navegador debido a los márgenes negativos.
Espero que se haya aclarado.
container es un contenedor de elementos de row .
row elementos de row son contenedores de columnas (los documentos lo llaman sistema de grillas)
Además, el container establece los márgenes del contenido relacionados con los comportamientos receptivos de su diseño.
Por lo tanto, la clase container se usa a menudo para crear contenidos ''en recuadro'' según las pautas de estilo del proyecto Bootstrap.
Si quiere ir "de fábrica" creando una cuadrícula de ancho completo, puede usar solo elementos de row con columnas dentro (que abarcan el total habitual de 12cols).
Las clases de container y row son para elementos dentro del cuerpo. Entonces, un diseño básico sería:
<html>
<body>
<div class="container">
<div class="row">
<div class="col-md-xx"></div>
...
</div>
<div class="row">
<div class="col-md-xx"></div>
...
</div>
</div>
</body>
</html>
Para un diseño receptivo en caja.
Si omites el container obtendrás un diseño de ancho completo.
Ejemplo de Jumbotron
Jumbotron es un buen ejemplo del comportamiento del container . Si coloca un elemento Jumbotron en un elemento container , tiene bordes redondeados y un ancho fijo en función del ancho de respuesta. Si el Jumbotron está fuera de un contenedor, abarca todo el ancho sin bordes.
Envase
El contenedor proporciona las restricciones de ancho en anchos de respuesta. Cuando los tamaños de respuesta cambian, es el contenedor el que cambia. Las filas y las columnas están basadas en porcentajes, por lo que no es necesario cambiarlas. Tenga en cuenta que hay un margen de 15 píxeles en cada lado, cancelado por filas.
Filas
Las filas siempre deben estar en un contenedor.
La fila proporciona a las columnas un lugar para vivir, idealmente con columnas que suman hasta 12. También actúa como un contenedor ya que todas las columnas flotan a la izquierda, las filas adicionales no se superponen cuando los flotadores se vuelven extraños.
Las filas también tienen un margen negativo de 15 píxeles en cada lado. El div que compone la fila normalmente estaría restringido dentro del relleno de los contenedores, tocando los bordes del área rosa pero no más allá. Los márgenes negativos de 15px empujan la fila sobre el relleno de 15px de los contenedores, esencialmente negándolo. Además, las filas le aseguran que todos los divs dentro de él aparecen en su propia línea, separados de las filas anterior y siguiente.
Columnas
Las columnas ahora tienen un relleno de 15 píxeles. Este relleno significa que las columnas realmente tocan el borde de la fila, que toca el borde del contenedor ya que la fila tiene el margen negativo, y el contenedor tiene el relleno positivo. Pero, el relleno en la columna empuja cualquier cosa dentro de la columna hacia donde debe estar, y también proporciona el canal de 30 píxeles entre las columnas. Nunca use una columna fuera de una fila, no funcionará.
Para obtener más información, te sugiero que leas este artículo . Está muy claro y explica bien cómo funciona el sistema de grillas de Bootstrap.