Bootstrap

Estadas

Bootstrap está construído nunha cuadrícula de 12 columnas sensible. Tamén incluímos deseños de ancho fixo e fluído baseados nese sistema.

Estilos globais para restablecer CSS, tipografía e ligazóns

Require doctype HTML5

Bootstrap fai uso de elementos HTML e propiedades CSS que requiren o uso do doctype HTML5. Asegúrate de incluílo ao comezo de cada páxina Bootstrapped do teu proxecto.

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

Tipografía e ligazóns

Dentro do ficheiro scaffolding.less , establecemos estilos básicos de visualización global, tipografía e ligazón. En concreto, nós:

  • Elimina a marxe do 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

Restablecer mediante Normalizar

A partir de Bootstrap 2, o restablecemento CSS tradicional evolucionou para facer uso de elementos de Normalize.css , un proxecto de Nicolas Gallagher que tamén alimenta o HTML5 Boilerplate .

O novo reinicio aínda se pode atopar en reset.less , pero con moitos elementos eliminados para brevidade e precisión.

Sistema de cuadrícula predeterminado 12 columnas cun xiro sensible

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

O sistema de grade predeterminado que se proporciona como parte de Bootstrap é unha grade de 940 píxeles de ancho e 12 columnas .

Tamén ten catro variacións sensibles para varios dispositivos e resolucións: teléfono, retrato da tableta, paisaxe da tableta e escritorios pequenos e escritorios de pantalla ancha grande.

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

Como se mostra aquí, pódese crear un deseño básico con dúas "columnas", cada unha abarcando un número das 12 columnas fundamentais que definimos como parte do noso 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. <div class = "fila" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span4 offset4" > ... </div> 
  4. </div>

Columnas aniñadas

Co sistema de reixa estática (non fluída) en Bootstrap, a anidación é sinxela. Para aniñar o teu contido, só tes que engadir unha columna nova .rowe un conxunto de columnas dentro dunha columna .span*existente ..span*

Exemplo

As filas anidadas deben incluír un conxunto de columnas que se suman ao número de columnas do seu pai. Por exemplo, dúas .span3columnas aniñadas deben colocarse dentro dun .span6.

Nivel 1 da columna
Nivel 2
Nivel 2 
  1. <div class = "fila" > 
  2.   <div class = "span12" > 
  3.     Nivel 1 da columna
  4.     <div class = "fila" > 
  5.       <div class = "span6" > Nivel 2 </div> 
  6.       <div class = "span6" > Nivel 2 </div> 
  7.     </div>
  8.   </div>
  9. </div>

Sistema de reixa fluída 12 columnas sensibles, baseadas en porcentaxes

Columnas fluídas

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

Porcentaxes, non píxeles

O sistema de reixa fluída usa porcentaxes para anchos de columna en lugar de píxeles fixos. Tamén ten as mesmas variacións 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.

Filas fluídas

Fai fluído calquera fila simplemente cambiando .rowa .row-fluid. As columnas seguen sendo exactamente as mesmas, polo que é moi sinxelo cambiar entre deseños fixos e fluídos.

Marcado

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

Nidificación fluída

Aniñar con cuadrículas fluídas é un pouco diferente: o número de columnas aniñadas non precisa coincidir co pai. Pola contra, as túas columnas restablecen en cada nivel porque cada fila ocupa o 100 % da columna principal.

Fluído 12
Fluído 6
Fluído 6 
  1. <div class = "fluído de fila" > 
  2.   <div class = "span12" > 
  3.     Nivel 1 da columna
  4.     <div class = "fluído de fila" > 
  5.       <div class = "span6" > Nivel 2 </div> 
  6.       <div class = "span6" > Nivel 2 </div> 
  7.     </div>
  8.   </div>
  9. </div>

Personalización da reixa

Variable Valor predeterminado Descrición
@gridColumns 12 Número de columnas
@gridColumnWidth 60 píxeles Ancho de cada columna
@gridGutterWidth 20 píxeles Espazo negativo entre columnas

Variables en MENOS

En Bootstrap hai un puñado de variables para personalizar o sistema de grade predeterminado de 940px, documentado anteriormente. Todas as variables da grella almacénanse en variables.less.

Como personalizar

Modificar a grade significa cambiar as tres @grid*variables e recompilar Bootstrap. Cambia as variables da grella en variables.less e utiliza unha das catro formas documentadas para recompilar . Se estás engadindo máis columnas, asegúrate de engadir o CSS para aqueles en grid.less.

Manterse receptivo

A personalización da grade só funciona no nivel predeterminado, a grade de 940 px. Para manter os aspectos sensibles de Bootstrap, tamén terás que personalizar as cuadrículas en responsive.less.

Modelos básicos para crear páxinas web

Disposición fixa

O deseño predeterminado e sinxelo de 940 píxeles de ancho e centrado para case calquera sitio web ou páxina proporcionado por un único ficheiro <div class="container">.

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

Disposición de fluídos

<div class="container-fluid">dá unha estrutura de páxina flexible, anchos mínimos e máximos e unha barra lateral esquerda. É xenial 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 responsive Consultas multimedia para varios dispositivos e resolucións

Dispositivos sensibles

O que fan

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
Smartphones 480 píxeles e abaixo Columnas fluídas, sen anchos fixos
De smartphones a tabletas 767 píxeles e inferior Columnas fluídas, sen anchos fixos
Tabletas de retrato 768 píxeles e máis 42 píxeles 20 píxeles
Por defecto 980 píxeles ou máis 60 píxeles 20 píxeles
Pantalla grande 1200 píxeles ou máis 70 píxeles 30 píxeles

Require metaetiqueta

Para garantir que os dispositivos mostren correctamente as páxinas que responden, inclúe a metaetiqueta da vista.

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

Usando as consultas de medios

Bootstrap non inclúe automaticamente estas consultas multimedia, pero comprendelas e engadilas é moi sinxelo e require unha configuración mínima. Tes algunhas opcións para incluír as funcións de resposta de Bootstrap:

  1. Use a versión responsive compilada, bootstrap-responsive.css
  2. Engade @import "responsive.less" e recompile Bootstrap
  3. Modifica e recompila responsive.less como un ficheiro separado

Por que non simplemente incluílo? A verdade, non todo ten que responder. En lugar de animar aos desenvolvedores a eliminar esta función, pensamos que é mellor activala.

  1.   // Paisaxe teléfonos e abaixo
  2.   @media ( ancho máximo : 480 píxeles ) { ... }     
  3.  
  4.   // Teléfono horizontal para tableta vertical
  5.   @media ( ancho máximo : 767 píxeles ) { ... }     
  6.  
  7.   // Vertical da tableta a paisaxe e escritorio
  8.   @media ( ancho mínimo : 768 píxeles ) e ( ancho máximo : 979 píxeles ) { ... }        
  9.  
  10.   // Escritorio grande
  11.   @media ( ancho mínimo : 1200 px ) { ... }

Clases de utilidade sensible

Que son

Para un desenvolvemento máis rápido para móbiles, utiliza estas clases de utilidade básicas para mostrar e ocultar contido por dispositivo.

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.

Por exemplo, pode mostrar un <select>elemento de navegación en deseños móbiles, pero non en tabletas ou escritorios.

Clases de apoio

Aquí móstrase unha táboa das clases que admitimos e o seu efecto nun deseño de consulta multimedia determinado (etiquetado por dispositivo). Pódense atopar en responsive.less.

Clase Teléfonos480 píxeles e abaixo Tabletas767 píxeles e inferior Escritorios768 píxeles e máis
.visible-phone Visible
.visible-tablet Visible
.visible-desktop Visible
.hidden-phone Visible Visible
.hidden-tablet Visible Visible
.hidden-desktop Visible Visible

Caso de proba

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