Bootstrap

Estadas

Bootstrap está construído sobre cuadrículas, deseños e compoñentes sensibles de 12 columnas.

Configuración global

Require HTML5 doctype

Bootstrap fai uso de certos elementos HTML e propiedades CSS que requiren o uso do doctype HTML5. Inclúeo ao comezo de todos os teus proxectos.

  1. <!DOCTYPE html>
  2. <html lang = "gl" > 
  3.   ...
  4. </html>

Tipografía e ligazóns

Bootstrap establece estilos básicos de visualización global, tipografía e ligazón. En concreto, nós:

  • Eliminar marginno corpo
  • Establecer background-color: white;nobody
  • Use os atributos @baseFontFamily, @baseFontSize, e @baseLineHeightcomo a nosa base tipográfica
  • Establece a cor da ligazón global mediante @linkColore só aplica subliñado da ligazón:hover

Estes estilos pódense atopar dentro de scaffolding.less .

Restablecer mediante Normalizar

Con Bootstrap 2, o antigo bloque de reinicio foi eliminado en favor de Normalize.css , un proxecto de Nicolas Gallagher e Jonathan Neal que tamén alimenta o HTML5 Boilerplate . Aínda que usamos gran parte de Normalize dentro do noso reset.less , eliminamos algúns elementos especificamente para Bootstrap.

Sistema de reixa predeterminado

Exemplo de reixa en directo

O sistema de cuadrícula de Bootstrap predeterminado utiliza 12 columnas , o que fai un contedor de 940 píxeles de ancho sen as funcións de resposta activadas. Co ficheiro CSS de resposta engadido, a grade adáptase para ter 724 px e 1170 px de ancho dependendo da túa vista. Por debaixo das vistas de 767 px, as columnas vólvense fluídas e apiláronse verticalmente.

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

HTML básico da cuadrícula

Para un deseño sinxelo de dúas columnas, cree un .rowe engade o número adecuado de .span*columnas. Como esta é unha grade de 12 columnas, cada .span*unha abarca un número desas 12 columnas, e sempre debe sumar 12 para cada fila (ou o número de columnas do pai).

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

Dado este exemplo, temos .span4e .span8, o que supón un total de 12 columnas e unha fila completa.

Columnas de compensación

Move as columnas cara á dereita usando .offset*clases. Cada clase aumenta a marxe esquerda dunha columna nunha columna enteira. Por exemplo, .offset4móvese .span4sobre catro columnas.

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

Columnas aniñadas

Para aniñar o teu contido coa grade predeterminada, engade unha nova .rowe un conxunto de columnas dentro dunha columna .span*existente . .span*As filas anidadas deben incluír un conxunto de columnas que se suman ao número de columnas do seu pai.

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

Sistema de reixa de fluídos

Exemplo de reixa fluída en directo

O sistema de reixa fluída usa porcentaxes en lugar de píxeles para o ancho das columnas. Ten as mesmas capacidades de resposta que o noso sistema de reixa fixa, o que garante as proporcións adecuadas para as resolucións de pantalla e os dispositivos clave.

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

HTML básico de reixa fluida

Fai calquera fila "fluída" cambiando .rowa .row-fluid. As clases de columnas seguen sendo as mesmas, polo que é fácil cambiar entre as reixas fixas e fluídas.

  1. <div class = "fluído de fila" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span8" > ... </div> 
  4. </div>

Compensación de fluídos

Funciona do mesmo xeito que a compensación do sistema de reixa fixa: engádese .offset*a calquera columna para compensar con tantas columnas.

4
4 compensación 4
3 compensación 3
3 compensación 3
6 compensación 6 
  1. <div class = "fluído de fila" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span4 offset2" > ... </div> 
  4. </div>

Nidificación fluída

As cuadrículas fluídas utilizan o aniñamento de forma diferente: cada nivel de columnas aniñadas debe sumar ata 12 columnas. Isto débese a que a reixa fluída usa porcentaxes, non píxeles, para establecer anchos.

Fluído 12
Fluído 6
Fluído 6
Fluído 6
Fluído 6 
  1. <div class = "fluído de fila" > 
  2.   <div class = "span12" > 
  3.     Fluído 12
  4.     <div class = "fluído de fila" > 
  5.       <div class = "span6" > 
  6.         Fluído 6
  7.         <div class = "fluído de fila" > 
  8.           <div class = "span6" > Fluído 6 </div> 
  9.           <div class = "span6" > Fluído 6 </div> 
  10.         </div>
  11.       </div>
  12.       <div class = "span6" > Fluído 6 </div> 
  13.     </div>
  14.   </div>
  15. </div>

Deseños

Disposición fixa

Proporciona un deseño común de ancho fixo (e, opcionalmente, receptivo) con só <div class="container">necesario.

  1. <corpo>
  2.   <div class = "contedor" > 
  3.     ...
  4.   </div>
  5. </corpo>

Disposición de fluídos

Crea unha páxina fluída de dúas columnas con <div class="container-fluid">—ideal para aplicacións e documentos.

  1. <div class = "container-fluid" > 
  2.   <div class = "fluído de fila" > 
  3.     <div class = "span2" > 
  4.       <!--Contido da barra lateral-->
  5.     </div>
  6.     <div class = "span10" > 
  7.       <!--Contido corporal-->
  8.     </div>
  9.   </div>
  10. </div>

Deseño responsivo

Activación das funcións de resposta

Activa o CSS receptivo no teu proxecto incluíndo a metaetiqueta adecuada e a folla de estilo adicional dentro <head>do teu documento. Se compilaches Bootstrap desde a páxina Personalizar, só tes que incluír a metaetiqueta.

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

Aviso!Bootstrap non inclúe funcións de resposta por defecto neste momento, xa que non todo ten que responder. En lugar de animar aos desenvolvedores a eliminar esta función, pensamos que é mellor activala segundo sexa necesario.

Acerca de Bootstrap responsive

Dispositivos sensibles

As consultas multimedia permiten CSS personalizados en función dunha serie de condicións (proporcións, anchos, tipo de visualización, etc.), pero normalmente céntrase en min-widthe max-width.

  • Modifica o ancho da columna na nosa grella
  • Apila elementos en lugar de flotar onde sexa necesario
  • Cambia o tamaño dos títulos e do texto para que sexan máis axeitados para os dispositivos

Use as consultas de medios de forma responsable e só como comezo para as súas audiencias móbiles. Para proxectos máis grandes, considere bases de código dedicadas e non capas de consultas multimedia.

Dispositivos compatibles

Bootstrap admite un puñado de consultas multimedia nun único ficheiro para axudar a que os teus proxectos sexan máis apropiados en diferentes dispositivos e resolucións de pantalla. Aquí tes o que se inclúe:

Etiqueta Ancho da disposición Ancho da columna Ancho de canalón
Pantalla grande 1200 píxeles ou máis 70 píxeles 30 píxeles
Por defecto 980 píxeles ou máis 60 píxeles 20 píxeles
Tabletas de retrato 768 píxeles e máis 42 píxeles 20 píxeles
De teléfonos a tabletas 767 píxeles e inferior Columnas fluídas, sen anchos fixos
Teléfonos 480 píxeles e abaixo Columnas fluídas, sen anchos fixos 
  1. /* Escritorio grande */
  2. @media ( ancho mínimo : 1200 px ) { ... }     
  3.  
  4. /* Tableta vertical para paisaxe e escritorio */
  5. @media ( ancho mínimo : 768 píxeles ) e ( ancho máximo : 979 píxeles ) { ... }        
  6.  
  7. /* Teléfono horizontal a tableta vertical */
  8. @media ( ancho máximo : 767 píxeles ) { ... }     
  9.  
  10. /* Teléfonos horizontales e abaixo */
  11. @media ( ancho máximo : 480 píxeles ) { ... }

Clases de utilidade sensible

Para un desenvolvemento máis rápido para móbiles, utiliza estas clases de utilidade para mostrar e ocultar contido por dispositivo. A continuación móstrase unha táboa das clases dispoñibles e o seu efecto nun deseño de consulta multimedia determinado (etiquetado por dispositivo). Pódense atopar en responsive.less.

Clase Teléfonos767 píxeles e inferior Tabletas979 píxeles a 768 píxeles EscritoriosPor defecto
.visible-phone Visible
.visible-tablet Visible
.visible-desktop Visible
.hidden-phone Visible Visible
.hidden-tablet Visible Visible
.hidden-desktop Visible Visible

Cando usar

Use de forma limitada e evite crear versións completamente diferentes do mesmo sitio. En cambio, utilízaos para complementar a presentación de cada dispositivo. As utilidades sensibles non deben usarse con táboas e, como tales, non se admiten.

Caso de proba de utilidades sensibles

Cambia o tamaño do teu navegador ou carga en diferentes dispositivos para probar as clases anteriores.

Visible en...

As marcas de verificación verdes indican que a clase está visible na túa ventana gráfica actual.

  • Teléfono✔ Teléfono
  • Tablet✔Tablet
  • Escritorio✔ Escritorio

Oculto en...

Aquí, as marcas de verificación verdes indican que a clase está oculta na túa ventana gráfica actual.

  • Teléfono✔ Teléfono
  • Tablet✔Tablet
  • Escritorio✔ Escritorio