Exemplos de início rápido

Precisa de alguns modelos rápidos? Confira estes exemplos básicos que reunimos:

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" > 
  <div class = "span6" > 
    ...
  </div>
  <div class = "span10" > 
    ...
  </div>
</div>

Colunas de aninhamento

Aninhe seu conteúdo, se necessário, criando um .rowdentro de uma coluna existente.

Exemplo de colunas aninhadas

<div class = "linha" > 
  <div class = "span12" > 
    Nível 1 da coluna
    <div class = "linha" > 
      <div class = "span6" > 
        Nível 2
      </div>
      <div class = "span6" > 
        Nível 2
      </div>
    </div>
  </div>
</div>

Role sua própria grade

Construído no Bootstrap há um punhado de variáveis ​​para personalizar o sistema de grade padrão de 940px. Com um pouco de personalização, você pode modificar o tamanho das colunas, suas calhas e o contêiner em que residem.

Dentro da grade

As variáveis ​​necessárias para modificar o sistema de grade atualmente residem em variables.less.

Agora para personalizar

Modificar a grade significa alterar as três @grid-*variáveis ​​e recompilar os arquivos Less.

O Bootstrap vem equipado para lidar com um sistema de grade com até 24 colunas; o padrão é apenas 16. Veja como suas variáveis ​​de grade ficariam personalizadas para uma grade de 24 colunas.

@gridColumns : 24 ;       
@gridColumnWidth : 20px ;   
@gridGutterWidth : 20px ;   

Uma vez recompilado, você estará pronto!

Layout fixo

O layout centralizado padrão e simples de 940px de largura para praticamente qualquer site ou página fornecido por um único arquivo <div.container>.

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

Layout fluido

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

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

Toda a grade tipográfica é baseada em duas variáveis ​​Less em nosso arquivo variables.less: @basefonte @baseline. O primeiro é o tamanho da fonte base usado e o segundo é a altura da linha base.

Usamos essas variáveis ​​e um pouco de matemática para criar as margens, preenchimentos e alturas de linha de todos os nossos tipos e muito mais.

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.

Nota: Ainda não há problema em usar tags <b>e <i>em HTML5 e elas não precisam ser estilizadas em negrito e itálico, respectivamente (embora, se houver um elemento mais semântico, use-o). <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. Aqui estão dois exemplos de como ele pode ser usado:

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

<blockquote>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. </p>
  <small> Dr. Julius Hibbert </small>
</blockquote>

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.

Código

<code> <pre>

Pimp seu código em grande estilo com duas tags simples. Para ainda mais grandiosidade através do javascript, acesse a biblioteca de embelezamento de código do Google e pronto.

Apresentando código

Código, blocos ou apenas snippets inline, podem ser exibidos com estilo apenas envolvendo a tag correta. Para blocos de código que abrangem várias linhas, use o <pre>elemento. Para código embutido, use o <code>elemento.

<div>
  <h1>Título</h1>
  <p>Algo aqui...</p>
</div>

<div> <h1> Título </h1> <p> Algo bem aqui... </p> </div>
  
  

Rótulos embutidos

<span class="label">

Chame a atenção ou sinalize qualquer frase no corpo do texto.

Rotule qualquer coisa

Já precisou de um desses novos! ou sinalizadores importantes ao escrever código? Bem, agora você os tem. Aqui está o que está incluído por padrão:

Grade de mídia

Exiba miniaturas de tamanhos variados em páginas com pouca pegada HTML e estilos mínimos.

Miniaturas de exemplo

As miniaturas .media-gridpodem ser de qualquer tamanho, mas funcionam melhor quando mapeadas diretamente para o sistema de grade Bootstrap integrado. Larguras de imagem como 90, 210 e 330 combinam com alguns pixels de preenchimento para igualar os tamanhos das colunas .span2, .span4e ..span6

Grande

Médio

Pequena

Codificando-os

As grades de mídia são fáceis de usar e bastante simples no lado da marcação. Suas dimensões são puramente baseadas no tamanho das imagens incluídas.

<ul class = "media-grid" > 
  <li>
    <a href = "#" > 
      <img class = "thumbnail" src = "https://placehold.it/330x230" alt = "" >   
    </a>
  </li>
  <li>
    <a href = "#" > 
      <img class = "thumbnail" src = "https://placehold.it/330x230" alt = "" >   
    </a>
  </li>
</ul>

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.

<tabela>
  ...
</table>

Exemplo: tabela condensada

Para tabelas que exigem mais dados em espaços mais apertados, use o sabor condensado que corta o preenchimento pela metade. Também pode ser usado em conjunto com bordas e listras de zebra, assim como os estilos de tabela padrão.

Exemplo: tabela com borda

Faça suas mesas parecerem um pouco mais elegantes, arredondando os cantos e adicionando bordas em todos os lados.

< classe de tabela = "tabela com borda" > 
  ...
</table>

Exemplo: listrado de zebra

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

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

< classe de tabela = "com listras 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.

<script src = "js/jquery/jquery.tablesorter.min.js" ></script> 
<script > 
  $ ( função () { 
    $ ( "table#sortTableExample" ). tableorter ({ sortList : [[ 1 , 0 ]] });  
  });
</script>
< classe de tabela = "com listras 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.

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.

Tamanhos de campo de formulário

Personalize qualquer forma input, selectou textarealargura adicionando apenas algumas classes à sua marcação.

A partir da v1.3.0, adicionamos as classes de dimensionamento baseadas em grade para elementos de formulário. Por favor, use estes sobre as classes existentes .mini, .smalletc.

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 várias classes funcionais podem ser aplicadas para diferentes estilos de cores. Essas classes incluem uma .primaryclasse azul, uma classe azul claro .info, uma classe verde .successe uma classe vermelha .danger.

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. liAs tags suspensas também são compatíveis com .activea exibição da seleção de página atual.

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.

Exemplo de guias básicas

As guias podem ser usadas como navegação normal (carregando páginas externas na mesma guia) ou como áreas de conteúdo tabuladas para trocar painéis de conteúdo. Temos um plugin de abas que pode ser usado para integrar o último.

• Casa
• Perfil
• Mensagens
• Definições
• Contato
• Suspenso
  • Link secundário
  • Outra coisa aqui
  • Outro link

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

Exemplo de pílulas básicas

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

Migalhas de pão

A navegação Breadcrumb é usada como uma forma de mostrar aos usuários onde eles estão em um aplicativo ou site, mas não para navegação principal.

• Casa

• Início /
• Página do meio

• Início /
• Página do meio /
• Outro

• Início /
• Página do meio /
• Outra /
• Você está aqui

<ul class = "migalhas de pão" > 
  <li><a href = "#" > Página inicial </a> <span class = "divider" > / </span></li>   
  <li><a href = "#" > Página do meio </a> <span class = "divider" > / </span></li>   
  <li><a href = "#" > Outro </a> <span class = "divider" > / </span></li>   
  <li class = "ativo" > Você está aqui </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

.alert-message

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

Obtenha o javascript »

Código de exemplo

<div class = "aviso de mensagem de alerta" > 
  <a class = "fechar" href = "#" > × </a>  
  <p><strong> Santo guacamole! </strong> Melhor verificar você mesmo, você não está parecendo muito bem. </p>
</div>

Bloquear mensagens

.alert-message.block-message

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.

Obtenha o javascript »

Código de exemplo

<div class = "alert-message block-message warning" > 
  <a class = "fechar" href = "#" > × </a>  
  <p><strong> Santo guacamole! Isso é um aviso! </strong> Melhor verificar você mesmo, você não está parecendo muito bem. Nulla vitae elit libero, a pharetra augue. Praesent comodo cursus magna, vel scelerisque nisl consectetur et. </p>
  <div class = "alert-actions" > 
    <a class = "btn small" href = "#" > Execute esta ação </a> <a class = "btn small" href = "#" > Ou faça isso </a>     
  </div>
</div>

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.

Obtenha o javascript »

Dicas de ferramentas

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

Obtenha o javascript »

Popovers

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

Obtenha o javascript »

Começando

Integrar javascript com a biblioteca Bootstrap é super fácil. Abaixo, abordamos o básico e fornecemos alguns plugins incríveis para você começar!

Ver documentos javascript »

O que está incluído

Dê vida a alguns dos principais componentes do Bootstrap com novos plugins personalizados que funcionam com jQuery e Ender . Incentivamos você a ampliá-los e modificá-los para atender às suas necessidades específicas de desenvolvimento.

O javascript é necessário?

Não! Bootstrap é projetado em primeiro lugar para ser uma biblioteca CSS. Este javascript fornece uma camada interativa básica sobre os estilos incluídos.

No entanto, para aqueles que precisam de javascript, fornecemos os plugins acima para ajudá-lo a entender como integrar o Bootstrap com javascript e fornecer uma opção rápida e leve para a funcionalidade básica imediatamente.

Para obter mais informações e ver algumas demonstrações ao vivo, consulte nossa página de documentação do plug-in .