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

Você também pode adicionar subtítulos com o <strong>e<em>

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 adicionar distinção visual entre uma palavra ou frase e sua cópia circundante. Use <strong>para atenção simples e <em>para atenção e títulos lisos .

Ê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.

Endereços

O addresselemento é usado para—você adivinhou!—endereços. Veja como fica:

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

Nota: Cada linha em um addressdeve terminar com uma quebra de linha ( <br />) para estruturar adequadamente o conteúdo conforme é lido na vida real sem nenhum estilo aplicado.

Abreviaturas

Para abreviaturas e siglas, use a abbrtag ( acronymestá 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> <cite>

Certifique-se de envolver sua blockquotevolta paragraphe citeetiquetas. Ao citar uma fonte, use o citeelemento. O CSS irá automaticamente prefaciar um nome com um travessão (—).

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...

Dr. Júlio Hibbert

Não ordenado<ul>

• Jeremy Bixby
• Robert Dezure
• Josh Washington
• Anton Capresi
• Meus colegas
  • Jorge Castanza
  • Jerry Seinfeld
  • Cosmo Kramer
  • Elaine Bennis
  • Novo homem
• John Jacob
• Paul Pierce
• Kevin Garnett

Sem estilo<ul.unstyled>

• Jeremy Bixby
• Robert Dezure
• Josh Washington
• Anton Capresi
• Meus colegas
  • Jorge Castanza
  • Jerry Seinfeld
  • Cosmo Kramer
  • Elaine Bennis
  • Novo homem
• John Jacob
• Paul Pierce
• Kevin Garnett

Encomendado<ol>

1. Jeremy Bixby
2. Robert Dezure
3. Josh Washington
4. Anton Capresi
5. Meus colegas
   1. Jorge Castanza
   2. Jerry Seinfeld
   3. Cosmo Kramer
   4. Elaine Bennis
   5. Novo homem
6. John Jacob
7. Paul Pierce
8. Kevin Garnett

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 theadforma 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 tbodypara 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

<table class="common-table"> class = "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

<table class="common-table zebra-striped"> 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 type="text/javascript" src="js/jquery/jquery.tablesorter.min.js"></script> type = "text/javascript" src = "js/jquery/jquery.tablesorter.min.js" ></script> 
<script type = "texto/javascript" > 
  $ ( documento ). pronto ( 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

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, buttone 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 buttonelementos.

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="tabs"> classe = "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="pílulas"> 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"> classe = "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.

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" type = "text/css" href = "less/bootstrap.less" media = "all" />     
<script type = "text/javascript" 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 ;          
}