Globo.com 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

O sistema padrão do grid do Bootstrap utiliza 12 columns, com um container de 940px sem funcionalidades de design responsivo habilitadas. Com o arquivo responsive adicionado, o grid se adapta de 724px e 1170px dependendo do nosso viewport. Abaixo de 767px, as colunas se tornam fluidas e ficam estagnadas verticalmente

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 direita usando as classes .offset*. Cada classe aumenta a margem esquerda de uma coluna por toda colunagem. Por exemplo, .offset4 move .span4 por 4 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

Coluna nível 1

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

Grids fluidos utilizam aninhamento diferente: cada nível animnhado de coluna deve adicionar mais de 12 colunas. Isto é por que o grid fluido usa percentagens, não pixels, para atribuir as larguras

Fluid 12

Fluid 6

<div class="row-fluid">
  <div class="span12">
    Fluid 12
    <div class="row-fluid">
      <div class="span6">
        Fluid 6
        <div class="row-fluid">
          <div class="span6">Fluid 6</div>
          <div class="span6">Fluid 6</div>
        </div>
      </div>
      <div class="span6">Fluid 6</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
Resolução de tela grande	1200px and up	70px	30px
Padrão	980px and up	60px	20px
Tablets no formato na orientação horizontal	768px and above	42px	20px
Phones até tablets	767px and below	Colunas fluidas, larguras não fixas
Phones	480px and below	Colunas fluidas, larguras não fixas

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

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

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

/* dispositivo no formato paisagem e abaixos */
@media (max-width: 480px) { ... }

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 de forma básica e evite de criar versões completamente diferentes do mesmo site. Ao invés disto, use-os para complementar cada apresentação do dispositivo. Utilitários responsives não devem ser usados com tabelas, e isto não é suportado.

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