História

Nos primeiros dias do Twitter, os engenheiros usavam quase qualquer biblioteca com a qual estavam familiarizados para atender aos requisitos de front-end. O Bootstrap começou como uma resposta aos desafios que se apresentaram e o desenvolvimento acelerou rapidamente durante a primeira Hackweek do Twitter.

Com a ajuda e feedback de muitos engenheiros no Twitter, o Bootstrap cresceu significativamente para abranger não apenas estilos básicos, mas padrões de design front-end mais elegantes e duráveis.

Leia mais em dev.twitter.com ›

Suporte ao navegador

O Bootstrap é testado e suportado nos principais navegadores modernos, como Chrome, Safari, Internet Explorer e Firefox.

• Último Safari
• Último Google Chrome
• Firefox 4+
• Internet Explorer 7+

O que está incluído

Bootstrap vem completo com CSS compilado, não compilado e templates de exemplo.

• Todos os arquivos .less originais
• CSS totalmente compilado e minificado
• Documentação completa do guia de estilo
• Modelo de página de exemplo (mais em breve)

Grade padrão

O sistema de grade padrão fornecido como parte do Bootstrap é uma grade de 16 colunas de 940px de largura. É um sabor do popular sistema de grade 960, mas sem a margem/preenchimento adicional nos lados esquerdo e direito.

Exemplo de marcação de grade

Conforme mostrado aqui, um layout básico pode ser criado com duas "colunas", cada uma abrangendo um número das 16 colunas fundamentais que definimos como parte de nosso sistema de grade. Veja os exemplos abaixo para mais variações.

<div class="linha"> classe = "linha" >
  <div class = "span6 colunas" > 
    ...
  </div>
  <div class = "span10 colunas" > 
    ...
  </div>
</div>

Layout fixo

Um layout de contêiner centralizado de 940px de largura para praticamente qualquer site ou página.

<corpo>
  <div class = "contêiner" > 
    ...
  </div>
</body>

Layout fluido

Uma estrutura de página fluida ou líquida flexível com larguras mínima e máxima e uma barra lateral esquerda. Ótimo para aplicativos.

<corpo>
  <div class = "contêiner-fluido" > 
    <div class = "barra lateral" > 
      ...
    </div>
    <div class = "conteúdo" > 
      ...
    </div>
  </div>
</body>

Títulos e cópia

Uma hierarquia tipográfica padrão para estruturar suas páginas da web.

h1. Cabeçallho 1

h2. Título 2

h3. Título 3

h4. Título 4

h5. Título 5

h6. Título 6

Exemplo de parágrafo

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Exemplo de título Tem subtítulo…

Diversos elementos

Usando ênfase, endereços e abreviaturas

<strong> <em> <address> <abbr>

Quando usar

As etiquetas de ênfase ( <strong>e <em>) devem ser usadas para indicar importância ou ênfase adicional de uma palavra ou frase em relação à sua cópia circundante. Use <strong>para importância e ênfase <em>de estresse .

Ênfase em um parágrafo

Fusce dapibus , tellus ac cursus commodo , tortor mauris condimentum nibh , ut fermentum massa justo sit amet risus. Mecenas faucibus mollis interdum. Nulla vitae elit libero, a pharetra augue.

Observação: ainda é permitido usar tags <b>e <i>em HTML5, mas elas não vêm mais com estilos inerentes. <b>destina-se a destacar palavras ou frases sem transmitir importância adicional, enquanto <i>é principalmente para voz, termos técnicos, etc.

Endereços

O <address>elemento é usado para informações de contato de seu ancestral mais próximo ou de todo o trabalho. Veja como fica:

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890

Observação: cada linha em um <address>deve terminar com uma quebra de linha ( <br />) ou ser envolvida em uma tag de nível de bloco (por exemplo, <p>) para estruturar adequadamente o conteúdo.

Abreviaturas

Para abreviaturas e siglas, use a <abbr>tag ( <acronym>está obsoleta em HTML5 ). Coloque o formulário abreviado dentro da tag e defina um título para o nome completo.

Citações em bloco

<blockquote> <p> <small>

Como cotar

<blockquote>Para incluir uma citação em bloco, envolva <p>e <small>tags. Use o <small>elemento para citar sua fonte e você receberá um travessão —antes dela.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

Dr. Júlio Hibbert

Não ordenado<ul>

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Integer molestie lorem em massa
• Facilisis em pretium nisl aliquet
• Nulla volutpat aliquam velit
  • Phasellus iaculis neque
  • Ultricies Purus sodales
  • Vestibulum laoreet porttitor sem
  • Ac tristique libero volutpat at
• Faucibus porta lacus fringilla vel
• Aenean sit amet erat nunc
• Eget porttitor lorem

Sem estilo<ul.unstyled>

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Integer molestie lorem em massa
• Facilisis em pretium nisl aliquet
• Nulla volutpat aliquam velit
  • Phasellus iaculis neque
  • Ultricies Purus sodales
  • Vestibulum laoreet porttitor sem
  • Ac tristique libero volutpat at
• Faucibus porta lacus fringilla vel
• Aenean sit amet erat nunc
• Eget porttitor lorem

Encomendado<ol>

1. Lorem ipsum dolor sit amet
2. Consectetur adipiscing elit
3. Integer molestie lorem em massa
4. Facilisis em pretium nisl aliquet
5. Nulla volutpat aliquam velit
6. Faucibus porta lacus fringilla vel
7. Aenean sit amet erat nunc
8. Eget porttitor lorem

Descriçãodl

Listas de descrição

Uma lista de descrição é perfeita para definir termos.

Euismod

Vestibulum id ligula porta felis euismod sempre eget lacinia odio sem nec elit.

Donec id elit non mi porta gravida at eget metus.

porta Malesuada

Etiam porta sem maleuada magna mollis euismod.

Construindo tabelas

<table> <thead> <tbody> <tr> <th> <td> <colspan> <caption>

As mesas são ótimas – para muitas coisas. Grandes tabelas, no entanto, precisam de um pouco de amor de marcação para serem úteis, escaláveis ​​e legíveis (no nível do código). Aqui estão algumas dicas para ajudar.

Sempre envolva seus cabeçalhos de coluna de <thead>forma que a hierarquia seja <thead>> <tr>> <th>.

Semelhante aos cabeçalhos de coluna, todo o conteúdo do corpo da sua tabela deve ser agrupado em um <tbody>para que sua hierarquia seja <tbody>> <tr>> <td>.

Exemplo: estilos de tabela padrão

Todas as tabelas serão estilizadas automaticamente com apenas as bordas essenciais para garantir a legibilidade e manter a estrutura. Não há necessidade de adicionar classes ou atributos extras.

#	Primeiro nome	Sobrenome	Linguagem
1	Algum	Um	Inglês
2	João	Pacote de seis	Inglês
3	Stu	Dente	Código

< classe de tabela = "tabela-comum" > 
  ...
</table>

Exemplo: listrado de zebra

Fique um pouco extravagante com suas mesas adicionando listras de zebra - basta adicionar a .zebra-stripedclasse.

#	Primeiro nome	Sobrenome	Linguagem
1	Algum	Um	Inglês
2	João	Pacote de seis	Inglês
3	Stu	Dente	Código

Observação: o Zebra-striping é um aprimoramento progressivo não disponível para navegadores mais antigos, como IE8 e anteriores.

<table class = "tabela comum listrada de zebra" > 
...
</table>

Exemplo: listrado de zebra com TableSorter.js

Tomando o exemplo anterior, melhoramos a utilidade de nossas tabelas fornecendo funcionalidade de classificação via jQuery e o plugin Tablesorter . Clique no cabeçalho de qualquer coluna para alterar a classificação.

#	Primeiro nome	Sobrenome	Linguagem
1	Sua	Um	Inglês
2	João	Pacote de seis	Inglês
3	Stu	Dente	Código

<script src = "js/jquery/jquery.tablesorter.min.js" ></script> 
<script > 
  $ ( função () { 
    $ ( "table#sortTableExample" ). tableorter ({ sortList : [[ 1 , 0 ]] });  
  });
</script>
<table class = "tabela comum listrada de zebra" > 
  ...
</table>

Estilos padrão

Todos os formulários recebem estilos padrão para apresentá-los de maneira legível e escalável. Os estilos são fornecidos para entradas de texto, listas de seleção, áreas de texto, botões de opção e caixas de seleção e botões.

Exemplo de legenda de formulário

Entrada Extra Grande

Selecionar

1 2 3 4 5

Selecionar

1 2 3 4 5

Entrada não editável

Algum valor aqui

Entrada desativada

Entrada Extra Grande

Pequeno trecho de texto de ajuda

Exemplo de legenda de formulário

Texto anexado

@

Caixa de seleção anexada

Caixa de seleção anexada

Entrada de arquivo

Exemplo de legenda de formulário

Lista de opções

• A primeira opção é isso e aquilo - certifique-se de incluir por que é ótimo
• A opção dois também pode ser verificada e incluída nos resultados do formulário
• A opção três pode - sim, você adivinhou - também ser verificada e incluída nos resultados do formulário
• A opção quatro não pode ser marcada porque está desativada.

Nota: Os rótulos cercam todas as opções para áreas de clique muito maiores e um formulário mais utilizável.

Período

para Todos os horários são mostrados como Horário Padrão do Pacífico (GMT -08:00).

Área de texto

Bloco de texto de ajuda para descrever o campo acima, se necessário.

Lista de opções

• A primeira opção é isso e aquilo - certifique-se de incluir por que é ótimo
• A opção dois também pode ser verificada e incluída nos resultados do formulário

Salvar alterações  Cancelar

Formulários empilhados

Adicione .form-stackedao HTML do seu formulário e você terá rótulos no topo de seus campos em vez de à esquerda. Isso funciona muito bem se seus formulários forem curtos ou se você tiver duas colunas de entradas para formulários mais pesados.

Exemplo de legenda de formulário

Entrada Extra Grande

Selecionar

1 2 3 4 5

Exemplo de legenda de formulário

Entrada Extra Grande

Pequeno trecho de texto de ajuda

Lista de opções

• A primeira opção é isso e aquilo - certifique-se de incluir por que é ótimo
• A opção dois também pode ser verificada e incluída nos resultados do formulário

Nota: Os rótulos cercam todas as opções para áreas de clique muito maiores e um formulário mais utilizável.

Salvar alterações  Cancelar

Botões

Como convenção, os botões são usados ​​para ações enquanto os links são usados ​​para objetos. Por exemplo, "Download" pode ser um botão e "atividade recente" pode ser um link.

Todos os botões são padronizados para um estilo cinza claro, mas uma .primaryclasse azul está disponível. Além disso, rolar seus próprios estilos é fácil.

Botões de exemplo

Estilos de botão podem ser aplicados a qualquer coisa com o .btnmétodo aplicado. Normalmente, você desejará aplicá-los apenas a elementos <a>, <button>e select <input>. Veja como fica:

Tamanhos alternativos

Gosta de botões maiores ou menores? Têm-no!

Estado desativado

Para botões que não estão ativos ou estão desabilitados pelo aplicativo por um motivo ou outro, use o estado desabilitado. Isso é .disabledpara links e :disabledpara <button>elementos.

Links

Botões

O que é isso

Nossa barra superior é uma barra fixa que abriga o logotipo ou nome de um site, navegação principal e formulário de pesquisa.

Customizável

Todos os elementos dentro, e toda a barra superior também, são opcionais. Você pode optar por incluir um logotipo/nome, navegação, pesquisa e uma navegação secundária — ou qualquer combinação disso.

Listas suspensas incluídas

Como parte da navegação principal, incluímos a capacidade de adicionar menus suspensos à sua navegação. Confira a navegação secundária acima (alinhada à direita) para ver como é feito.

Tabs e pílulas

Crie uma navegação secundária simples com um arquivo <ul>. Alterne entre abas ou pílulas adicionando a classe apropriada.

Ótimo para subseções de conteúdo, como nossas páginas de configurações de conta e linhas do tempo do usuário para alternar entre páginas de conteúdo semelhante. Disponível em estilos com guias ou comprimidos.

• Casa
• Perfil
• Mensagens
• Definições
• Contato

<ul class = "abas" > 
  <li class = "ativo" ><a href = "#" > Página inicial </a></li>  
  <li><a href = "#" > Perfil </a></li> 
  <li><a href = "#" > Mensagens </a></li> 
  <li><a href = "#" > Configurações </a></li> 
  <li><a href = "#" > Contato </a></li> 
</ul>

• Casa
• Perfil
• Mensagens
• Definições
• Contato

<ul class = "comprimidos" > 
  <li class = "ativo" ><a href = "#" > Página inicial </a></li>  
  <li><a href = "#" > Perfil </a></li> 
  <li><a href = "#" > Mensagens </a></li> 
  <li><a href = "#" > Configurações </a></li> 
  <li><a href = "#" > Contato </a></li> 
</ul>

Paginação

Paginação ultra simplista e minimalista inspirada no Rdio. O bloco grande é difícil de perder, facilmente escalável e oferece grandes áreas de clique.

<div class = "paginação" > 
  <ul>
    <li class = "anterior desabilitado" ><a href = "#" > ← Anterior </a></li>  
    <li class = "ativo" ><a href = "#" > 1 </a></li>  
    <li><a href = "#" > 2 </a></li> 
    <li><a href = "#" > 3 </a></li> 
    <li><a href = "#" > 4 ​​</a></li> 
    <li><a href = "#" > 5 </a></li> 
    <li class = "próximo" ><a href = "#" > Próximo → </a></li>  
  </ul>
</div>

Alertas básicos

Mensagens de uma linha para destacar a falha, possível falha ou sucesso de uma ação. Particularmente útil para formulários.

Bloquear mensagens

Para mensagens que exigem um pouco de explicação, temos alertas de estilo de parágrafo. Eles são perfeitos para borbulhar mensagens de erro mais longas, avisar um usuário sobre uma ação pendente ou apenas apresentar informações para dar mais ênfase à página.

Modais

Os modais—diálogos ou lightboxes—são ótimos para ações contextuais em situações em que é importante que o contexto de fundo seja mantido.

Dicas de ferramentas

Twipsies são super úteis para ajudar um usuário confuso e apontá-lo na direção certa.

Popovers

Use popovers para fornecer informações subtextuais a uma página sem afetar o layout.

Bootstrap foi construído com Preboot , um pacote de código aberto de mixins e variáveis ​​para ser usado em conjunto com Less , um pré-processador CSS para desenvolvimento web mais rápido e fácil.

Confira como usamos o Preboot no Bootstrap e como você pode usá-lo caso opte por executar o Less em seu próximo projeto.

Como usá-lo

Use esta opção para fazer pleno uso das variáveis ​​Less do Bootstrap, mixins e aninhamento em CSS via javascript em seu navegador.

<link rel = "stylesheet/less" href = "less/bootstrap.less" media = "all" />    
<script src = "js/less-1.0.41.min.js" ></script> 

Não está sentindo a solução .js? Experimente o aplicativo Less Mac ou use o Node.js para compilar ao implantar seu código.

O que está incluído

Aqui estão alguns dos destaques do que está incluído no Twitter Bootstrap como parte do Bootstrap. Acesse o site do Bootstrap ou a página do projeto Github para baixar e saber mais.

Variáveis ​​de cor

Variáveis ​​em Less são perfeitas para manter e atualizar seu CSS sem dor de cabeça. Quando você quiser alterar um valor de cor ou um valor usado com frequência, atualize-o em um ponto e pronto.

// Links
@linkColor : #8b59c2;         
@linkColorHover :     escurecer ( @linkColor , 10 ); 
 
// Cinzas
@preto : #000;             
@grayDark :           clarear ( @black , 25 %); 
@gray :               clarear ( @black , 50 %); 
@grayLight :          clarear ( @black , 70 %); 
@grayLighter :        clarear ( @black , 90 %); 
@branco : #fff;             
 
// Cores de destaque
@azul : #08b5fb;              
@verde : #46a546;             
@red : #9d261d;               
@yellow : #ffc40d;            
@laranja : #f89406;            
@rosa : #c3325f;              
@roxo : #7a43b6;            
 
// Linha de base
@baseline : 20px ;          

Comentando

Less também fornece outro estilo de comentário além da /* ... */sintaxe normal do CSS.

// Este é um comentário
/* Isso também é um comentário */

Mixins até o wazoo

Mixins são basicamente includes ou parciais para CSS, permitindo que você combine um bloco de código em um. Eles são ótimos para propriedades prefixadas de fornecedores como box-shadow, gradientes entre navegadores, pilhas de fontes e muito mais. Abaixo está uma amostra dos mixins incluídos no Bootstrap.

Pilhas de fontes

#Fonte {
  . taquigrafia ( @weight : normal , @size : 14px , @lineHeight : 20px ) {     
tamanho da     fonte : @size ; 
    font - weight : @weight ; 
altura da     linha : @lineHeight ; 
  }
  . sans - serif ( @weight : normal , @size : 14px , @lineHeight : 20px ) {     
    fonte - família : "Helvetica Neue " , ​​Helvetica , Arial , sem serifa ;   
tamanho da     fonte : @size ; 
    font - weight : @weight ; 
altura da     linha : @lineHeight ; 
  }
  . serif ( @weight : normal , @size : 14px , @lineHeight : 20px ) {     
    fonte - família : "Georgia " , Times New Roman , Times , sem serifa ;     
tamanho da     fonte : @size ; 
    font - weight : @weight ; 
altura da     linha : @lineHeight ; 
  }
  . monospace ( @weight : normal , @size : 12px , @lineHeight : 20px ) {     
    fonte - família : "Monaco" , Courier New , monoespaçado ;   
tamanho da     fonte : @size ; 
    font - weight : @weight ; 
altura da     linha : @lineHeight ; 
  }
}

Gradientes

#gradiente {
  . horizontal ( @startColor : #555, @endColor: #333) { 
cor de     fundo : @endColor ; 
    background - repetir : repeat - x ;
    background - imagem : - khtml - gradiente ( linear , superior esquerdo , superior direito , de ( @startColor ), para ( @endColor )); // Konqueror   
imagem de     fundo : -moz - linear - gradiente ( esquerda , @startColor , @endColor ) ; // FF 3.6+    
imagem de     fundo : - ms - linear - gradiente ( esquerda , @startColor , @endColor ) ; // IE10    
    background - image : - webkit - gradiente ( linear , left top , right top , color - stop ( 0 %, @startColor ), color - stop ( 100 %, @endColor )); // Safari 4+, Chrome 2+    
    background - image : - webkit - linear - gradiente ( left , @startColor , @endColor ); // Safari 5.1+, Chrome 10+    
imagem de     fundo : -o - linear - gradiente ( esquerda , @startColor , @endColor ) ; // Ópera 11.10    
    - ms - filtro : %( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)" , @startColor , @endColor ); // IE8+  
    filter : e (%( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)" , @startColor , @endColor )); // IE6 e IE7 
imagem de     fundo : gradiente linear ( esquerda , @startColor , @endColor ) ; //Le padrão   
  }
  . vertical ( @startColor : #555, @endColor: #333) { 
cor de     fundo : @endColor ; 
    background - repetir : repeat - x ;
    background - image : - khtml - gradiente ( linear , superior esquerdo , inferior esquerdo , de ( @startColor ), para ( @endColor )); // Konqueror   
    background - imagem : - moz - linear - gradiente ( @startColor , @endColor ); // FF 3.6+   
    background - imagem : - ms - linear - gradiente ( @startColor , @endColor ); // IE10   
    background - imagem : - webkit - gradiente ( linear , superior esquerdo , inferior esquerdo , color - stop ( 0 %, @startColor ), color - stop ( 100 %, @endColor )); // Safari 4+, Chrome 2+    
    background - imagem : - webkit - linear - gradiente ( @startColor , @endColor ); // Safari 5.1+, Chrome 10+   
    background - imagem : - o - linear - gradiente ( @startColor , @endColor ); // Ópera 11.10   
    - ms - filtro : %( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)" , @startColor , @endColor ); // IE8+  
    filter : e (%( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)" , @startColor , @endColor )); // IE6 e IE7 
imagem de     fundo : gradiente linear ( @startColor , @endColor ) ; // O padrão  
  }
  . direcional ( @startColor : #555, @endColor: #333, @deg: 45deg) { 
    ...
  }
  . vertical - três - cores ( @startColor : #00b3ee, @midColor: #7a43b6, @colorStop: 0.5, @endColor: #c3325f) { 
    ...
  }
}

Operações e sistema de rede

Seja sofisticado e faça algumas contas para gerar mixins flexíveis e poderosos como o abaixo.

// Grade
@gridColumns : 16 ;       
@gridColumnWidth : 40px ;   
@gridGutterWidth : 20px ;   
 
// Sistema de rede
. recipiente {
  largura : @siteWidth ; 
  margem : 0 automático ;  
  . clearfix ();
}
. colunas ( @columnSpan : 1 ) {  
  exibição : em linha ; 
  flutuar : esquerda ;
  largura : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));         
  margin - left : @gridGutterWidth ; 
  &: primeiro - filho {
    margem esquerda : 0 ; _ 
  }
}
. deslocamento ( @columnOffset : 1 ) {  
  margin - left : ( @gridColumnWidth * @columnOffset ) + ( @gridGutterWidth * ( @columnOffset - 1 )) ! importante ;          
}