Académique Documents
Professionnel Documents
Culture Documents
Anterior
Siguiente captulo "
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.
xs (para mviles)
SM (para comprimidos)
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.
Las filas deben ser colocados dentro de un .container(ancho fijo) o .container-fluid(ancho completo)
para la alineacin y el acolchado apropiado
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
<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:
Small devices
Tablets (>=768px)
Medium devices
Desktops (>=992px)
Large devices
Desktops (>=1200px)
Grid behaviour
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
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
Vamos a crear un sistema de red bsica que comienza apilados en los mviles / tabletas (dispositivos
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
<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:
<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 "
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
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.
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
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.
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.
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
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.
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 "
.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 "
.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 "
.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 "
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 "
(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.
<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 "
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 "