Oreja

Andamio

Bootstrap se basa en cuadrículas, diseños y componentes receptivos de 12 columnas.

Configuración global

Requiere tipo de documento HTML5

Bootstrap hace uso de ciertos elementos HTML y propiedades CSS que requieren el uso del tipo de documento HTML5. Inclúyelo al principio de todos tus proyectos.

  1. <!DOCTYPEhtml>
  2. <html idioma = "es" > 
  3.   ...
  4. </html>

tipografía y enlaces

Bootstrap establece estilos básicos de visualización, tipografía y enlaces globales. Específicamente, nosotros:

  • Quitar marginen el cuerpo
  • Establecer background-color: white;en elbody
  • Usa los atributos @baseFontFamily, @baseFontSizey @baseLineHeightcomo nuestra base tipográfica
  • Establezca el color del enlace global a través de @linkColory aplique subrayados de enlace solo en:hover

Estos estilos se pueden encontrar en scaffolding.less .

Restablecer a través de Normalizar

Con Bootstrap 2, el antiguo bloque de reinicio se eliminó en favor de Normalize.css , un proyecto de Nicolas Gallagher y Jonathan Neal que también impulsa HTML5 Boilerplate . Si bien usamos gran parte de Normalize dentro de nuestro reset.less , hemos eliminado algunos elementos específicamente para Bootstrap.

Sistema de cuadrícula predeterminado

Ejemplo de cuadrícula en vivo

El sistema de cuadrícula predeterminado de Bootstrap utiliza 12 columnas , lo que crea un contenedor de 940 px de ancho sin funciones de respuesta habilitadas. Con el archivo CSS receptivo agregado, la cuadrícula se adapta a 724 px y 1170 px de ancho dependiendo de su ventana gráfica. Debajo de las ventanas gráficas de 767 px, las columnas se vuelven fluidas y se apilan verticalmente.

1
1
1
1
1
1
1
1
1
2
3
4
4
5
9

HTML de cuadrícula básica

Para un diseño simple de dos columnas, cree un .rowy agregue el número apropiado de .span*columnas. Como se trata de una cuadrícula de 12 columnas, cada .span*una abarca una cantidad de esas 12 columnas y siempre debe sumar 12 para cada fila (o la cantidad de columnas en el padre).

  1. < clase div = "fila" > 
  2.   <div clase = "span4" > ... </div> 
  3.   <div clase = "span8" > ... </div> 
  4. </div>

Dado este ejemplo, tenemos .span4y .span8, haciendo un total de 12 columnas y una fila completa.

Columnas de compensación

Mover columnas a la derecha usando .offset*clases. Cada clase aumenta el margen izquierdo de una columna en una columna completa. Por ejemplo, .offset4se mueve .span4sobre cuatro columnas.

4
3 compensación 2
3 compensación 1
3 compensación 2
6 compensación 3 
  1. < clase div = "fila" > 
  2.   <div clase = "span4" > ... </div> 
  3.   <div clase = "span3 offset2" > ... </div> 
  4. </div>

Columnas de anidamiento

Para anidar su contenido con la cuadrícula predeterminada, agregue un nuevo .rowconjunto de .span*columnas dentro de una .span*columna existente. Las filas anidadas deben incluir un conjunto de columnas que se suman al número de columnas de su padre.

Columna de nivel 1
Nivel 2
Nivel 2 
  1. < clase div = "fila" > 
  2.   < clase div = "span9" > 
  3.     Columna de nivel 1
  4.     < clase div = "fila" > 
  5.       <div class = "span6" > Nivel 2 </div> 
  6.       <div class = "span3" > Nivel 2 </div> 
  7.     </div>
  8.   </div>
  9. </div>

Sistema de rejilla fluida

Ejemplo de cuadrícula fluida en vivo

El sistema de cuadrícula fluida usa porcentajes en lugar de píxeles para los anchos de columna. Tiene las mismas capacidades de respuesta que nuestro sistema de red fija, lo que garantiza las proporciones adecuadas para las resoluciones de pantalla y los dispositivos clave.

1
1
1
1
1
1
1
1
1
1
1
1
4
4
4
4
8
6
6
12

HTML de cuadrícula fluida básica

Haga que cualquier fila sea "fluida" cambiando .rowa .row-fluid. Las clases de columnas permanecen exactamente iguales, lo que facilita alternar entre cuadrículas fijas y fluidas.

  1. <div clase = "fila-fluido" > 
  2.   <div clase = "span4" > ... </div> 
  3.   <div clase = "span8" > ... </div> 
  4. </div>

Compensación de fluidos

Funciona de la misma manera que la compensación del sistema de cuadrícula fija: agregue .offset*a cualquier columna para compensar esa cantidad de columnas.

4
4 compensación 4
3 compensación 3
3 compensación 3
6 compensación 6 
  1. <div clase = "fila-fluido" > 
  2.   <div clase = "span4" > ... </div> 
  3.   <div clase = "span4 desplazamiento2" > ... </div> 
  4. </div>

Anidamiento fluido

Las cuadrículas fluidas utilizan el anidamiento de manera diferente: cada nivel anidado de columnas debe sumar hasta 12 columnas. Esto se debe a que la cuadrícula fluida usa porcentajes, no píxeles, para establecer anchos.

Fluido 12
Fluido 6
Fluido 6
Fluido 6
Fluido 6 
  1. <div clase = "fila-fluido" > 
  2.   < clase div = "span12" > 
  3.     Fluido 12
  4.     <div clase = "fila-fluido" > 
  5.       < clase div = "span6" > 
  6.         Fluido 6
  7.         <div clase = "fila-fluido" > 
  8.           <div class = "span6" > Fluido 6 </div> 
  9.           <div class = "span6" > Fluido 6 </div> 
  10.         </div>
  11.       </div>
  12.       <div class = "span6" > Fluido 6 </div> 
  13.     </div>
  14.   </div>
  15. </div>

Diseños

Diseño fijo

Proporciona un diseño común de ancho fijo (y opcionalmente receptivo) con solo <div class="container">requerido.

  1. <cuerpo>
  2.   < clase div = "contenedor" > 
  3.     ...
  4.   </div>
  5. </cuerpo>

Diseño fluido

Cree una página fluida de dos columnas con <div class="container-fluid">—excelente para aplicaciones y documentos.

  1. <div clase = "líquido-contenedor" > 
  2.   <div clase = "fila-fluido" > 
  3.     < clase div = "span2" > 
  4.       <!--Contenido de la barra lateral-->
  5.     </div>
  6.     < clase div = "span10" > 
  7.       <!--Contenido del cuerpo-->
  8.     </div>
  9.   </div>
  10. </div>

Diseño de respuesta

Habilitación de funciones receptivas

Active CSS receptivo en su proyecto al incluir la metaetiqueta adecuada y una hoja de estilo adicional dentro <head>de su documento. Si compiló Bootstrap desde la página Personalizar, solo necesita incluir la etiqueta meta.

  1. <meta name = "viewport" content = "width=device-width, initial-scale=1.0" >  
  2. <enlace href = "activos/css/bootstrap-responsive.css" rel = "hoja de estilo" >

¡Aviso!Bootstrap no incluye funciones receptivas de forma predeterminada en este momento, ya que no todo debe ser receptivo. En lugar de alentar a los desarrolladores a eliminar esta función, creemos que es mejor habilitarla según sea necesario.

Acerca de Bootstrap receptivo

Dispositivos receptivos

Las consultas de medios permiten CSS personalizado en función de una serie de condiciones (proporciones, anchos, tipo de visualización, etc.), pero generalmente se enfoca en min-widthy max-width.

  • Modificar el ancho de la columna en nuestra grilla
  • Apilar elementos en lugar de flotar donde sea necesario
  • Cambiar el tamaño de los encabezados y el texto para que sean más apropiados para los dispositivos

Use las consultas de medios de manera responsable y solo como un comienzo para sus audiencias móviles. Para proyectos más grandes, considere bases de código dedicadas y no capas de consultas de medios.

Dispositivos soportados

Bootstrap admite un puñado de consultas de medios en un solo archivo para ayudar a que sus proyectos sean más apropiados en diferentes dispositivos y resoluciones de pantalla. Esto es lo que está incluido:

Etiqueta Ancho de diseño Ancho de columna Ancho del canalón
Pantalla grande 1200px y más 70px 30px
Defecto 980px y más 60 píxeles 20px
Tabletas de retrato 768px y superior 42px 20px
Teléfonos a tabletas 767px y menos Columnas fluidas, sin anchos fijos
Los telefonos 480px y menos Columnas fluidas, sin anchos fijos 
  1. /* Escritorio grande */
  2. @media ( ancho mínimo : 1200px ) { ... } _     
  3.  
  4. /* Tableta vertical a horizontal y escritorio */
  5. @media ( ancho mínimo : 768 px ) y ( ancho máximo : 979 px ) { ... }        
  6.  
  7. /* Teléfono horizontal a tableta vertical */
  8. @media ( ancho máximo : 767px ) { ... } _     
  9.  
  10. /* Teléfonos horizontales y hacia abajo */
  11. @media ( ancho máximo : 480px ) { ... } _

Clases de utilidad sensibles

Para un desarrollo optimizado para dispositivos móviles más rápido, use estas clases de utilidades para mostrar y ocultar contenido por dispositivo. A continuación se muestra una tabla de las clases disponibles y su efecto en un diseño de consulta de medios determinado (etiquetado por dispositivo). Se pueden encontrar en responsive.less.

Clase Los telefonos767px y menos tabletas979px a 768px EscritoriosDefecto
.visible-phone Visible
.visible-tablet Visible
.visible-desktop Visible
.hidden-phone Visible Visible
.hidden-tablet Visible Visible
.hidden-desktop Visible Visible

Cuándo usar

Úselo de forma limitada y evite crear versiones completamente diferentes del mismo sitio. En su lugar, utilícelos para complementar la presentación de cada dispositivo. Las utilidades receptivas no deben usarse con tablas y, como tales, no son compatibles.

Caso de prueba de utilidades receptivas

Cambie el tamaño de su navegador o cárguelo en diferentes dispositivos para probar las clases anteriores.

Visible en...

Las marcas de verificación verdes indican que la clase está visible en su ventana gráfica actual.

  • Teléfono✔ Teléfono
  • Tableta✔ tableta
  • Escritorio✔ Escritorio

Escondido en...

Aquí, las marcas de verificación verdes indican que la clase está oculta en su ventana gráfica actual.

  • Teléfono✔ Teléfono
  • Tableta✔ tableta
  • Escritorio✔ Escritorio