Bootstrap

Andaimes

O Bootstrap é construído em uma grade responsiva de 12 colunas. Também incluímos layouts de largura fixa e fluida com base nesse sistema.

Estilos globais para redefinição de CSS, tipografia e links

Requer tipo de documento HTML5

Bootstrap faz uso de elementos HTML e propriedades CSS que requerem o uso do doctype HTML5. Certifique-se de incluí-lo no início de cada página Bootstrapped em seu projeto.

  1. <!DOCTYPEhtml>
  2. <html lang = "pt" > 
  3.   ...
  4. </html>

Tipografia e links

Dentro do arquivo scaffolding.less , definimos a exibição global básica, a tipografia e os estilos de link. Especificamente, nós:

  • Remover margem no corpo
  • Definir background-color: white;nobody
  • Use os atributos , e como nossa @baseFontFamilybase @baseFontSizetipográfica@baseLineHeight
  • Defina a cor do link global por meio de @linkColore aplique sublinhados de link somente em:hover

Redefinir via Normalizar

A partir do Bootstrap 2, a redefinição de CSS tradicional evoluiu para fazer uso de elementos do Normalize.css , um projeto de Nicolas Gallagher que também alimenta o HTML5 Boilerplate .

O novo reset ainda pode ser encontrado em reset.less , mas com muitos elementos removidos para brevidade e precisão.

Sistema de grade padrão 12 colunas com um toque responsivo

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

O sistema de grade padrão fornecido no Bootstrap utiliza 12 colunas que são renderizadas em larguras de 724px, 940px (padrão sem CSS responsivo incluído) e 1170px. Abaixo das viewports de 767px, as colunas se tornam fluidas e empilhadas verticalmente.

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

Conforme mostrado aqui, um layout básico pode ser criado com duas "colunas", cada uma abrangendo um número das 12 colunas fundamentais que definimos como parte de nosso sistema de grade.


Colunas de compensação

4
4 deslocamento 4
3 deslocamento 3
3 deslocamento 3
8 deslocamento 4 
  1. <div class = "linha" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span4 offset4" > ... </div> 
  4. </div>

Colunas de aninhamento

Com o sistema de grade estático (não fluido) no Bootstrap, o aninhamento é fácil. Para aninhar seu conteúdo, basta adicionar um novo .rowe conjunto de .span*colunas dentro de uma .span*coluna existente.

Exemplo

As linhas aninhadas devem incluir um conjunto de colunas que somam o número de colunas de seu pai. .span3Por exemplo, duas colunas aninhadas devem ser colocadas em um arquivo .span6.

Nível 1 da coluna
Nível 2
Nível 2 
  1. <div class = "linha" > 
  2.   <div class = "span6" > 
  3.     Coluna de nível 1
  4.     <div class = "linha" > 
  5.       <div class = "span3" > Nível 2 </div> 
  6.       <div class = "span3" > Nível 2 </div> 
  7.     </div>
  8.   </div>
  9. </div>

Sistema de grade fluida 12 colunas responsivas baseadas em porcentagem

Colunas fluidas

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

Porcentagens, não pixels

O sistema de grade fluida usa porcentagens para larguras de coluna em vez de pixels fixos. Ele também possui as mesmas variações responsivas do nosso sistema de grade fixa, garantindo proporções adequadas para as principais resoluções de tela e dispositivos.

Linhas fluidas

Torne qualquer linha fluida simplesmente mudando .rowpara .row-fluid. As colunas permanecem exatamente as mesmas, tornando super simples alternar entre layouts fixos e fluidos.

Marcação

  1. <div class = "fluido de linha" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span8" > ... </div> 
  4. </div>

Aninhamento de fluido

Aninhar com grades fluidas é um pouco diferente: o número de colunas aninhadas não precisa corresponder ao pai. Em vez disso, suas colunas são redefinidas em cada nível porque cada linha ocupa 100% da coluna pai.

Fluido 12
Fluido 6
Fluido 6 
  1. <div class = "fluido de linha" > 
  2.   <div class = "span12" > 
  3.     Nível 1 da coluna
  4.     <div class = "fluido de linha" > 
  5.       <div class = "span6" > Nível 2 </div> 
  6.       <div class = "span6" > Nível 2 </div> 
  7.     </div>
  8.   </div>
  9. </div>

Personalização de grade

Variável Valor padrão Descrição
@gridColumns 12 Numero de colunas
@gridColumnWidth 60px Largura de cada coluna
@gridGutterWidth 20px Espaço negativo entre colunas

Variáveis ​​em MENOS

Construído no Bootstrap há um punhado de variáveis ​​para personalizar o sistema de grade padrão de 940px, documentado acima. Todas as variáveis ​​para a grade são armazenadas em variables.less.

Como personalizar

Modificar a grade significa alterar as três @grid*variáveis ​​e recompilar o Bootstrap. Altere as variáveis ​​da grade em variables.less e use uma das quatro maneiras documentadas para recompilar . Se você estiver adicionando mais colunas, certifique-se de adicionar o CSS para aquelas em grid.less.

Mantendo-se responsivo

A personalização da grade funciona apenas no nível padrão, a grade de 940px. Para manter os aspectos responsivos do Bootstrap, você também terá que customizar as grades em responsivo.less.

Layouts Modelos básicos para criar páginas da web

Layout fixo

O layout centralizado padrão e simples de 940px de largura para praticamente qualquer site ou página fornecido por um único arquivo <div class="container">.

  1. <corpo>
  2.   <div class = "contêiner" > 
  3.     ...
  4.   </div>
  5. </body>

Layout fluido

<div class="container-fluid">oferece estrutura de página flexível, larguras mínima e máxima e uma barra lateral esquerda. É ótimo para aplicativos e documentos.

  1. <div class = "contêiner-fluido" > 
  2.   <div class = "fluido de linha" > 
  3.     <div class = "span2" > 
  4.       <!--Conteúdo da barra lateral-->
  5.     </div>
  6.     <div class = "span10" > 
  7.       <!--Conteúdo do corpo-->
  8.     </div>
  9.   </div>
  10. </div>

Design responsivo Consultas de mídia para vários dispositivos e resoluções

Dispositivos responsivos

O que eles fazem

As consultas de mídia permitem CSS personalizado com base em várias condições - proporções, larguras, tipo de exibição etc. - mas geralmente se concentram em min-widthe max-width.

  • Modifique a largura da coluna em nossa grade
  • Empilhe elementos em vez de flutuar sempre que necessário
  • Redimensione títulos e texto para serem mais apropriados para dispositivos

Use as consultas de mídia com responsabilidade e apenas como um começo para seu público móvel. Para projetos maiores, considere bases de código dedicadas e não camadas de consultas de mídia.

Dispositivos suportados

O Bootstrap suporta várias consultas de mídia em um único arquivo para ajudar a tornar seus projetos mais apropriados em diferentes dispositivos e resoluções de tela. Aqui está o que está incluído:

Etiqueta Largura do layout Largura da coluna largura da calha
Smartphones 480px e abaixo Colunas fluidas, sem larguras fixas
Smartphones para tablets 767px e abaixo Colunas fluidas, sem larguras fixas
Tablets de retrato 768px e acima 42px 20px
Predefinição 980px e superior 60px 20px
Tela grande 1200px e superior 70px 30px

Requer metatag

Para garantir que os dispositivos exibam páginas responsivas corretamente, inclua a metatag da janela de visualização.

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

Usando as consultas de mídia

O Bootstrap não inclui automaticamente essas consultas de mídia, mas entendê-las e adicioná-las é muito fácil e requer configuração mínima. Você tem algumas opções para incluir os recursos responsivos do Bootstrap:

  1. Use a versão responsiva compilada, bootstrap-responsive.css
  2. Adicione @import "responsive.less" e recompile o Bootstrap
  3. Modifique e recompile o arquivo responsivo.less como um arquivo separado

Por que não apenas incluí-lo? Verdade seja dita, nem tudo precisa ser responsivo. Em vez de incentivar os desenvolvedores a remover esse recurso, achamos melhor habilitá-lo.

  1.   /* Telefones paisagem e para baixo */
  2.   @media ( largura máxima : 480px ) { ... } _     
  3.  
  4.   /* Telefone paisagem para tablet retrato */
  5.   @media ( max - width : 767px ) { ... }     
  6.  
  7.   /* Retrato tablet para paisagem e desktop */
  8.   @media ( min - width : 768px ) e ( max - width : 979px ) { ... }        
  9.  
  10.   /* Área de trabalho grande */
  11.   @media ( largura mínima : 1200px ) { ... } _

Classes de utilitários responsivos

O que eles são

Para um desenvolvimento mais rápido e otimizado para dispositivos móveis, use essas classes básicas de utilitários para mostrar e ocultar conteúdo por dispositivo.

Quando usar

Use de forma limitada e evite criar versões totalmente diferentes do mesmo site. Em vez disso, use-os para complementar a apresentação de cada dispositivo.

Por exemplo, você pode mostrar um <select>elemento para navegação em layouts móveis, mas não em tablets ou desktops.

Aulas de suporte

Aqui é mostrada uma tabela das classes que suportamos e seu efeito em um determinado layout de consulta de mídia (rotulado por dispositivo). Eles podem ser encontrados em responsive.less.

Classe Telefones480px e abaixo Comprimidos767px e abaixo Desktops768px e acima
.visible-phone Visível
.visible-tablet Visível
.visible-desktop Visível
.hidden-phone Visível Visível
.hidden-tablet Visível Visível
.hidden-desktop Visível Visível

Caso de teste

Redimensione seu navegador ou carregue em dispositivos diferentes para testar as classes acima.

Visível em...

Marcas de seleção verdes indicam que a classe está visível em sua viewport atual.

  • Telefone✔ Telefone
  • Tábua✔ Tablet
  • Área de Trabalho✔ Área de trabalho

Escondido em...

Aqui, as marcas de seleção verdes indicam que a classe está oculta na sua janela de visualização atual.

  • Telefone✔ Telefone
  • Tábua✔ Tablet
  • Área de Trabalho✔ Área de trabalho