Twitter Bootstrap

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.

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

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

<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

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 offset 4

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

<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

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	Escondido	Escondido
`.visible-tablet`	Escondido	Visível	Escondido
`.visible-desktop`	Escondido	Escondido	Visível
`.hidden-phone`	Escondido	Visível	Visível
`.hidden-tablet`	Visível	Escondido	Visível
`.hidden-desktop`	Visível	Visível	Escondido

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

Base do desenvolvimento

configurações globais