Oreja

Andamio

Bootstrap se basa en una cuadrícula receptiva de 12 columnas. También hemos incluido diseños de ancho fijo y fluido basados ​​en ese sistema.

Estilos globales para restablecimiento de CSS, tipografía y enlaces

Requiere tipo de documento HTML5

Bootstrap hace uso de elementos HTML y propiedades CSS que requieren el uso del tipo de documento HTML5. Asegúrese de incluirlo al comienzo de cada página de Bootstrapped en su proyecto.

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

tipografía y enlaces

En el archivo scaffolding.less , establecemos estilos básicos de visualización, tipografía y enlaces globales. Específicamente, nosotros:

  • Eliminar margen en 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

Restablecer a través de Normalizar

A partir de Bootstrap 2, el restablecimiento de CSS tradicional ha evolucionado para hacer uso de elementos de Normalize.css , un proyecto de Nicolas Gallagher que también impulsa HTML5 Boilerplate .

El nuevo restablecimiento todavía se puede encontrar en reset.less , pero con muchos elementos eliminados por brevedad y precisión.

Sistema de cuadrícula predeterminado 12 columnas con un giro receptivo

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

El sistema de cuadrícula predeterminado provisto en Bootstrap utiliza 12 columnas que se muestran en anchos de 724 px, 940 px (predeterminado sin CSS receptivo incluido) y 1170 px. Debajo de las ventanas gráficas de 767 px, las columnas se vuelven fluidas y se apilan verticalmente.

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

Como se muestra aquí, se puede crear un diseño básico con dos "columnas", cada una de las cuales abarca un número de las 12 columnas fundamentales que definimos como parte de nuestro sistema de cuadrícula.


Columnas de compensación

4
4 compensación 4
3 compensación 3
3 compensación 3
8 compensación 4 
  1. < clase div = "fila" > 
  2.   <div clase = "span4" > ... </div> 
  3.   <div clase = "span4 offset4" > ... </div> 
  4. </div>

Columnas de anidamiento

Con el sistema de cuadrícula estática (no fluida) en Bootstrap, el anidamiento es fácil. Para anidar su contenido, simplemente agregue un nuevo .rowconjunto de .span*columnas dentro de una .span*columna existente.

Ejemplo

Las filas anidadas deben incluir un conjunto de columnas que se suman al número de columnas de su padre. .span3Por ejemplo, se deben colocar dos columnas anidadas dentro de un archivo .span6.

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

Sistema de cuadrícula fluida 12 columnas sensibles basadas en porcentajes

Columnas de fluido

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

Porcentajes, no píxeles

El sistema de cuadrícula fluida usa porcentajes para anchos de columna en lugar de píxeles fijos. También tiene las mismas variaciones de respuesta que nuestro sistema de cuadrícula fija, lo que garantiza las proporciones adecuadas para las resoluciones de pantalla y los dispositivos clave.

Filas fluidas

Haga que cualquier fila sea fluida simplemente cambiando .rowa .row-fluid. Las columnas permanecen exactamente iguales, lo que hace que sea muy sencillo alternar entre diseños fijos y fluidos.

Margen

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

Anidamiento fluido

Anidar con cuadrículas fluidas es un poco diferente: el número de columnas anidadas no necesita coincidir con el principal. En cambio, sus columnas se restablecen en cada nivel porque cada fila ocupa el 100 % de la columna principal.

Fluido 12
Fluido 6
Fluido 6 
  1. <div clase = "fila-fluido" > 
  2.   < clase div = "span12" > 
  3.     Nivel 1 de columna
  4.     <div clase = "fila-fluido" > 
  5.       <div class = "span6" > Nivel 2 </div> 
  6.       <div class = "span6" > Nivel 2 </div> 
  7.     </div>
  8.   </div>
  9. </div>

personalización de cuadrícula

Variable Valor por defecto Descripción
@gridColumns 12 Número de columnas
@gridColumnWidth 60px Ancho de cada columna
@gridGutterWidth 20px Espacio negativo entre columnas

Variables en MENOS

En Bootstrap hay un puñado de variables para personalizar el sistema de cuadrícula predeterminado de 940 px, documentado anteriormente. Todas las variables de la cuadrícula se almacenan en variables.less.

como personalizar

Modificar la cuadrícula significa cambiar las tres @grid*variables y volver a compilar Bootstrap. Cambie las variables de cuadrícula en variables.less y use una de las cuatro formas documentadas para recompilar . Si está agregando más columnas, asegúrese de agregar el CSS para aquellas en grid.less.

Mantenerse receptivo

La personalización de la cuadrícula solo funciona en el nivel predeterminado, la cuadrícula de 940 px. Para mantener los aspectos receptivos de Bootstrap, también deberá personalizar las cuadrículas en responsive.less.

Diseños Plantillas básicas para crear páginas web

Diseño fijo

El diseño centrado predeterminado y simple de 940 px de ancho para casi cualquier sitio web o página proporcionado por un solo archivo <div class="container">.

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

Diseño fluido

<div class="container-fluid">proporciona una estructura de página flexible, anchos mínimos y máximos y una barra lateral izquierda. Es genial 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 receptivo Consultas de medios para varios dispositivos y resoluciones

Dispositivos receptivos

Lo que hacen

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
teléfonos inteligentes 480px y menos Columnas fluidas, sin anchos fijos
Teléfonos inteligentes a tabletas 767px y menos Columnas fluidas, sin anchos fijos
Tabletas de retrato 768px y superior 42px 20px
Defecto 980px y más 60px 20px
Pantalla grande 1200px y más 70px 30 píxeles

Requiere metaetiqueta

Para asegurarse de que los dispositivos muestren las páginas receptivas correctamente, incluya la metaetiqueta de la ventana gráfica.

  1. <meta name = "viewport" content = "width=device-width, initial-scale=1.0" >

Usando las consultas de medios

Bootstrap no incluye automáticamente estas consultas de medios, pero comprenderlas y agregarlas es muy fácil y requiere una configuración mínima. Tiene algunas opciones para incluir las funciones receptivas de Bootstrap:

  1. Use la versión receptiva compilada, bootstrap-responsive.css
  2. Agregue @import "responsive.less" y vuelva a compilar Bootstrap
  3. Modifique y vuelva a compilar responsive.less como un archivo separado

¿Por qué no simplemente incluirlo? A decir verdad, no todo tiene que ser receptivo. En lugar de alentar a los desarrolladores a eliminar esta función, consideramos que es mejor habilitarla.

  1.   /* Teléfonos horizontales y hacia abajo */
  2.   @media ( ancho máximo : 480px ) { ... } _     
  3.  
  4.   /* Teléfono horizontal a tableta vertical */
  5.   @media ( ancho máximo : 767px ) { ... } _     
  6.  
  7.   /* Tableta vertical a horizontal y escritorio */
  8.   @media ( ancho mínimo : 768 px ) y ( ancho máximo : 979 px ) { ... }        
  9.  
  10.   /* Escritorio grande */
  11.   @media ( ancho mínimo : 1200px ) { ... } _

Clases de utilidad sensibles

Qué son

Para un desarrollo optimizado para dispositivos móviles más rápido, use estas clases de utilidades básicas para mostrar y ocultar contenido por dispositivo.

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.

Por ejemplo, puede mostrar un <select>elemento para navegación en diseños móviles, pero no en tabletas o computadoras de escritorio.

clases de apoyo

Aquí se muestra una tabla de las clases que admitimos y su efecto en un diseño de consulta de medios determinado (etiquetado por dispositivo). Se pueden encontrar en responsive.less.

Clase Los telefonos480px y menos tabletas767px y menos Escritorios768px y superior
.visible-phone Visible
.visible-tablet Visible
.visible-desktop Visible
.hidden-phone Visible Visible
.hidden-tablet Visible Visible
.hidden-desktop Visible Visible

Caso de prueba

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