twitter-bootstrap
Sistema de red

Introducción

Observaciones

Preguntas de los medios

Las consultas de medios en Bootstrap le permiten mover, mostrar y ocultar contenido según el tamaño de la ventana gráfica. Las siguientes consultas de medios se utilizan en archivos MENOS para crear los puntos de interrupción clave en el sistema de rejilla de Bootstrap:

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

Ocasionalmente, estos se expanden para incluir un ancho máximo para limitar CSS a un conjunto más estrecho de dispositivos:

@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }

Niveles de rejilla de arranque (puntos de interrupción)

Además del concepto de unidades de columna , Bootstrap tiene diferentes puntos de corte o tamaños de cuadrícula conocidos como niveles. La cuadrícula de Bootstrap 3 tiene cuatro (4) niveles para acomodar diferentes anchos de pantalla (o ventana gráfica). Los niveles de Bootstrap 3 son xs , sm , md y lg . Las columnas de la cuadrícula de Bootstrap se identifican mediante diferentes col-{breakpoint}-{units} clases CSS.

Cada nivel de cuadrícula abarca un rango que está diseñado para ajustarse a los anchos de pantalla típicos de dispositivos, como el de computadoras de escritorio, computadoras portátiles, tabletas y teléfonos inteligentes.

Bootstrap utiliza consultas de medios CSS para crear puntos de interrupción sensibles que establecen un límite para cada tamaño de cuadrícula. Estos tamaños de cuadrícula le permiten cambiar el diseño de las columnas para adaptarse mejor a los diferentes anchos de pantalla y dispositivos: la esencia del diseño sensible.

• col-xs-* - para los anchos de pantalla más pequeños , como los teléfonos inteligentes <768 px
• col-sm-* - para anchos de pantalla pequeños como teléfonos inteligentes y tabletas> = 768 px
• col-md-* - para anchos de pantalla medios como tabletas y portátiles> = 992 px
• col-lg-* - para anchos de pantalla grandes como escritorios> = 1200 px

Referencia: Sistema Grid

El mismo ancho de columna para cada dispositivo

Para crear una columna que siempre sea el 50% del ancho de la ventana gráfica (en todos los dispositivos), puede configurar col-*-6 para cada nivel.

<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">..</div>

Sin embargo, este es un margen adicional innecesario, ya que col-xs-6 significa 6 unidades en xs y superiores. El nivel más pequeño que establezca (xs, sm o md) también define el tamaño para anchos de pantalla más grandes. Para la columna del mismo tamaño en todos los niveles, simplemente configure el ancho para la ventana más pequeña.

Código más corto:

<div class="col-xs-6">..</div>

Ancho de columna diferente para cada dispositivo (diseño sensible)

Las clases col-*-* se pueden combinar para controlar los anchos de columna en diferentes tamaños de cuadrícula.

Por ejemplo, cree una columna de 50% de ancho en el nivel sm , y una columna de 25% de ancho en el nivel md ...

<div class="col-md-3 col-sm-6">..</div>

Las cuadrículas sm , md y lg se "apilarán" verticalmente en anchos de ventana de visualización de menos de 768 píxeles. Aquí es donde encaja la cuadrícula xs . Las columnas que usan las clases col-xs- * no se apilarán verticalmente y continuarán reduciéndose en las pantallas más pequeñas.

Bootstrap filas y columnas

El sistema de cuadrícula de Bootstrap tiene 12 unidades conocidas como Columnas que se pueden usar para distribuir el contenido horizontalmente en la ventana gráfica.

El motivo de una cuadrícula de 12 unidades (en lugar de 10, 16, etc.) es que 12 se divide en 6 (mitades), 4 (cuartos) y 3 (tercios). Esto hace que la adaptación a una variedad de diseños sea mucho más fácil. Las columnas de la cuadrícula de Bootstrap se identifican mediante diferentes col-{breakpoint}-{units} clases CSS. Obtenga más información sobre el ancho de la ventana gráfica y los puntos de interrupción (niveles AKA)

Entonces, por ejemplo, col-md-3 representa una columna que ocupa 3 de las 12 unidades (o 25%) en una ventana de ancho medio ( md ). Para usar un ancho de columna en su diseño, simplemente use la clase de col-{breakpoint}-{units} apropiada en su marca HTML.

<div class="col-{breakpoint}-{units}">

El ancho de la columna es fluido (no el ancho fijo), por lo que las columnas consumen un porcentaje de su contenedor.

Unidades de columna en Bootstrap 3

• col-*-1 : 1 de 12 (8.33333333% de ancho)
• col-*-2 : 2 de 12 (16.66666667% de ancho)
• col-*-3 : 3 de 12 (25% de ancho)
• col-*-4 : 4 de 12 (33.3333333% de ancho)
• col-*-5 : 5 de 12 (41.66666667% de ancho)
• col-*-6 : 6 de 12 (50% de ancho)
• col-*-7 : 7 de 12 (58.33333333% de ancho)
• col-*-8 : 8 de 12 (66.66666667% de ancho)
• col-*-9 : 9 de 12 (75% de ancho)
• col-*-10 : 10 de 12 (83.33333333% de ancho)
• col-*-11 : 11 de 12 (91.66666667% de ancho)
• col-*-12 : 12 de 12 (100% de ancho)

Demo - 12 unidades de la columna de Bootstrap

La fila de Bootstrap

La clase .row Bootstrap se utiliza para contener las columnas. Las columnas siempre se deben colocar en filas, y las filas siempre se deben colocar dentro de un contenedor ( container o container-fluid ). La fila utiliza márgenes negativos (-15px) para garantizar un espacio adecuado entre el contenido de la columna y el borde del navegador. Las filas se utilizan para agrupar columnas horizontalmente.

<div class="container">
    <div class="row">
        <!-- one more columns -->
        <div class="col-{breakpoint}-{units}">..</div>
    </div>
</div>

Columnas llenarán el .row horizontal de izquierda a derecha, y se envuelva a una nueva línea cada 12 unidades de columna. Por lo tanto, puede usar .row s para crear saltos horizontales , o puede agregar más de 12 unidades de columna en un solo elemento .row para que las columnas se .row (o apilen) verticalmente en la ventana gráfica.

Cuando use el .row columnas (más de 12 unidades en una .row ), deberá usar restablecimientos de respuesta (o correcciones claras) para garantizar un ajuste uniforme del contenido de la columna desigual. Esto es esencial cuando el contenido de las columnas varía en altura.

Más sobre las columnas y filas de la rejilla de arranque

¿Bootstrap 3 problemas de diseño de cuadrícula fluida?

Bootstrap 3 - fila anidada ¿puedo tener columnas que sumen más de 12?

Bootstrap fila y explicación col

Cómo funciona la rejilla Bootstrap (Medio)

Contenedores

Bootstrap requiere un elemento contenedor para envolver los contenidos del sitio y alojar nuestro sistema de cuadrícula. Puede elegir uno de los dos contenedores para usar en sus proyectos.

Utilice la clase .container para un contenedor de ancho fijo sensible.

<div class="container">
  ...
</div>

Use .container-fluid clase .container-fluid para un contenedor de ancho completo, que abarca todo el ancho de su ventana gráfica.

<div class="container-fluid">
  ...
</div>

Nota: los contenedores no son encajables (no puede colocar un contenedor dentro de otro contenedor), debido al padding y más.

Columnas de compensación

Estas clases aumentan el margen izquierdo de una columna en * columnas. Por ejemplo, .col-md-offset-4 mueve .col-md-4 en cuatro columnas.

<div class="row">
  <div class="col-lg-4"></div>
  <div class="col-lg-4 col-lg-offset-4"></div>
</div>
<div class="row">
  <div class="col-lg-5 col-lg-offset-1"></div>
  <div class="col-lg-5 col-lg-offset-1"></div>
</div>

Manipulación del orden de las columnas mediante push and pull

<div class="container content">
    <div class="row">
        <!--Main Content-->
        <div class="col-lg-9 col-lg-push-3">
            Main Content
        </div>
        
        <!--Sidebar-->
        <div class="col-lg-3 col-lg-pull-9">
            Sidebar
        </div>
    </div>
</div>

Esto cambia el orden de las columnas de cuadrícula incorporadas.

Sintaxis: .col-md-push- * y .col-md-pull- *.

Más:
Manipulación del orden de las columnas mediante col-lg-push y col-lg-pull en Twitter Bootstrap 3
Bootstrap 3: empujar / tirar columnas solo en tamaños de pantalla más pequeños
Columna ordenando y apilando en Bootstrap 3