Bootstrap Sistema de Red

Anterior
Siguiente captulo "

Sistema de Red de arranque

sistema de red de arranque permite un mximo de 12 columnas en toda la pgina.
Si no desea utilizar toda la columna 12 individualmente, puede agrupar las columnas juntos para crear
columnas ms anchas:

lapso de
1

lapso de
1

lapso de
1

lapso de
1

lapso de 4

lapso de
1

lapso de
1

lapso de
1

lapso de
1

lapso de
1

lapso de
1

lapso de 4

lapso de 4

lapso de
1

lapso de
1

lapso de 4
lapso de 8

lapso de 6

lapso de 6
lapso de 12

sistema de red de arranque es sensible, y las columnas se re-ordenar en funcin del tamao de la pantalla: en
una pantalla grande que puede verse mejor con el contenido organizado en tres columnas, pero en una
pantalla pequea que sera mejor si se apilan los elementos de contenido Encima del otro.

Consejo: Recuerde que las columnas de la cuadrcula debe aadir hasta doce para una fila. Ms que eso, las
columnas se apilarn sin importar la ventana grfica.

Las clases de cuadrcula

El sistema de red Bootstrap tiene cuatro clases:

xs (para mviles)

SM (para comprimidos)

md (para equipos de sobremesa)

lg (para equipos de sobremesa ms grandes)

Las clases anteriores se pueden combinar para crear diseos ms dinmica y flexible.
Consejo: Cada clase se ampla hasta, por lo que si desea establecer la misma anchura para XS y SM, slo
tiene que especificar xs.

Reglas del sistema de cuadrcula

Algunas reglas del sistema de archivos de inicio de cuadrcula:

Las filas deben ser colocados dentro de un .container(ancho fijo) o .container-fluid(ancho completo)
para la alineacin y el acolchado apropiado

Utilice filas horizontales para crear grupos de columnas

El contenido debe ser colocado dentro de las columnas y columnas slo puede ser hijos inmediatos de
filas

Clases predefinidas les gusta .row y .col-sm-4estn disponibles para hacer rpidamente diseos de
cuadrcula

Columnas crean las canaletas (brechas entre el contenido de la columna) a travs de relleno. Eso relleno
se compensa en filas para la primera y ltima columna a travs de margen negativo en.rows

columnas de la cuadrcula se crean especificando el nmero de 12 columnas disponibles que desea

trocear. Por ejemplo, tres columnas iguales usaran tres .col-sm-4

Estructura bsica de una cuadrcula Bootstrap

La siguiente es una estructura bsica de una red de Bootstrap:

<div class="container">
<div class="row">
<div class="col-*-*"></div>
</div>
<div class="row">

<div class="col-*-*"></div>
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div class="row">
...
</div>
</div>
Por lo tanto, para crear el diseo que desee, crear un contenedor ( <div class="container">). A continuacin,
cree una fila ( <div class="row">). A continuacin, aadir el nmero deseado de columnas (etiquetas
apropiadas con.col-*-*clases). Tenga en cuenta que los nmeros de .col-*-*siempre deben agregar hasta 12
para cada fila.

Opciones de cuadrcula
La siguiente tabla resume cmo el sistema de red de rutina de carga funciona a travs de mltiples
dispositivos:

Extra small devices

Phones (<768px)

Small devices
Tablets (>=768px)

Medium devices
Desktops (>=992px)

Large devices
Desktops (>=1200px)

Grid behaviour

Horizontal at all times

Collapsed to start,
horizontal above
breakpoints

Collapsed to start,
horizontal above
breakpoints

Collapsed to start, horizontal

above breakpoints

Container width

None (auto)

750px

970px

1170px

Class prefix

.col-xs-

.col-sm-

.col-md-

.col-lg-

Number of
columns

12

12

12

12

Column width

Auto

~62px

~81px

~97px

Gutter width

30px (15px on each

side of a column)

30px (15px on each side of

a column)

30px (15px on each side of

a column)

30px (15px on each side of a

column)

Nestable

Yes

Yes

Yes

Yes

Offsets

Yes

Yes

Yes

Yes

Column ordering

Yes

Yes

Yes

Yes

Ejemplos
En los siguientes captulos se muestran ejemplos de sistemas de red para diferentes dispositivos:

Apilados a horizontal

pequeos dispositivos

dispositivos medianas

dispositivos grandes

Bootstrap Grid - Stacked a horizontal

Anterior

Siguiente captulo "

 Bootstrap cuadrcula Ejemplo: Stacked a horizontal

Vamos a crear un sistema de red bsica que comienza apilados en los mviles / tabletas (dispositivos

pequeos), antes de convertirse en horizontal en los escritorios (medio / dispositivos grandes).

El siguiente ejemplo muestra un sencillo diseo de dos columnas "apilados a horizontal", lo que significa

que se traducir en una fraccin de 50% / 50% en todas las pantallas, excepto para las pequeas
pantallas adicionales, que se apilan automticamente (100%):
col-SM-6
col-SM-6

Ejemplo: Stacked a horizontal

<div class="container">
<h1>Hello World!</h1>
<div class="row">
<div class="col-sm-6" style="background-color:yellow;">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-6" style="background-color:pink;">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>
Intntalo t mismo "
Consejo: Los nmeros en las .col-sm-*clases indica el nmero de columnas de la div debe abarcar (de
un total de 12). Por lo tanto, .col-sm-1se extiende por la columna 1, .col-sm-4se extiende por 4
columnas, .col-sm-6se extiende por 6 columnas, etc. Nota: Asegrese de que la suma siempre aade
hasta un 12!

Consejo: Usted puede convertir cualquier diseo de ancho fijo en un ancho completo de diseo
cambiando la.containerclase a .container-fluid:

Ejemplo: El recipiente de fluido

<div class="container-fluid">
<h1>Hello World!</h1>
<div class="row">
<div class="col-sm-6" style="background-color:yellow;">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-6" style="background-color:pink;">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>
Intntalo t mismo "

Bootstrap Grid - pequeos dispositivos

Anterior

Siguiente captulo "

Ejemplo de arranque Grid: pequeos dispositivos

Supongamos que tenemos un diseo simple con dos columnas. Queremos que las columnas que se
separaron 25% / 75% para los dispositivos pequeos.

Consejo: Pequeos dispositivos se definen por tener un ancho de pantalla de 768 pxeles a 991 pxeles.
Para dispositivos pequeos usaremos las .col-sm-*clases.
Vamos a aadir las siguientes clases para nuestros dos columnas:
<div class="col-sm-3">....</div>
<div class="col-sm-9">....</div>
Ahora Bootstrap va a decir "por el pequeo tamao, busque clases con -sm- en ellos y utilizar los".
El siguiente ejemplo se traducir en una fraccin de 25% / 75% en dispositivos pequeos (y medianas y

grandes). En los dispositivos adicionales pequeos, se apilan automticamente (100%):

col-sm-3
col-sm-9

Ejemplo

<div class="container-fluid">
<h1>Hello World!</h1>
<div class="row">
<div class="col-sm-3" style="background-color:yellow;">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-9" style="background-color:pink;">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>
Intntalo t mismo "
Nota: Asegrese de que la suma siempre se suma a 12.
Para un / 66,6% 33,3% dividida, se usara .col-sm-4y .col-sm-8:
col-sm-4
col-sm-8

 Ejemplo

<div class="container-fluid">
<h1>Hello World!</h1>
<div class="row">
<div class="col-sm-4" style="background-color:yellow;">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-8" style="background-color:pink;">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>
Intntalo t mismo "
El siguiente captulo se muestra cmo agregar un porcentaje de divisin diferente para dispositivos
medianas.

Bootstrap Grid - Dispositivos Mediano

Anterior

Siguiente captulo "

Bootstrap cuadrcula Ejemplo: Dispositivos Mediano

En el captulo anterior, presentamos un ejemplo de rejilla con las clases de dispositivos pequeos. Se han
utilizado dos divs (columnas) y les dimos un / 75% de fraccin de 25%:
<div class="col-sm-3">....</div>
<div class="col-sm-9">....</div>
Pero en los dispositivos medio del diseo puede ser mejor como un / 50% de fraccin de 50%.

Consejo: dispositivos Mediano se definen por tener un ancho de pantalla de 992 pxeles a 1199 pxeles.
Para los dispositivos medianas usaremos las .col-md-*clases.
Ahora vamos a aadir los anchos de columna para dispositivos medianas:
<div class="col-sm-3 col-md-6">....</div>
<div class="col-sm-9 col-md-6">....</div>
Ahora Bootstrap va a decir "por el pequeo tamao, mira a clases con -sm- en ellos y utilizar esos. En el

mediano, mirar a las clases con -md- en ellos y utilizar los".

El siguiente ejemplo se traducir en un split / 75% 25% en dispositivos pequeos y A / 50% de divisin
50% en dispositivos medianas (y grandes). En los dispositivos adicionales pequeos, se apilan
automticamente (100%):

Ejemplo

<div class="container-fluid">
<h1>Hello World!</h1>
<div class="row">
<div class="col-sm-3 col-md-6" style="background-color:yellow;">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-9 col-md-6" style="background-color:pink;">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>
Intntalo t mismo "
Nota: Asegrese de que la suma siempre se suma a 12.

Slo usando Medio

En el siguiente ejemplo, slo se especifica la .col-md-6clase (sin .col-sm-*). Esto significa que los
dispositivos de medianas y grandes se dividirn 50% / 50% - porque la clase se ampla hasta. Sin
embargo, para dispositivos pequeos, ser apilar verticalmente (ancho 100%):

Ejemplo

<div class="row">
<div class="col-md-6" style="background-color:yellow;">
<p>Lorem ipsum...</p>
</div>
<div class="col-md-6" style="background-color:pink;">
<p>Sed ut perspiciatis...</p>
</div>
</div>
Intntalo t mismo "
El siguiente captulo se muestra cmo agregar un porcentaje de divisin diferente para dispositivos de
gran tamao.

Bootstrap Grid - dispositivos de gran tamao

Anterior

Siguiente captulo "

Bootstrap cuadrcula Ejemplo: dispositivos de gran

tamao

En el captulo anterior, presentamos un ejemplo de rejilla con las clases de dispositivos pequeos y
medianos. Se han utilizado dos divs (columnas) y les dimos un / 75% de fraccin de 25% en dispositivos
pequeos, y un / 50% de fraccin de 50% en los dispositivos medianas:
<div class="col-sm-3 col-md-6">....</div>
<div class="col-sm-9 col-md-6">....</div>
Pero en los dispositivos grandes del diseo puede ser mejor como un / 66% Reparto 33%.
Consejo: dispositivos de gran tamao se definen por tener un ancho de pantalla de 1200 pxeles y

superiores.
Para los dispositivos grandes, utilizaremos las .col-lg-*clases.
As que ahora vamos a aadir los anchos de columna para dispositivos de gran tamao:
<div class="col-sm-3 col-md-6 col-lg-4">....</div>
<div class="col-sm-9 col-md-6 col-lg-8">....</div>
Ahora Bootstrap va a decir "por el pequeo tamao, mirar a las clases con -sm- en ellos y utilizar esos.

En el mediano, mirar a las clases con -md- en ellos y utilizar esos. En el gran tamao, mira clases con la
palabra -lg- en ellos y utilizar los ".
El siguiente ejemplo se traducir en una fraccin de 25% / 75% en dispositivos pequeos, a / 50% de

divisin 50% en dispositivos medianas, y A / 66% de divisin 33% en dispositivos grandes:

Ejemplo

<div class="container-fluid">
<h1>Hello World!</h1>
<div class="row">
<div class="col-sm-3 col-md-6 col-lg-4" style="background-color:yellow;">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-9 col-md-6 col-lg-8" style="background-color:pink;">
<p>Sed ut perspiciatis...</p>
</div>

</div>
</div>
Intntalo t mismo "
Nota: Asegrese de que la suma siempre se suma a 12.

Usando slo las grandes

En el siguiente ejemplo, slo se especifica la .col-lg-6clase (sin .col-md-*y / o .col-sm-*). Esto significa
que los dispositivos grandes se dividirn 50% / 50%. Sin embargo, para los dispositivos de medianas y
pequeas, que se acumular en vertical (ancho 100%):

Ejemplo

<div class="container-fluid">
<h1>Hello World!</h1>
<div class="row">
<div class="col-lg-6" style="background-color:yellow;">
<p>Lorem ipsum...</p>
</div>
<div class="col-lg-6" style="background-color:pink;">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>
Intntalo t mismo "

Bootstrap Ejemplos de cuadrcula

Anterior

Siguiente captulo "

A continuacin hemos recopilado algunos ejemplos de diseos bsicos de la red Bootstrap.

Tres columnas iguales

.col-sm-4
.col-sm-4
.col-sm-4
El siguiente ejemplo muestra cmo obtener unas tres columnas de igual anchura a partir de tabletas y
escalada a las grandes computadoras de escritorio. En los telfonos mviles, las columnas se apilan
automticamente:

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>
Intntalo t mismo "

Tres columnas desiguales

.col-sm-3
.col-SM-6
.col-sm-3

El siguiente ejemplo muestra cmo 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>
Intntalo t mismo "

Dos columnas desiguales

.col-sm-4
.col-sm-8
El siguiente ejemplo muestra cmo 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>
Intntalo t mismo "

Dos columnas con dos columnas anidadas

El siguiente ejemplo muestra cmo 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 ms grande (en
los telfonos mviles, estas columnas y sus columnas anidadas se apilarn):

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>
Intntalo t mismo "

Mixto: mviles y de escritorio

El sistema de red Bootstrap tiene cuatro clases: xs (telfonos), SM (comprimidos), MD (escritorios), y LG

(escritorios ms grandes). Las clases se pueden combinar para crear diseos ms dinmicos y flexibles.
Consejo: Cada clase se ampla hasta, por lo que si desea establecer la misma anchura para XS y SM,
slo tiene que 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>
Intntalo t mismo "
Consejo: Recuerde que las columnas de la cuadrcula debe aadir hasta doce para una fila. Ms que eso,
las columnas se apilarn sin importar la ventana grfica.

Mixto: mvil, 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-4</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>
Intntalo t mismo "

claras flotadores

Flotadores claros (con la .clearfixclase) en los puntos de corte especficos para prevenir extraa
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>
Intntalo t mismo "

Columnas de compensacin

Mover columnas hacia la derecha con .col-md-offset-*las 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>
Intntalo t mismo "

Insercin y Extraccin - Cambiar columna Orden

Cambiar el orden de las columnas de la cuadrcula 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>
Intntalo t mismo "