A continuación hemos recopilado algunos ejemplos de básicos Bootstrap diseños de cuadrícula.
Tres columnas iguales
El siguiente ejemplo muestra cómo obtener unas tres columnas de igual anchura a partir de tabletas y escalada a las grandes computadoras de escritorio. En los teléfonos móviles, las columnas se apilan automáticamente:
Ejemplo
<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> Inténtalo tú mismo " Tres columnas desiguales
El siguiente ejemplo muestra cómo obtener unas columnas de tres diferentes de ancho a partir de tabletas y escalada a las grandes computadoras de escritorio:
Ejemplo
<div class="row">
<div
class="col-sm-3">.col-sm-3</div>
<div
class="col-sm-6">.col-sm-6</div>
<div
class="col-sm-3">.col-sm-3</div>
</div> Inténtalo tú mismo " Dos columnas desiguales
El siguiente ejemplo muestra cómo obtener dos columnas diferentes de ancho a partir de las tabletas y escalar a grandes equipos de sobremesa:
Ejemplo
<div class="row">
<div
class="col-sm-4">.col-sm-4</div>
<div
class="col-sm-8">.col-sm-8</div>
</div> Inténtalo tú mismo " Dos columnas con dos columnas anidadas
El siguiente ejemplo muestra cómo obtener dos columnas a partir de las tabletas y escalar a grandes equipos de sobremesa, con otras dos columnas (misma anchura) dentro de la columna más grande (en los teléfonos móviles, estas columnas y sus columnas anidadas se apilarán):
Ejemplo
<div class="row">
<div class="col-sm-8">
.col-sm-8
<div class="row">
<div class="col-sm-6">.col-sm-6</div>
<div
class="col-sm-6">.col-sm-6</div>
</div>
</div>
<div class="col-sm-4">.col-sm-4</div>
</div> Inténtalo tú mismo " Mixto: móviles y de escritorio
El Bootstrap sistema de red tiene cuatro clases: xs (móviles), sm (comprimidos), md (escritorios), y lg (escritorios más grandes). Las clases se pueden combinar para crear diseños más dinámicos y flexibles.
Consejo: Cada clase se amplía hasta, por lo que si desea ajustar los mismos anchos de xs y sm , sólo se necesita especificar xs .
Ejemplo
<div class="row">
<div class="col-xs-9 col-md-7">.col-xs-9
.col-md-7</div>
<div class="col-xs-3 col-md-5">.col-xs-3
.col-md-5</div>
</div>
<div class="row">
<div
class="col-xs-6 col-md-10">.col-xs-6 .col-md-10</div>
<div
class="col-xs-6 col-md-2">.col-xs-6 .col-md-2</div>
</div>
<div
class="row">
<div class="col-xs-6">.col-xs-6</div>
< div
class="col-xs-6">.col-xs-6</div>
</div> Inténtalo tú mismo " Consejo: Recuerde que las columnas de la cuadrícula debe añadir hasta doce para una fila. Más que eso, las columnas se apilarán sin importar la viewport .
Mixto: móvil, Tablet PCs de escritorio y
Ejemplo
<div class="row">
<div class="col-xs-7 col-sm-6
col-lg-8">.col-xs-7 .col-sm-6 .col-lg-8</div>
<div class="col-xs-5
col-sm-6 col-lg-4">.col-xs-5 .col-sm-6 .col-lg-8</div>
</div>
<div
class="row">
<div class="col-xs-6 col-sm-8 col-lg-10">.col-xs-6
.col-sm-8 .col-lg-10</div>
<div class="col-xs-6 col-sm-4
col-lg-2">.col-xs-6 .col-sm-4 .col-lg-2</div>
</div> Inténtalo tú mismo " claras flotadores
Flotadores claros (con la .clearfix clase) en los puntos de corte específicos para prevenir extraña envoltura con contenido desigual:
Ejemplo
<div class="row">
<div class="col-xs-6 col-sm-3">
Column 1
<br>
Resize the browser
window to see the effect.
</div>
<div class="col-xs-6
col-sm-3">Column 2</div>
<!-- Add clearfix for only the required
viewport -->
<div class="clearfix visible-xs"></div>
<div class="col-xs-6 col-sm-3">Column 3</div>
<div class="col-xs-6
col-sm-3">Column 4</div>
</div> Inténtalo tú mismo " Columnas de compensación
Mover las columnas a la derecha utilizando .col-md-offset-* clases. Estas clases aumentan el margen izquierdo de una columna * columnas:
Ejemplo
<div class="row">
<div class="col-sm-5 col-md-6">.col-sm-5
.col-md-6</div>
<div class="col-sm-5 col-sm-offset-2 col-md-6
col-md-offset-0">
.col-sm-5 .col-sm-offset-2 .col-md-6
.col-md-offset-0</div>
</div> Inténtalo tú mismo " Inserción y Extracción - Cambiar columna Orden
Cambiar el orden de las columnas de la cuadrícula con .col-md-push-* y .col-md-pull-* clases:
Ejemplo
<div class="row">
<div class="col-sm-4
col-sm-push-8">.col-sm-4 .col-sm-push-8</div>
<div class="col-sm-8
col-sm-pull-4">.col-sm-8 .col-sm-pull-4</div>
</div> Inténtalo tú mismo "