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.
O sistema de grade padrão fornecido como parte do Bootstrap é uma grade de 12 colunas e 940px de largura .
Ele também possui quatro variações responsivas para vários dispositivos e resoluções: telefone, retrato de tablet, paisagem de mesa e desktops pequenos e desktops widescreen grandes.
- <div class = "linha" >
- <div class = "span4" > ... </div>
- <div class = "span8" > ... </div>
- </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.
- <div class = "linha" >
- <div class = "span4" > ... </div>
- <div class = "span4 offset4" > ... </div>
- </div>
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 .row
e conjunto de .span*
colunas dentro de uma .span*
coluna existente.
As linhas aninhadas devem incluir um conjunto de colunas que somam o número de colunas de seu pai. .span3
Por exemplo, duas colunas aninhadas devem ser colocadas em um arquivo .span6
.
- <div class = "linha" >
- <div class = "span12" >
- Nível 1 da coluna
- <div class = "linha" >
- <div class = "span6" > Nível 2 </div>
- <div class = "span6" > Nível 2 </div>
- </div>
- </div>
- </div>
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.
Torne qualquer linha fluida simplesmente mudando .row
para .row-fluid
. As colunas permanecem exatamente as mesmas, tornando super simples alternar entre layouts fixos e fluidos.
- <div class = "fluido de linha" >
- <div class = "span4" > ... </div>
- <div class = "span8" > ... </div>
- </div>
O aninhamento 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.
- <div class = "fluido de linha" >
- <div class = "span12" >
- Nível 1 da coluna
- <div class = "fluido de linha" >
- <div class = "span6" > Nível 2 </div>
- <div class = "span6" > Nível 2 </div>
- </div>
- </div>
- </div>
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 |
@siteWidth |
Soma calculada de todas as colunas e calhas | Conta o número de colunas e calhas para definir a largura do .container-fixed() mixin |
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.
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.
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.
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">
.
- <corpo>
- <div class = "contêiner" >
- ...
- </div>
- </body>
<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.
- <div class = "contêiner-fluido" >
- <div class = "fluido de linha" >
- <div class = "span2" >
- <!--Conteúdo da barra lateral-->
- </div>
- <div class = "span10" >
- <!--Conteúdo do corpo-->
- </div>
- </div>
- </div>
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 | |
Tablets de retrato | 480px a 768px | Colunas fluidas, sem larguras fixas | |
Tablets de paisagem | 768px a 979px | 42px | 20px |
Predefinição | 980px e superior | 60px | 20px |
Tela grande | 1210px e superior | 70px | 30px |
Para garantir que os dispositivos exibam páginas responsivas corretamente, inclua a metatag da janela de visualização.
- <meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
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-width
e max-width
.
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:
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.
- // Telefones paisagem e para baixo
- @media ( largura máxima : 480px ) { ... } _
- // Telefone paisagem para tablet retrato
- @media ( max - width : 768px ) { ... }
- // Tablet retrato para paisagem e desktop
- @media ( min - width : 768px ) e ( max - width : 980px ) { ... }
- // Área de trabalho grande
- @media ( largura mínima : 1200px ) { .. } _