Por favor, explíqueme cuándo usar las clases containery row. No estoy seguro porque la documentación de Bootstrap no es clara sobre esta parte.
Estoy usando Bootstrap 3.
Respuestas:
containeres un contenedor de rowelementos.
row los elementos son contenedores de columnas (los documentos lo llaman sistema de cuadrícula)
Además, containerestablece los márgenes del contenido relacionados con los comportamientos receptivos de su diseño.
Por lo tanto, la containerclase se usa a menudo para crear contenidos 'en caja' basados en las pautas de estilo del proyecto Bootstrap.
Si desea "salir de la caja" para crear una cuadrícula de ancho completo, puede usar solo rowelementos con columnas adentro (que abarcan el total habitual de 12 colores).
Las clases containery rowson 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 omite el container, obtendrá un diseño de ancho completo.
Jumbotron es un buen ejemplo del containercomportamiento. Si coloca un elemento Jumbotron en un containerelemento, tiene bordes redondeados y un ancho fijo basado en el ancho de respuesta. Si el Jumbotron está fuera de un contenedor, ocupa todo el ancho sin bordes.
rowelementos con columnas adentro (que abarcan el total habitual de 12 colores). Creo que puedes usar container-fluidy row-fluidpara esto. (Bootstrap principiante aquí,
Me estaba preguntando sobre lo mismo y para entender que pasé por la bootstrap.cssversión 3. La respuesta está en la línea no. 1585 a 1605. Publicaré esas líneas aquí para una mejor comprensión como se muestra a continuación.
.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 se explica por sí mismo. Sin embargo, para más detalles sobre esto, contenedor tomaría 750pxsi ancho de la pantalla es de entre 768pxy 992pxy así sucesivamente como los espectáculos de código. Ahora, para una resolución de pantalla común de más de 1200, el contenedor ocuparía 1170px, pero restando el relleno de 30 px( 15px+15px), el espacio efectivo a la izquierda es 1140px, que está centrado en la pantalla ya que el margen de la izquierda y la derecha está configurado en automático.
Ahora, en el caso de class="row", hay el siguiente código:
.row {
margin-right: -15px;
margin-left: -15px;
}
Entonces, si la fila está dentro del contenedor, efectivamente arrebatará el relleno de 15px a cada lado del contenedor y usará 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 quede claro.
Envase
El contenedor proporciona las restricciones de ancho en los anchos de respuesta. Cuando cambian los tamaños de respuesta, es el contenedor el que cambia. Todas las filas y columnas se basan en porcentajes, por lo que no es necesario cambiarlas. Tenga en cuenta que hay un margen de 15px en cada lado, cancelado por filas.
Filas
Las filas siempre deben estar en un recipiente.
La fila proporciona a las columnas un lugar para vivir, idealmente con columnas que suman 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 raros.
Las filas también tienen un margen negativo de 15px en cada lado. El div que forma 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 por encima del relleno de 15px del contenedor, esencialmente negándolo. Además, las filas le aseguran que todos los divs dentro de ella aparezcan en su propia línea, separados de las filas anterior y siguiente.
Columnas
Las columnas ahora tienen un relleno de 15px. Este relleno significa que las columnas realmente tocan el borde de la fila, que a su vez toca el borde del contenedor, ya que la fila tiene el margen negativo y el contenedor tiene el relleno positivo. Pero, el relleno de la columna empuja cualquier cosa dentro de la columna hacia donde debe estar, y también proporciona el margen de 30px entre columnas. Nunca use una columna fuera de una fila, no funcionará.
Para obtener más información, le sugiero que lea este artículo . Es realmente claro y explica bien cómo funciona el sistema de cuadrícula de Bootstrap.
La clase 'contenedor' envuelve el contenido dentro del centro del puerto de visualización. Todo el contenido con etiqueta en el cuerpo se puede colocar en los resultados de la página mostrada de ancho especificado en el centro de la página.
La clase 'fila' se usa cuando necesita colocar contenido en columnas en una fila, puede tener hasta 12 columnas en total en cada fila.
En las prácticas tradicionales de CSS, probablemente usaría 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 puede usar si lo desea o si está acostumbrado a la plantilla anterior las clases de bootstrap 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 un diseño tabular para la página, pero cuando desee mostrar 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 de un diseño basado en tablas e intentar usar tablas receptivas como se describe aquí