Estilos com Bootstrap

Tipografia

Cabeçalhos

Todos cabeçalhos, <h1> até <h6> estão disponíveis.

h1. Cabeçalho 1

h2. Cabeçalho 2

h3. Cabeçalho 3

h4. Cabeçalho 4

h5. Cabeçalho 5
h6. Cabeçalho 6

cópia do corpo

O padrão global do font-size é 14px, com um line-height de 20px. Isto é aplicado ao <body> e todos os parágrafos. E ainda, <p>(parágrafos) recebem uma margem da metade do line-height (10px por padrão).

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.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.
Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
<p>...</p>

cópia principal do corpo

Faça um parágrafo sobressair adicionando .lead.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

<p class="lead">...</p>

Construído com o Less

A escala tipográfica é baseado em duas variáveis LESS que estão disponíveis em variables.less: @baseFontSize e @baseLineHeight. O primeiro é o font-size base e o segundo é o line-height base. Nós usamos estas variáveis e uma simples matemática para criar as margens, paddings, e line-heights para toda nossa tipografia e mais. Customize-os e o Bootstrap se adapta.

Ênfase

Faça o uso da ênfase padrão do HTML com estilos leves

<small>

Para desenfatizar textos em blocos ou inline, use a tag small.

This line of text is meant to be treated as fine print.
<p>
  <small>This line of text is meant to be treated as fine print.</small>
</p>

<strong>

Para enfatizar um pedaço de texto com important

The following snippet of text is rendered as bold text.
<strong>rendered as bold text</strong>

<em>

Para enfatizar um pedaço de texto com stress

The following snippet of text is rendered as italicized text.
<em>rendered as italicized text</em>

Atenção! Sinta-se livre para usar <b> e <i> em HTML5. <b> é feito para marcar palavras ou frases sem dar importância adicional enquanto é mais usado para <i>, termos técnicos etc.

Abreviações

Implementação estilizada do elemento <abbr> para abreviações e acrônimos para mostrar a versão expandida do hover. Abreviações com um atributo title tem uma leve borda inferior e ajuda o cursor no hover, dando informação adicional de contexto

<abbr>

Para texto expandido em um hover de uma abreviação, incluindo um atributo title

Uma abreviação da palavra atributo é attr
<abbr title="attribute">attr</abbr>

<abbr class="initialism">

Adiciona .initialism para uma abreviação com uma fonte levemente menor

HTML É a melhor coisa desde o pão.
<abbr title="attribute" class="initialism">attr</abbr>

Endereços

Apresentar informação de contato para o ancestral mais próximo ou o corpo inteiro do documento

<address>

Preserva formatação terminando as linhas com <br>.

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890
Nome completo
first.last@gmail.com
  1. <address>
  2. <strong>Twitter, Inc.</strong><br>
  3. 795 Folsom Ave, Suite 600<br>
  4. San Francisco, CA 94107<br>
  5. <abbr title=“Phone”>P:</abbr> (123) 456-7890
  6. </address>
  7.  
  8. <address>
  9. <strong>Nome completo</strong><br>
  10. <a href=“mailto:#”>first.last@gmail.com</a>
  11. </address>

Citações

Para blocos de citação de uma outra fonte dentro do documento

Citação Padrão

Coloque em volta de um <blockquote> qualquer HTML como citação. Para citações diretas nós recomendamos o uso de <p>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

  1. <blockquote>
  2. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  3. </blockquote>

Opções de citação

Estilizar o conteúdo para mudanças ou simples variações da citação padrão

Nomeando uma fonte

Adicione uma tag <small> para identificar a fonte. Coloque em volta do nome a fonte de trabalho em uma tag <cite>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Alguém famoso in título da fonte

  1. <blockquote>
  2. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  3. <small>Alguém famoso em <cite title=“Source Title”>titulo da fonte</cite></small>
  4. </blockquote>

Telas alternadas

Use .pull-right para flutuar uma citação a direita.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Alguém famoso in título da fonte

  1. <blockquote class=“pull-right”>
  2. …
  3. </blockquote>

Listas

Não ordenadas

Uma lista de itens em que a ordem não importa

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem
  1. <ul>
  2. <li>…</li>
  3. </ul>

Ordenadas

Uma lista de itens em que a ordem importa

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

Não estilizadas

Uma lista de itens com nenhum list-style or margem esquerdas adicionais

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem
  1. <ul class=“unstyled”>
  2. <li>…</li>
  3. </ul>

Descrição

Uma lista de termos com suas descrições associadas

Listas descritivas
Uma lista de descrição é perfeita para definir termos
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
  1. <dl>
  2. <dt>…</dt>
  3. <dd>…</dd>
  4. </dl>

Descrição horizontal

Fazer os termos e descrições em um <dl> alinhados lado a lado

Listas descritivas
Uma lista de descrição é perfeita para definir termos
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
Felis euismod semper eget lacinia
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
  1. <dl class=“dl-horizontal”>
  2. <dt>…</dt>
  3. <dd>…</dd>
  4. </dl>

Atenção! Listas de descrição horizontal irá truncar termos que são muito longos para encaixar na esquerda da coluna fixa text-overflow. Em resoluções menores, eles irão mudar para o padrão de layout estagnado

Código

Inline

Wrap inline snippets of code with <code>.

For example, <section> should be wrapped as inline.
  1. Por exemplo, <code><section></code> deve ser colocado inline

Basic block

Use <pre> para múltiplas linhas de código, certifique-se de escapar qualquer caractere especial para renderizar corretamente

<p>Texto de exemplo aqui</p>
  1. <pre>
  2. &lt;p&gt;Texto de exemplo aqui&lt;/p&gt;
  3. </pre>

Atenção! Certifique-se de manter o código dentro de uma tag <pre> tão perto da esquerda quando possível, pois ela irá renderizar todas tabs
Você pode opcionalmente adicionar a classe .pre-scrollable que irá escolher um max-height of 350px e provê uma barra de progresso no eixo y

Tabelas

Estilos padrão

Para estilização básica—padding leve e somente um divisor horizontal—adicione a classe base .table para qualquer <table>.

#Primeiro nameÚltimo nomeNome do usuário
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter
  1. <table class=“table”>
  2. …
  3. </table>

Classes opcionais

Adicione qualquer das classes seguintes para a classe base .table

.table-striped

Adicione tabelas zebradas dentro de uma tag <tbody> via um seletor CSS :nth-child (não disponível no IE7-IE8)

#Primeiro nameÚltimo nomeNome do usuário
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter
  1. <table class=“table table-striped”>
  2. …
  3. </table>

.table-ordered

Adicione bordas e bordas arredondadas para a tabela

#Primeiro nameÚltimo nomeNome do usuário
1MarkOtto@mdo
MarkOtto@TwBootstrap
2JacobThornton@fat
3Larry the Bird@twitter
  1. <table class=“table table-bordered”>
  2. …
  3. </table>

.table-hover

Habilite um estado de hover em linhas dentro de <tbody>.

#Primeiro nameÚltimo nomeNome do usuário
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter
  1. <table class=“table table-hover”>
  2. …
  3. </table>

.table-condensed

Tornar a tabela mais compacta cortando o padding da célula pela metade

#Primeiro nameÚltimo nomeNome do usuário
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter
  1. <table class=“table table-condensed”>
  2. …
  3. </table>

Classes opcionais de linha

Use classes contextuais para cores das linhas da tabela

ClasseDescrição
.successIndica uma ação positiva com sucesso
.errorIndica uma ação negativa e potencialmente perigosa
.warningIndicates a warning that might need attention.
.infoUsar uma alternativa ao estilo padrão
#ProdutoPagamento feitoStatus
1TB – Monthly01/04/2012Approved
2TB – Monthly02/04/2012Declined
3TB – Monthly03/04/2012Pending
4TB – Monthly04/04/2012Call in to confirm
  1. …
  2. <tr class=“success”>
  3. <td>1</td>
  4. <td>TB – Monthly</td>
  5. <td>01/04/2012</td>
  6. <td>Approved</td>
  7. </tr>
  8. …

Marcaçãod e tabela suportada

Lista de elementos HTML suportados e como eles devem ser usados

TagDescrição
<table>Colocando elementos para exibir dados em um formato tabular
<thead>Elemento principal para linhas da tabela (<tr>) para rotular colunas da tabela
<tbody>Elemento principal para linhas da tabela (<tr>) no corpo da tabela
<tr>Elemento principal para uma coleção de células (&td;tr>) ou (<th>) para aparecer em uma única linha
<td>Célula da tabela padrão
<th>Célula de tabela especial para coluna (ou linha, dependendo do lugar que é colocado)
Deve ser usado dentro de um <thead>
<caption>Descrição ou sumário do que a tabela possui, especialmente útil para leitores de tela
  1. <table>
  2. <caption>…</caption>
  3. <thead>
  4. <tr>
  5. <th>…</th>
  6. <th>…</th>
  7. </tr>
  8. </thead>
  9. <tbody>
  10. <tr>
  11. <td>…</td>
  12. <td>…</td>
  13. </tr>
  14. </tbody>
  15. </table>

Formulários

Estilos padrão

Controles de formulários individuais recebem estilização, mas sem nenhuam classe base no elemento <form> ou mudanças grandes na marcação. Resultados são estagnados, alinhados a esquerda e rótulos no topo dos controles de formulário

Legend
Ajuda de texto em bloco
  1. <form>
  2. <legend>Legenda</legend>
  3. <label>Nome do título</label>
  4. <input type=“text” placeholder=“Digite algo…”>
  5. <span class=“help-block”>Example block-level help text here.</span>
  6. <label class=“checkbox”>
  7. <input type=“checkbox”> Olha eu
  8. </label>
  9. <button type=“submit” class=“btn”>Enviar</button>
  10. </form>

Layout opcionais

Incluído com o Bootstrap três layouts de formulários para usos comuns

Formulário de busca

Adicione .form-search para o formulário e .search-query para o <input> para um input de texto com arredondamento extra.

  1. <form class=“form-search”>
  2. <input type=“text” class=“input-medium search-query”>
  3. <button type=“submit” class=“btn”>Busca</button>
  4. </form>

Formulário inline

Adicione .form-inline para rótulos alinhados a esquerda e controles inline-block para um layout compacto

  1. <form class=“form-inline”>
  2. <input type=“text” class=“input-small” placeholder=“Email”>
  3. <input type=“password” class=“input-small” placeholder=“Senha”>
  4. <label class=“checkbox”>
  5. <input type=“checkbox”> Lembre-se de mim
  6. </label>
  7. <button type=“submit” class=“btn”>Entrar</button>
  8. </form>

Formulário horizontal

Rótulos alinhados a direita e flutuados a esquerda para aparecerem na mesma linha como controles. Requer mais mudanças do padrão de marcação do formulário padrão

  • Adicione .form-horizontal para o formulário
  • Coloque em volta dos rótulos e controles um .control-group
  • Adicione .control-label para os rótulos
  • Coloque em volta de qualquer controle associado .controls para alinhamento apropriado
Legend

  1. <form class=“form-horizontal”>
  2. <div class=“control-group”>
  3. <label class=“control-label” for=“inputEmail”>Email</label>
  4. <div class=“controls”>
  5. <input type=“text” id=“inputEmail” placeholder=“Email”>
  6. </div>
  7. </div>
  8. <div class=“control-group”>
  9. <label class=“control-label” for=“inputPassword”>Senha</label>
  10. <div class=“controls”>
  11. <input type=“password” id=“inputPassword” placeholder=“Senha”>
  12. </div>
  13. </div>
  14. <div class=“control-group”>
  15. <div class=“controls”>
  16. <label class=“checkbox”>
  17. <input type=“checkbox”> Lembre-se de mim
  18. </label>
  19. <button type=“submit” class=“btn”>Entrar</button>
  20. </div>
  21. </div>
  22. </form>

Controles de formulário suportados

Exemplos de um controle de formulários suportados em um layout de exemplo

Inputs

Os controles de formulários mais comuns, campos de input baseado em texto. Inclui suporte para todos os tipos do HTML5: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel e color.
Requer o uso de um tipo type

  1. <input type=“text” placeholder=“Text input”>

Área de texto

Controles de formulário que também suporta múltiplas linhas de texto. Mude o atributo row quando necessário

  1. <textarea rows=“3”></textarea>

Checkbox e radio

Checkboxes são usados para selecionar várias opções em uma lista enquanto botões radio são usados para selecionar uma opção de várias

Padrão (estagnados)


  1. <label class=“checkbox”>
  2. <input type=“checkbox” value=“”>
  3. Opção 1 é isto
  4. </label>
  5.  
  6. <label class=“radio”>
  7. <input type=“radio” name=“optionsRadios” id=“optionsRadios1” value=“option1” checked>
  8. Opção 1 é isto
  9. </label>
  10. <label class=“radio”>
  11. <input type=“radio” name=“optionsRadios” id=“optionsRadios2” value=“option2”>
  12. A opção 2 pode ser algo mais e selecionando irá desselacionar a opção 1
  13. </label>

checkboxes inline

Adicione a classe .inline para uma série de checkboxes ou radios para controlar a aparência na mesma linha

  1. <label class=“checkbox inline”>
  2. <input type=“checkbox” id=“inlineCheckbox1” value=“option1”> 1
  3. </label>
  4. <label class=“checkbox inline”>
  5. <input type=“checkbox” id=“inlineCheckbox2” value=“option2”> 2
  6. </label>
  7. <label class=“checkbox inline”>
  8. <input type=“checkbox” id=“inlineCheckbox3” value=“option3”> 3
  9. </label>

Selects

Use a opção padrão para especificar um multiple="multiple" para mostrar várias opções de uma vez


  1. <select>
  2. <option>1</option>
  3. <option>2</option>
  4. <option>3</option>
  5. <option>4</option>
  6. <option>5</option>
  7. </select>
  8.  
  9. <select multiple=“multiple”>
  10. <option>1</option>
  11. <option>2</option>
  12. <option>3</option>
  13. <option>4</option>
  14. <option>5</option>
  15. </select>

Extendendo controle de formulários

Adicione no topo de controles de browsers existentes, o Bootstrap inclui componentes de formulários bastante úteis

inputs inseridos antes ou depois

Adicione texto ou botões antes ou depois de qualquer input baseado em texto. Note que o elemento select não é suportado aqui

Opções padrão

Coloque em volta um .add-on em um input com um ou duas classes para colocar antes ou depois de um texto em um input

@
.00
  1. <div class=“input-prepend”>
  2. <span class=“add-on”>@</span><input class=“span2” id=“prependedInput” size=“16” type=“text” placeholder=“Nome do usuário”>
  3. </div>
  4. <div class=“input-append”>
  5. <input class=“span2” id=“appendedInput” size=“16” type=“text”><span class=“add-on”>.00</span>
  6. </div>

Combinados

Use ambas classes e duas instâncias de .add-on para colocar antes ou depois em um input

$ .00
  1. <div class=“input-prepend input-append”>
  2. <span class=“add-on”>$</span><input class=“span2” id=“appendedPrependedInput” size=“16” type=“text”><span class=“add-on”>.00</span>
  3. </div>

Botões ao invés de texto

Ao invés de um <span> com texto, use um .btn para ligar um botão (ou dois) a um input

  1. <div class=“input-append”>
  2. <input class=“span2” id=“appendedInputButton” size=“16” type=“text”><button class=“btn” type=“button”>Go!</button>
  3. </div>
  4.  
  5. <div class=“input-append”>
  6. <input class=“span2” id=“appendedInputButtons” size=“16” type=“text”><button class=“btn” type=“button”>Search</button><button class=“btn” type=“button”>Options</button>
  7. </div>

Formulário de busca

  1. <form class=“form-search”>
  2. <div class=“input-append”>
  3. <input type=“text” class=“span2 search-query”>
  4. <button type=“submit” class=“btn”>Busca</button>
  5. </div>
  6. <div class=“input-prepend”>
  7. <button type=“submit” class=“btn”>Busca</button>
  8. <input type=“text” class=“span2 search-query”>
  9. </div>
  10. </form>

Controlar tamanho

Use classes de tamanho relativo como .input-large ou deixe seus inputs com o tamanho da colunagem do grid usando as classes.span*

Tamanho relativo

  1. <input class=“input-mini” type=“text” placeholder=“.input-mini”>
  2. <input class=“input-small” type=“text” placeholder=“.input-small”>
  3. <input class=“input-medium” type=“text” placeholder=“.input-medium”>
  4. <input class=“input-large” type=“text” placeholder=“.input-large”>
  5. <input class=“input-xlarge” type=“text” placeholder=“.input-xlarge”>
  6. <input class=“input-xxlarge” type=“text” placeholder=“.input-xxlarge”>

Atenção! In future versions, we’ll be altering the use of these relative input classes to match our button sizes. For example, .input-large will increase the padding and font-size of an input.

Tamanho do grid

Use .span1 até .span12 para os inputs se encaixarem aos mesmos tamanhos das colunas do grid

  1. <input class=“span1” type=“text” placeholder=“.span1”>
  2. <input class=“span2” type=“text” placeholder=“.span2”>
  3. <input class=“span3” type=“text” placeholder=“.span3”>
  4. <select class=“span1”>
  5. …
  6. </select>
  7. <select class=“span2”>
  8. …
  9. </select>
  10. <select class=“span3”>
  11. …
  12. </select>

Para múltiplos inputs de grid por linha, use a classe modificadora .controls-row para espaçamento apropriado.

  1. <div class=“controls”>
  2. <input class=“span5” type=“text” placeholder=“.span5”>
  3. </div>
  4. <div class=“controls controls-row”>
  5. <input class=“span4” type=“text” placeholder=“.span4”>
  6. <input class=“span1” type=“text” placeholder=“.span1”>
  7. </div>
  8. …

inputs não editáveis

Dados presentes em um formulário que não é editável usando marcação de formulário atual

Some value here
  1. <span class=“input-xlarge uneditable-input”>Some value here</span>

Ações de formulários

Termine um formulário com um grupo de ações (botões). Quando colocado em um .form-horizontal, os botões irão automaticamente identados para alinhar com os controles de formulário

  1. <div class=“form-actions”>
  2. <button type=“submit” class=“btn btn-primary”>Salvar mudanças</button>
  3. <button type=“button” class=“btn”>Cancelar</button>
  4. </div>

Texto de ajuda

Suporte inline e bloco para texto de ajuda que aparece nos controles de formulário

Ajuda inline

Inline help text
  1. <input type=“text”><span class=“help-inline”>Inline help text</span>

Ajuda em bloco

A longer block of help text that breaks onto a new line and may extend beyond one line.
  1. <input type=“text”><span class=“help-block”>A longer block of help text that breaks onto a new line and may extend beyond one line.</span>

Estados de controle do formuário

Dar feedback para os usuários ou visitantes com feedback básico dos estados de controle de formulário e rótulos

Focus no input

Nós removemos o estilo padrão do outline em alguns controles de formulários e aplica um box-shadow no lugar de :focus.

  1. <input class=“input-xlarge” id=“focusedInput” type=“text” value=“Isto está focado…”>

Inputs desabilitados

Adicione o atributo disabled em um input para prevenir que o usuário possa digitar algo com uma aparência diferente

  1. <input class=“input-xlarge” id=“disabledInput” type=“text” placeholder=“Input desabilitado aqui” disabled>

Estdos de validação

Bootstrap includes validation styles for error, warning, info, and success messages. To use, add the appropriate class to the surrounding.control-group.

Alguma coisa deu errado

Por favor, corrija o erro

Username is taken

wowww
  1. <div class=“control-group warning”>
  2. <label class=“control-label” for=“inputWarning”>Input com aviso</label>
  3. <div class=“controls”>
  4. <input type=“text” id=“inputWarning”>
  5. <span class=“help-inline”>Alguma coisa deu errado</span>
  6. </div>
  7. </div>
  8. <div class=“control-group error”>
  9. <label class=“control-label” for=“inputError”>Input com erro</label>
  10. <div class=“controls”>
  11. <input type=“text” id=“inputError”>
  12. <span class=“help-inline”>Por favor, corrija o erro</span>
  13. </div>
  14. </div>
  15. <div class=“control-group success”>
  16. <label class=“control-label” for=“inputSuccess”>Input com sucesso</label>
  17. <div class=“controls”>
  18. <input type=“text” id=“inputSuccess”>
  19. <span class=“help-inline”>wowww</span>
  20. </div>
  21. </div>

Botões

Default buttons

Estilos de botão podem ser aplicados para qualquer classe .btn. Entretanto, tipicamente você irá acplicar somente em elementos <a>e <button> para melhor renderização

Botõesclass=””Descrição
btnBotão padrão cinza com gradiente
btn btn-primaryProvê peso extra visual e identifica a ação primária em uma coleção de botões
btn btn-infoUsado como uma alternativa para os estilos padrões
btn btn-successIndica uma ação bem sucedida e positiva
btn btn-warningIndicação de cuidado deve ser feita com esta ação
btn btn-dangerIndica uma ação potencialmente perigosa
btn btn-inverseBotão alternativo cinza, não ligado a uma ação semântica ou uso
btn btn-linkDesenfatizar um botão por fazer parecer como link enquanto mantém o comportamento de botão

Compatibilidade Cross Browser

O IE9 não corta gradiente de fundo em bordas arredondadas, então nós removemos. Outra coisa, IE9 desabilita elementos button, renderizando um texto cinza com uma sombra no texto que não podemos corrigir.

Tamanhos de botão

Botões bonitos maiores ou menores? Adicione .btn-large, .btn-small, ou .btn-mini




  1. <p>
  2. <button class=“btn btn-large btn-primary” type=“button”>Botão grande</button>
  3. <button class=“btn btn-large” type=“button”>Botão grande</button>
  4. </p>
  5. <p>
  6. <button class=“btn btn-primary” type=“button”>Padrão de botão</button>
  7. <button class=“btn” type=“button”>Padrão de botão</button>
  8. </p>
  9. <p>
  10. <button class=“btn btn-small btn-primary” type=“button”>Botão pequeno</button>
  11. <button class=“btn btn-small” type=“button”>Botão pequeno</button>
  12. </p>
  13. <p>
  14. <button class=“btn btn-mini btn-primary” type=“button”>Botão miniatura</button>
  15. <button class=“btn btn-mini” type=“button”>Botão miniatura</button>
  16. </p>

Criar um botões em bloco—aqueles que se espalha para a largura completa do elemento pai — adicionando .btn-block.

  1. <button class=“btn btn-large btn-block btn-primary” type=“button”>Botões em bloco</button>
  2. <button class=“btn btn-large btn-block” type=“button”>Botões em bloco</button>

Estado desabilitado

Fazer botões parecerem não clicáveis deixando mais claro em 50%

Anchor element

Adicione a classe .disabled ao <a>

Link primário Link

  1. <a href=“#” class=“btn btn-large btn-primary disabled”>Link primário</a>
  2. <a href=“#” class=“btn btn-large disabled”>Link</a>

Atenção! Nós usamos .disabled como uma classe utilitária, similar a classe .active, nenhum prefixo é necessário

Button element

Adicione o atributo disabled aos botões com a tag <button>

  1. <button type=“button” class=“btn btn-large btn-primary disabled” disabled=“disabled”>Botão primário</button>
  2. <button type=“button” class=“btn btn-large” disabled>Botões</button>

Uma classe, múltiplas tags

Use a classe .btn em um elemento <a>, <button>, ou elemento <input>.

Link
  1. <a class=“btn” href=“”>Link</a>
  2. <button class=“btn” type=“submit”>Botões</button>
  3. <input class=“btn” type=“button” value=“Input”>
  4. <input class=“btn” type=“submit” value=“Enviar”>

Como melhor prática, tente dar o elemento ao contexto para certificar-se que irá ser bem renderizado cross-browser. Se você tem uminput, use um <input type="submit"> para seus botões

Imagens

Adicione classes para uma tag <img> para facilmente estilizar imagens em qualquer projeto

  1. <img src=“…” class=“img-rounded”>
  2. <img src=“…” class=“img-circle”>
  3. <img src=“…” class=“img-polaroid”>

Atenção! .img-rounded e .img-circle não irão funcionar no IE7-8 devido ao não suporte ao border-radius

Ícones por Glyphicons

Ícones glyphs

140 ícones em forma de sprite, disponíveis em um padrão cinza escuro e branco, provido pelo Glyphicons.

  • icon-glass
  • icon-music
  • icon-search
  • icon-envelope
  • icon-heart
  • icon-star
  • icon-star-empty
  • icon-user
  • icon-film
  • icon-th-large
  • icon-th
  • icon-th-list
  • icon-ok
  • icon-remove
  • icon-zoom-in
  • icon-zoom-out
  • icon-off
  • icon-signal
  • icon-cog
  • icon-trash
  • icon-home
  • icon-file
  • icon-time
  • icon-road
  • icon-download-alt
  • icon-download
  • icon-upload
  • icon-inbox
  • icon-play-circle
  • icon-repeat
  • icon-refresh
  • icon-list-alt
  • icon-lock
  • icon-flag
  • icon-headphones
  • icon-volume-off
  • icon-volume-down
  • icon-volume-up
  • icon-qrcode
  • icon-barcode
  • icon-tag
  • icon-tags
  • icon-book
  • icon-bookmark
  • icon-print
  • icon-camera
  • icon-font
  • icon-bold
  • icon-italic
  • icon-text-height
  • icon-text-width
  • icon-align-left
  • icon-align-center
  • icon-align-right
  • icon-align-justify
  • icon-list
  • icon-indent-left
  • icon-indent-right
  • icon-facetime-video
  • icon-picture
  • icon-pencil
  • icon-map-marker
  • icon-adjust
  • icon-tint
  • icon-edit
  • icon-share
  • icon-check
  • icon-move
  • icon-step-backward
  • icon-fast-backward
  • icon-backward
  • icon-play
  • icon-pause
  • icon-stop
  • icon-forward
  • icon-fast-forward
  • icon-step-forward
  • icon-eject
  • icon-chevron-left
  • icon-chevron-right
  • icon-plus-sign
  • icon-minus-sign
  • icon-remove-sign
  • icon-ok-sign
  • icon-question-sign
  • icon-info-sign
  • icon-screenshot
  • icon-remove-circle
  • icon-ok-circle
  • icon-ban-circle
  • icon-arrow-left
  • icon-arrow-right
  • icon-arrow-up
  • icon-arrow-down
  • icon-share-alt
  • icon-resize-full
  • icon-resize-small
  • icon-plus
  • icon-minus
  • icon-asterisk
  • icon-exclamation-sign
  • icon-gift
  • icon-leaf
  • icon-fire
  • icon-eye-open
  • icon-eye-close
  • icon-warning-sign
  • icon-plane
  • icon-calendar
  • icon-random
  • icon-comment
  • icon-magnet
  • icon-chevron-up
  • icon-chevron-down
  • icon-retweet
  • icon-shopping-cart
  • icon-folder-close
  • icon-folder-open
  • icon-resize-vertical
  • icon-resize-horizontal
  • icon-hdd
  • icon-bullhorn
  • icon-bell
  • icon-certificate
  • icon-thumbs-up
  • icon-thumbs-down
  • icon-hand-right
  • icon-hand-left
  • icon-hand-up
  • icon-hand-down
  • icon-circle-arrow-right
  • icon-circle-arrow-left
  • icon-circle-arrow-up
  • icon-circle-arrow-down
  • icon-globe
  • icon-wrench
  • icon-tasks
  • icon-filter
  • icon-briefcase
  • icon-fullscreen

Glyphicons attribution

Glyphicons Halflings are normally not available for free, but an arrangement between Bootstrap and the Glyphicons creators have made this possible at no cost to you as developers. As a thank you, we ask you to include an optional link back to Glyphicons whenever practical.

Como usar

Todos ícones requerem uma tag <i> com uma classe única, prefixada com um icon-. Para usar, coloque o código seguinte em qualquer lugar:

  1. <i class=“icon-search”></i>

Há também estilos disponíveis de ícones (brancos) invertidos, deixando pronto com uma classe extra. Nós iremos especificadamente reforçar esta classe no hover e estados de ativo para navegação e links dropdown

  1. <i class=“icon-search icon-white”></i>

Atenção! Quando usar além de strings de texto, como um botão ou links de navegação, tenha certeza de deixar um espaço depois da tag para espaçamento apropriado

Exemplos de ícones

Use-os como botões, grupos de botões para uma barra de ferramentas, navegação, ou inputs de formulários

Botões

Grupos de botões em uma barra de botões
  1. <div class=“btn-toolbar”>
  2. <div class=“btn-group”>
  3.  
  4. <a class=“btn” href=“#”><i class=“icon-align-left”></i></a>
  5. <a class=“btn” href=“#”><i class=“icon-align-center”></i></a>
  6. <a class=“btn” href=“#”><i class=“icon-align-right”></i></a>
  7. <a class=“btn” href=“#”><i class=“icon-align-justify”></i></a>
  8. </div>
  9. </div>
Dropdown em um grupo de botões
Usuário
  1. <div class=“btn-group”>
  2. <a class=“btn btn-primary” href=“#”><i class=“icon-user icon-white”></i> Usuário</a>
  3. <a class=“btn btn-primary dropdown-toggle” data-toggle=“dropdown” href=“#”><span class=“caret”></span></a>
  4. <ul class=“dropdown-menu”>
  5. <li><a href=“#”><i class=“icon-pencil”></i> Editar</a></li>
  6. <li><a href=“#”><i class=“icon-trash”></i> Apagar</a></li>
  7. <li><a href=“#”><i class=“icon-ban-circle”></i> Ban</a></li>
  8. <li class=“divider”></li>
  9. <li><a href=“#”><i class=“i”></i> Tornar Administrador</a></li>
  10. </ul>
  11. </div>
Botão pequeno
  1. <a class=“btn btn-small” href=“#”><i class=“icon-star”></i></a>

Navegação

  1. <ul class=“nav nav-list”>
  2. <li class=“active”><a href=“#”><i class=“icon-home icon-white”></i> Início</a></li>
  3. <li><a href=“#”><i class=“icon-book”></i> Biblioteca</a></li>
  4. <li><a href=“#”><i class=“icon-pencil”></i> Aplicações</a></li>
  5. <li><a href=“#”><i class=“i”></i> Outros</a></li>
  6. </ul>

Campos de formulários

  1. <div class=“control-group”>
  2. <label class=“control-label” for=“inputIcon”>Endereço de email</label>
  3. <div class=“controls”>
  4. <div class=“input-prepend”>
  5. <span class=“add-on”><i class=“icon-envelope”></i></span>
  6. <input class=“span2” id=“inputIcon” type=“text”>
  7. </div>
  8. </div>
Facebook Twitter Youtube
Copyright © 2022 Blog de Tecnologia - Todos os direitos reservados