BAstrap funciona sobre grillas responsive de 12 columnas, layouts, y componentes.
BAstrap necesita el doctype de HTML5. Incluilo al principio de tus páginas.
<!DOCTYPE html> <html lang="es"> ... </html>
El sistema de grilla usa 12 columnas, que hacen un container de 940px de ancho si no tenemos responsive activado. Incluyendo el CSS responsive, la grilla se adapta para ser de 724px y 1170px de ancho dependiendo del tamaño de tu navegador. Para navegadores de menos de 767px las columnas se hacen fluidas y se ordenan verticalmente.
Para un layout simple de dos columnas, creá un .row y agregá el número apropiado de columnas .span*. Los .span* tienen que sumar un total de 12.
<div class="row"> <div class="span4">...</div> <div class="span8">...</div> </div>
En este ejemplo tenemos un .span4 y .span8, que hacen 12 columnas, o sea una fila completa.
Mové columnas a la derecha usando las clases .offset*. Cada clase aumenta el margen izquierdo de una columna por un espacio de una columna entera. Por ejemplo, .offset4 mueve .span4 en cuatro columnas.
<div class="row"> <div class="span4">...</div> <div class="span3 offset2">...</div> </div>
Para anidar tu contenido dentro de la grilla predeterminada, agregá un nuevo .row y un conjunto de columnas .span* dentro de una columna .span* existente. Las columnas anidadas deberían incluir un conjunto de columnas que sumen el número de columnas que la contiene.
<div class="row">
<div class="span9">
Columna nivel 1
<div class="row">
<div class="span6">Nivel 2</div>
<div class="span3">Nivel 2</div>
</div>
</div>
</div>
El sistema de grilla fluida usa porcentajes en lugar de píxels para el ancho de las columnas. Tiene las mismas capacidades responsive que el sistema de grilla fija, asegurando proporciones adecuadas para las resoluciones de pantalla más usadas.
Hacé que una row sea "fluida" cambiando .row por .row-fluid. Las clases de las columnas quedan igual, lo que facilita el cambio entre grillas fijas y fluidas.
<div class="row-fluid"> <div class="span4">...</div> <div class="span8">...</div> </div>
Funciona de la misma manera que en el sistema de grilla fija: agregar .offset* a cualquier columna para moverla por esa cantidad de columnas.
<div class="row-fluid"> <div class="span4">...</div> <div class="span4 offset2">...</div> </div>
Las grillas fluidas usan el anidado de forma diferente:: cada nivel anidado de columnas tiene que sumar 12. Esto es porque el sistema de grilla fluida usa porcentajes, no píxeles, para definir anchos.
<div class="row-fluid">
<div class="span12">
Fluido 12
<div class="row-fluid">
<div class="span6">
Fluido 6
<div class="row-fluid">
<div class="span6">Fluido 6</div>
<div class="span6">Fluido 6</div>
</div>
</div>
<div class="span6">Fluido 6</div>
</div>
</div>
</div>
Provee un layout de ancho fijo común (con opción responsive) con solo agregar <div class="container"> antes.
<body>
<div class="container">
...
</div>
</body>
Creá una página fluida de dos columnas con <div class="container-fluid">—útil para aplicaciones y documentación.
<div class="container-fluid">
<div class="row-fluid">
<div class="span2">
<!--Contenido de sidebar-->
</div>
<div class="span10">
<!--Contenido del body-->
</div>
</div>
</div>
Activá el CSS responsive en tu proyecto incluyendo el meta tag y la hoja de estilos adecuados dentro del <head> de tu documento.
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
Los Media queries permiten CSS personalizado basado en algunas condiciones—proporciones, anchos, tipo de pantalla, etc—pero en general se enfocan en min-width y max-width.
BAstrap contiene muchos media queries en un solo archivo para ayudar a que tus proyectos se vean bien en diferentes dispositivos y resoluciones de pantalla. Se incluyen:
| Nombre | Ancho de layout | Ancho de columna | Espacio entre columnas |
|---|---|---|---|
| Pantalla grande | 1200px y más | 70px | 30px |
| Default | 980px y más | 60px | 20px |
| Tabletas (retrato) | 768px y más | 42px | 20px |
| Teléfonos y tabletas | 767px y menos | Columnas fluidas, sin anchos fijos | |
| Teléfonos | 480px y menos | Columnas fluidas, sin anchos fijos | |
/* Large desktop */
@media (min-width: 1200px) { ... }
/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { ... }
/* Landscape phone to portrait tablet */
@media (max-width: 767px) { ... }
/* Landscape phones and down */
@media (max-width: 480px) { ... }
Para un desarrollo apuntado a mobile, usá estas clases utilitarias para mostrar y esconder contenido de acuerdo al dispositivo. Abajo hay una tabla con las clases disponibles y su efecto dado el layout del media query (marcado por dispositivo).
| Clase | Teléfonos 767px y menores | Tabletas De 979px a 768px | Escritorios Default |
|---|---|---|---|
.visible-phone |
Visible | Oculto | Oculto |
.visible-tablet |
Oculto | Visible | Oculto |
.visible-desktop |
Oculto | Oculto | Visible |
.hidden-phone |
Oculto | Visible | Visible |
.hidden-tablet |
Visible | Oculto | Visible |
.hidden-desktop |
Visible | Visible | Oculto |
Usá las clases de forma limitada y evitá crear versiones completamente diferentes de un sitio con ellas. En cambio, usalas para aportar a la presentación de un dispositivo. Las utilidades responsive no se deberían usar con tablas.
Redimensioná tu navegador o cargá esta página en distintos dispositivos para probar las clases de arriba.
Tildes verdes indican que la clase es visible en tu visualización actual.
Acá, las tildes verdes indical que la clase está oculta en tu visualización actual.