Base do desenvolvimento

O Bootstrap é construído em um grid responsivo de 12 colunas, com layouts e componentes

Requer o doctype de HTML5

O Bootstrap faz o uso de certos elementos HTML e propriedades CSS que requer o uso do doctype HTML5. Inclua no início dos seus projetos

<!DOCTYPE html>
<html lang="en">
  ...
</html>

Tipografia e links

O Bootstrap usa estilos básicos de tela, tipografia, e estilos de link. Especificadamente, nós temos:

  • Remove margin do corpo
  • Escolhemos o background-color: white; no body
  • Use os atributos @baseFontFamily, @baseFontSize, and @baseLineHeight para nossa base tipográfica
  • Escolhemos cores globais de link via @linkColor e aplicamos linha abaixo do link com :hover

Estes estilos podem ser encontrados em scaffolding.less.

Reset via Normalize

Com o Bootstrap 2, os velhos blocos de reset foram retirados em favor do Normalize.css, um projeto do Nicolas Gallagher que também tem o poder do HTML5 Boilerplate. Enquanto nós usamos muito do Normalize em nosso reset.less, nós removemos alguns elementos especificadamente para o Bootstrap

Exemplo de grid real

The default Bootstrap grid system utilizes 12 columns, making for a 940px wide container without responsive features enabled. With the responsive CSS file added, the grid adapts to be 724px and 1170px wide depending on your viewport. Below 767px viewports, the columns become fluid and stack vertically.

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

HTML do grid básico

Para um simples layout de duas colunas, crie um .row e adicione um número apropriado de .span*. Como o grid é de 12 colunas, cada .span* tem um número que somam 12 colunas, e deve sempre ter 12 colunas para cada linha (ou o número de colunas do pai).

<div class="row">
  <div class="span4">...</div>
  <div class="span8">...</div>
</div>

No exemplo dado, nós temos .span4 e .span8, fazendo 12 o total de colunas de uma linha completa

Dando um offset nas colunas

Mova colunas para a esquerda usando as classes .offset*. Cada classe aumenta a margem esquerda de uma coluna por uma coluna completa. Por exemplo, um .offset4 move .span4 em quatro colunas

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

Aninhando colunas

Para aninhar seu conteúdo com o grid padrão, adicione um novo .row e escolha um .span* em * colunas com uma coluna existente de .span*. Linhas aninhadas devem incluir um set de colunas que adicionam ao número de colunas do seu pai

Nível 1 da coluna
Nível 2
Nível 2
<div class="row">
  <div class="span9">
    Coluna nível 1
    <div class="row">
      <div class="span6">Nível 2</div>
      <div class="span3">Nível 2</div>
    </div>
  </div>
</div>

Exemplo de grid fluido

O sistema de grid fluido usa porcentagem ao invés de pixels para colunagem nas larguras. Ele tem as mesmas funcionalidades responsivas como nosso grid fixo, assegurando as proporções adequadas para tela chave nas resoluções 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 do grid fluido

Para tornar qualquer linha "fluid" mudando .row para .row-fluid.

<div class="row-fluid">
  <div class="span4">...</div>
  <div class="span8">...</div>
</div>

offset do fluido

Opera da mesma forma como o grid fixo com um offset: adicione .offset* para qualquer coluna para dar um offset para qualquer coluna

4
4 offset 4
3 offset 3
3 offset 3
6 offset 6
<div class="row-fluid">
  <div class="span4">...</div>
  <div class="span4 offset2">...</div>
</div>

Teste de fluido

Aninhando grids fluidos é um pouco diferente: o número de colunas aninhadas devem não bater o número de colunas pai. Ao invés disto, cada nível da coluna aninhada são reiniciadas por que cada linha leva 100% da coluna pai

Fluid 12
Fluid 6
Fluid 6
<div class="row-fluid">
  <div class="span12">
    Nível 1 da coluna
    <div class="row-fluid">
      <div class="span6">Nível 2</div>
      <div class="span6">Nível 2</div>
    </div>
  </div>
</div>

Layout fixo

Provê uma largura fixa (e opcionalmente responsiva) com qualquer <div class="container"> requerido.

<body>
  <div class="container">
    ...
  </div>
</body>

Layout fluido

Criar uma página de duas colunas fluida com <div class="container-fluid">—ótimo para aplicação e documentação

<div class="container-fluid">
  <div class="row-fluid">
    <div class="span2">
      <!--conteúdo da lateral-->
    </div>
    <div class="span10">
      <!--conteúdo do corpo-->
    </div>
  </div>
</div>

Habilitando funcionalidades responsivas

Ligue o CSS responsivo no nosso projeto incluindo a meta tag e folha de estilos adicionais dentro do <head> do documento. Se você está com o Bootstrap da página customizada, você irá precisar incluir esta meta tag.

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

Atenção! Bootstrap não inclui funcionalidade responsivas por padrão neste tempo por que nem tudo precisa ser responsiva. Ao invés disto nós encorajamos os desenvolvedores a remover esta funcionalidade, nós fizemos de uma forma que é possível habilitar quando necessário.

Sobre o Bootstrap responsivo

Responsive devices

Os Media queries permitem ter CSS customizado baseado em um número de condições—aspecto, larguras, dipo de exibição, etc—mas geralmente focado em min-width and max-width.

  • Modificar a largura da coluna no seu grid
  • Elementos estagnados ao invés de float quando for necessário
  • Redimensionando cabeçalhos e textos para ser mais apropriados para dispositivos

Usar media queries responsivamente e somente como princípio para a audiência de dispositivos móveis. Para projetos mariores, considere dedicar bases de código e não em camadas de media queries

Dispositivos suportados

O Bootstrap suporta uma utilidade de media queries em um único arquivo para ajudar a fazer seus projetos mais apropriados para diferentes dispositivos e resoluções de tela. Aqui está o que é incluso:

Nome Largura do layout largura da coluna Largura do espaçamento
Phones 480px and below Colunas fluidas, larguras não fixas
Phones até tablets 767px and below Colunas fluidas, larguras não fixas
Tablets no formato na orientação horizontal 768px and above 42px 20px
Padrão 980px and up 60px 20px
Resolução de tela grande 1200px and up 70px 30px
/* dispositivo no formato paisagem e abaixos */
@media (max-width: 480px) { ... }

/* dispositivo em paisagem até os tablets em formato porta-retrato */
@media (max-width: 767px) { ... }

/* tables em formato porta retrato até os desktos no formato paisagem */
@media (min-width: 768px) and (max-width: 979px) { ... }

/* Desktop maiores */
@media (min-width: 1200px) { ... }

Classes utilitárias responsivas

Para um desenvolvimento rápido e amigável em mobile, use estas classes utilitárias para mostrar e esconder conteúdo dependendo do dispositivo. Abaixo é uma tabela de classes disponíveis e seus efeitos num layout específico(rotulado por dispositivo). Eles podem ser encontrados em responsive.less.

Classe Phones 767px e abaixo Tablets 979px até 768px Desktops Default
.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 uma limitada e básica versão do seu site para evitar criar diferentes versões do mesmo site. Ao invés disto, use-os como complemento de cada apresentação do dispositivo

Caso de teste responsivo

Redimensione seu browser ou carregar dispositivos diferentes para testar as classes acima

Visível em...

Marcações verdes indica que a classe é visível na nossa atual resolução

  • Phone✔ Phone
  • Tablet✔ Tablet
  • Desktop✔ Desktop

Escondido em...

Aqui, marcas verdes indica que a classe é escondido na nossa resolução atual

  • Phone✔ Phone
  • Tablet✔ Tablet
  • Desktop✔ Desktop