Bootstrap

Andaimes

O Bootstrap é construído em grades, layouts e componentes responsivos de 12 colunas.

Configurações globais

Requer tipo de documento HTML5

Bootstrap faz uso de certos elementos HTML e propriedades CSS que requerem o uso do doctype HTML5. Inclua-o no início de todos os seus projetos.

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

Tipografia e links

O Bootstrap define os estilos básicos de exibição global, tipografia e link. Especificamente, nós:

  • Retire marginno 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

Esses estilos podem ser encontrados em scaffolding.less .

Redefinir via Normalizar

Com o Bootstrap 2, o antigo bloco de reinicialização foi descartado em favor do Normalize.css , um projeto de Nicolas Gallagher e Jonathan Neal que também alimenta o HTML5 Boilerplate . Embora usemos muito do Normalize em nosso reset.less , removemos alguns elementos especificamente para o Bootstrap.

Sistema de grade padrão

Exemplo de grade ao vivo

O sistema de grade padrão do Bootstrap utiliza 12 colunas , criando um contêiner de 940px de largura sem recursos responsivos ativados. Com o arquivo CSS responsivo adicionado, a grade se adapta para ter 724px e 1170px de largura, dependendo da sua janela de visualização. Abaixo das viewports de 767px, as colunas se tornam fluidas e empilhadas verticalmente.

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

HTML de grade básico

Para um layout simples de duas colunas, crie um .rowe adicione o número apropriado de .span*colunas. Como esta é uma grade de 12 colunas, cada .span*uma abrange um número dessas 12 colunas e deve sempre somar 12 para cada linha (ou o número de colunas no pai).

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

Dado este exemplo, temos .span4e .span8, totalizando 12 colunas e uma linha completa.

Colunas de compensação

Mova as colunas para a direita usando .offset*classes. Cada classe aumenta a margem esquerda de uma coluna em uma coluna inteira. Por exemplo, .offset4move -se .span4por quatro colunas.

4
3 deslocamento 2
3 deslocamento 1
3 deslocamento 2
6 deslocamento 3 
  1. <div class = "linha" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span3 offset2" > ... </div> 
  4. </div>

Colunas de aninhamento

Para aninhar seu conteúdo com a grade padrão, adicione um novo .rowe um conjunto de .span*colunas em uma .span*coluna existente. As linhas aninhadas devem incluir um conjunto de colunas que somam o número de colunas de seu pai.

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

Sistema de grade de fluido

Exemplo de grade de fluido ao vivo

O sistema de grade fluida usa porcentagens em vez de pixels para larguras de coluna. Ele tem os mesmos recursos responsivos do nosso sistema de grade fixa, garantindo proporções adequadas para as principais resoluções de tela e dispositivos.

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

HTML básico de grade fluida

Torne qualquer linha "fluida" alterando .rowpara .row-fluid. As classes de coluna permanecem exatamente as mesmas, facilitando a alternância entre grades fixas e fluidas.

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

Compensação de fluido

Funciona da mesma forma que o deslocamento do sistema de grade fixa: adicione .offset*a qualquer coluna para compensar por esse número de colunas.

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

Aninhamento de fluido

As grades fluidas utilizam o aninhamento de maneira diferente: cada nível aninhado de colunas deve adicionar até 12 colunas. Isso ocorre porque a grade fluida usa porcentagens, não pixels, para definir larguras.

Fluido 12
Fluido 6
Fluido 6
Fluido 6
Fluido 6 
  1. <div class = "fluido de linha" > 
  2.   <div class = "span12" > 
  3.     Fluido 12
  4.     <div class = "fluido de linha" > 
  5.       <div class = "span6" > 
  6.         Fluido 6
  7.         <div class = "fluido de linha" > 
  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>

Layouts

Layout fixo

Fornece um layout comum de largura fixa (e opcionalmente responsivo) com apenas o <div class="container">necessário.

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

Layout fluido

Crie uma página fluida de duas colunas com <div class="container-fluid">—ó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

Ativando recursos responsivos

Ative o CSS responsivo em seu projeto, incluindo a metatag apropriada e a folha de estilo adicional dentro <head>do seu documento. Se você compilou o Bootstrap na página Personalizar, você só precisa incluir a metatag.

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

Atenção!Bootstrap não inclui recursos responsivos por padrão neste momento, pois nem tudo precisa ser responsivo. Em vez de incentivar os desenvolvedores a remover esse recurso, achamos melhor ativá-lo conforme necessário.

Sobre o Bootstrap responsivo

Dispositivos responsivos

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
Tela grande 1200px e superior 70px 30px
Predefinição 980px e superior 60px 20px
Tablets de retrato 768px e acima 42px 20px
Telefones para tablets 767px e abaixo Colunas fluidas, sem larguras fixas
Telefones 480px e abaixo Colunas fluidas, sem larguras fixas 
  1. /* Área de trabalho grande */
  2. @media ( largura mínima : 1200px ) { ... } _     
  3.  
  4. /* Retrato tablet para paisagem e desktop */
  5. @media ( min - width : 768px ) e ( max - width : 979px ) { ... }        
  6.  
  7. /* Telefone paisagem para tablet retrato */
  8. @media ( max - width : 767px ) { ... }     
  9.  
  10. /* Telefones paisagem e para baixo */
  11. @media ( largura máxima : 480px ) { ... } _

Classes de utilitários responsivos

Para um desenvolvimento mais rápido e otimizado para dispositivos móveis, use essas classes de utilitários para mostrar e ocultar conteúdo por dispositivo. Abaixo está uma tabela das classes disponíveis e seus efeitos em um determinado layout de consulta de mídia (rotulado por dispositivo). Eles podem ser encontrados em responsive.less.

Classe Telefones767px e abaixo Comprimidos979px a 768px DesktopsPredefinição
.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

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. Utilitários responsivos não devem ser usados ​​com tabelas e, como tal, não são suportados.

Caso de teste de utilitários responsivos

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