Conheça as principais peças da infraestrutura do Bootstrap, incluindo nossa abordagem para um desenvolvimento web melhor, mais rápido e mais forte.

Tipo de documento HTML5

Bootstrap faz uso de certos elementos HTML e propriedades CSS que requerem o uso do doctype HTML5. Inclua-o no início de todos os seus projetos.

<!DOCTYPE html>
<html lang="en">
  ...
</html>

Primeiro celular

Com o Bootstrap 2, adicionamos estilos opcionais compatíveis com dispositivos móveis para os principais aspectos da estrutura. Com o Bootstrap 3, reescrevemos o projeto para ser compatível com dispositivos móveis desde o início. Em vez de adicionar estilos móveis opcionais, eles são incorporados ao núcleo. Na verdade, o Bootstrap é móvel primeiro . Os estilos mobile first podem ser encontrados em toda a biblioteca em vez de em arquivos separados.

Para garantir a renderização adequada e o zoom de toque, adicione a meta tag viewport ao seu arquivo <head>.

<meta name="viewport" content="width=device-width, initial-scale=1">

Você pode desabilitar os recursos de zoom em dispositivos móveis adicionando user-scalable=noà metatag da janela de visualização. Isso desativa o zoom, o que significa que os usuários só podem rolar e faz com que seu site pareça um pouco mais com um aplicativo nativo. No geral, não recomendamos isso em todos os sites, portanto, tenha cuidado!

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

Tipografia e links

O Bootstrap define os estilos básicos de exibição global, tipografia e link. Especificamente, nós:

Definir background-color: #fff;nobody
Use os atributos , e como nossa @font-family-basebase @font-size-basetipográfica@line-height-base
Defina a cor do link global por meio de @link-colore aplique sublinhados de link somente em:hover

Esses estilos podem ser encontrados em scaffolding.less.

Normalize.css

Para melhor renderização entre navegadores, usamos Normalize.css , um projeto de Nicolas Gallagher e Jonathan Neal .

Recipientes

O Bootstrap requer um elemento de contenção para envolver o conteúdo do site e abrigar nosso sistema de grade. Você pode escolher um dos dois contêineres para usar em seus projetos. Observe que, devido a paddinge mais, nenhum dos contêineres é encaixável.

Use .containerpara um contêiner de largura fixa responsivo.

<div class="container">
  ...
</div>

Use .container-fluidpara um contêiner de largura total, abrangendo toda a largura da sua janela de visualização.

<div class="container-fluid">
  ...
</div>

O Bootstrap inclui um sistema de grade de primeiro fluido móvel e responsivo que dimensiona adequadamente até 12 colunas à medida que o tamanho do dispositivo ou da janela de visualização aumenta. Inclui classes predefinidas para opções de layout fáceis, bem como mixins poderosos para gerar layouts mais semânticos .

Introdução

Os sistemas de grade são usados para criar layouts de página por meio de uma série de linhas e colunas que abrigam seu conteúdo. Veja como funciona o sistema de grade do Bootstrap:

As linhas devem ser colocadas dentro de .container(largura fixa) ou .container-fluid(largura total) para alinhamento e preenchimento adequados.
Use linhas para criar grupos horizontais de colunas.
O conteúdo deve ser colocado dentro de colunas e somente as colunas podem ser filhas imediatas de linhas.
Classes de grade predefinidas como .rowe .col-xs-4estão disponíveis para criar layouts de grade rapidamente. Menos mixins também podem ser usados para layouts mais semânticos.
As colunas criam medianizes (lacunas entre o conteúdo da coluna) via padding. Esse preenchimento é deslocado em linhas para a primeira e a última coluna por meio de margem negativa em .rows.
A margem negativa é o motivo pelo qual os exemplos abaixo estão recuados. É para que o conteúdo nas colunas da grade seja alinhado com o conteúdo não relacionado à grade.
As colunas de grade são criadas especificando o número de doze colunas disponíveis que você deseja abranger. Por exemplo, três colunas iguais usariam três .col-xs-4.
Se mais de 12 colunas forem colocadas em uma única linha, cada grupo de colunas extras será, como uma unidade, agrupado em uma nova linha.
As classes de grade se aplicam a dispositivos com larguras de tela maiores ou iguais aos tamanhos de ponto de interrupção e substituem as classes de grade destinadas a dispositivos menores. Portanto, por exemplo, aplicar qualquer .col-md-*classe a um elemento não afetará apenas seu estilo em dispositivos médios, mas também em dispositivos grandes se uma .col-lg-*classe não estiver presente.

Veja os exemplos para aplicar esses princípios ao seu código.

Consultas de mídia

Usamos as seguintes consultas de mídia em nossos arquivos Less para criar os principais pontos de interrupção em nosso sistema de grade.

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

Ocasionalmente, expandimos essas consultas de mídia para incluir um max-widthpara limitar o CSS a um conjunto mais restrito de dispositivos.

@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }

Opções de grade

Veja como os aspectos do sistema de grade do Bootstrap funcionam em vários dispositivos com uma tabela prática.

	Dispositivos extra pequenos Telefones (<768px)	Dispositivos pequenos Tablets (≥768px)	Dispositivos médios Desktops (≥992px)	Dispositivos grandes Desktops (≥1200px)
Comportamento da grade	Horizontal em todos os momentos	Recolhido para iniciar, horizontal acima dos pontos de interrupção
Largura do contêiner	Nenhum (automático)	750px	970px	1170px
Prefixo da classe	`.col-xs-`	`.col-sm-`	`.col-md-`	`.col-lg-`
# de colunas	12
Largura da coluna	Auto	~62px	~81px	~97px
largura da calha	30px (15px em cada lado de uma coluna)
encaixável	Sim
Compensações	Sim
Ordenação das colunas	Sim

Exemplo: empilhado para horizontal

Usando um único conjunto de .col-md-*classes de grade, você pode criar um sistema de grade básico que começa empilhado em dispositivos móveis e tablets (o intervalo extra pequeno a pequeno) antes de se tornar horizontal em dispositivos desktop (médio). Coloque colunas de grade em qualquer arquivo .row.

.col-md-1

.col-md-8

.col-md-4

.col-md-6

<div class="row">
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
  <div class="col-md-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</div>
</div>

Exemplo: recipiente de fluido

Transforme qualquer layout de grade de largura fixa em um layout de largura total alterando seu mais externo .containerpara .container-fluid.

<div class="container-fluid">
  <div class="row">
    ...
  </div>
</div>

Exemplo: celular e desktop

Não quer que suas colunas simplesmente empilhem em dispositivos menores? Use as classes de grade de dispositivo extra pequeno e médio adicionando .col-xs-* .col-md-*às suas colunas. Veja o exemplo abaixo para ter uma ideia melhor de como tudo funciona.

.col-xs-12 .col-md-8

.col-xs-6 .col-md-4

.col-xs-6

<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
  <div class="col-xs-6">.col-xs-6</div>
  <div class="col-xs-6">.col-xs-6</div>
</div>

Exemplo: celular, tablet, desktop

Com base no exemplo anterior, crie layouts ainda mais dinâmicos e poderosos com .col-sm-*classes de tablet.

.col-xs-12 .col-sm-6 .col-md-8

.col-xs-6 .col-md-4

.col-xs-6 .col-sm-4

<div class="row">
  <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <!-- Optional: clear the XS cols if their content doesn't match in height -->
  <div class="clearfix visible-xs-block"></div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>

Exemplo: quebra de coluna

Se mais de 12 colunas forem colocadas em uma única linha, cada grupo de colunas extras será, como uma unidade, agrupado em uma nova linha.

.col-xs-9

.col-xs-4
Como 9 + 4 = 13 > 12, esse div de 4 colunas é agrupado em uma nova linha como uma unidade contígua.

.col-xs-6
As colunas subsequentes continuam ao longo da nova linha.

<div class="row">
  <div class="col-xs-9">.col-xs-9</div>
  <div class="col-xs-4">.col-xs-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
  <div class="col-xs-6">.col-xs-6<br>Subsequent columns continue along the new line.</div>
</div>

Redefinições de coluna responsivas

Com as quatro camadas de grades disponíveis, você provavelmente encontrará problemas em que, em determinados pontos de interrupção, suas colunas não são claras, pois uma é mais alta que a outra. Para corrigir isso, use uma combinação de a .clearfixe nossas classes de utilitário responsivo .

.col-xs-6 .col-sm-3
Redimensione sua janela de visualização ou verifique-a em seu telefone para ver um exemplo.

.col-xs-6 .col-sm-3

<div class="row">
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>

  <!-- Add the extra clearfix for only the required viewport -->
  <div class="clearfix visible-xs-block"></div>

  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
</div>

Além de limpar a coluna em pontos de interrupção responsivos, pode ser necessário redefinir deslocamentos, pushes ou pulls . Veja isso em ação no exemplo de grade .

<div class="row">
  <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
  <div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div>
</div>

<div class="row">
  <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
  <div class="col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lg-offset-0">.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0</div>
</div>

Colunas de compensação

Mova as colunas para a direita usando .col-md-offset-*classes. Essas classes aumentam a margem esquerda de uma coluna por *colunas. Por exemplo, .col-md-offset-4move -se .col-md-4por quatro colunas.

.col-md-4

.col-md-4 .col-md-offset-4

.col-md-3 .col-md-offset-3

.col-md-6 .col-md-offset-3

<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row">
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div>
<div class="row">
  <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>

Você também pode substituir os deslocamentos das camadas de grade inferiores com .col-*-offset-0classes.

<div class="row">
  <div class="col-xs-6 col-sm-4">
  </div>
  <div class="col-xs-6 col-sm-4">
  </div>
  <div class="col-xs-6 col-xs-offset-3 col-sm-4 col-sm-offset-0">
  </div>
</div>

Colunas de aninhamento

Para aninhar seu conteúdo com a grade padrão, adicione um novo .rowe um conjunto de .col-sm-*colunas em uma .col-sm-*coluna existente. As linhas aninhadas devem incluir um conjunto de colunas que somam 12 ou menos (não é necessário usar todas as 12 colunas disponíveis).

Nível 1: .col-sm-9

Nível 2: .col-xs-8 .col-sm-6

Nível 2: .col-xs-4 .col-sm-6

<div class="row">
  <div class="col-sm-9">
    Level 1: .col-sm-9
    <div class="row">
      <div class="col-xs-8 col-sm-6">
        Level 2: .col-xs-8 .col-sm-6
      </div>
      <div class="col-xs-4 col-sm-6">
        Level 2: .col-xs-4 .col-sm-6
      </div>
    </div>
  </div>
</div>

Ordenação das colunas

Altere facilmente a ordem de nossas colunas de grade integradas com classes .col-md-push-*e .col-md-pull-*modificadoras.

.col-md-9 .col-md-push-3

.col-md-3 .col-md-pull-9

<div class="row">
  <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
  <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>

Menos mixins e variáveis

Além de classes de grade pré -construídas para layouts rápidos, o Bootstrap inclui menos variáveis e mixins para gerar rapidamente seus próprios layouts simples e semânticos.

Variáveis

As variáveis determinam o número de colunas, a largura da medianiz e o ponto de consulta de mídia no qual as colunas flutuantes devem ser iniciadas. Nós os usamos para gerar as classes de grade predefinidas documentadas acima, bem como para os mixins personalizados listados abaixo.

@grid-columns:              12;
@grid-gutter-width:         30px;
@grid-float-breakpoint:     768px;

Mixins

Mixins são usados em conjunto com as variáveis de grade para gerar CSS semântico para colunas de grade individuais.

// Creates a wrapper for a series of columns
.make-row(@gutter: @grid-gutter-width) {
  // Then clear the floated columns
  .clearfix();

  @media (min-width: @screen-sm-min) {
    margin-left:  (@gutter / -2);
    margin-right: (@gutter / -2);
  }

  // Negative margin nested rows out to align the content of columns
  .row {
    margin-left:  (@gutter / -2);
    margin-right: (@gutter / -2);
  }
}

// Generate the extra small columns
.make-xs-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @grid-float-breakpoint) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the small columns
.make-sm-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @screen-sm-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the small column offsets
.make-sm-column-offset(@columns) {
  @media (min-width: @screen-sm-min) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-sm-column-push(@columns) {
  @media (min-width: @screen-sm-min) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-sm-column-pull(@columns) {
  @media (min-width: @screen-sm-min) {
    right: percentage((@columns / @grid-columns));
  }
}

// Generate the medium columns
.make-md-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @screen-md-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the medium column offsets
.make-md-column-offset(@columns) {
  @media (min-width: @screen-md-min) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-md-column-push(@columns) {
  @media (min-width: @screen-md-min) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-md-column-pull(@columns) {
  @media (min-width: @screen-md-min) {
    right: percentage((@columns / @grid-columns));
  }
}

// Generate the large columns
.make-lg-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @screen-lg-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the large column offsets
.make-lg-column-offset(@columns) {
  @media (min-width: @screen-lg-min) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-lg-column-push(@columns) {
  @media (min-width: @screen-lg-min) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-lg-column-pull(@columns) {
  @media (min-width: @screen-lg-min) {
    right: percentage((@columns / @grid-columns));
  }
}

Exemplo de uso

Você pode modificar as variáveis para seus próprios valores personalizados ou apenas usar os mixins com seus valores padrão. Aqui está um exemplo de como usar as configurações padrão para criar um layout de duas colunas com um intervalo entre elas.

.wrapper {
  .make-row();
}
.content-main {
  .make-lg-column(8);
}
.content-secondary {
  .make-lg-column(3);
  .make-lg-column-offset(1);
}

<div class="wrapper">
  <div class="content-main">...</div>
  <div class="content-secondary">...</div>
</div>

Títulos

Todos os cabeçalhos HTML, <h1>por meio <h6>de , estão disponíveis. .h1as classes through .h6também estão disponíveis, para quando você deseja combinar o estilo da fonte de um título, mas ainda deseja que seu texto seja exibido em linha.

h1. Título de inicialização	Seminegrito 36px
h2. Título de inicialização	Seminegrito 30px
h3. Título de inicialização	Seminegrito 24px
h4. Título de inicialização	Seminegrito 18px
h5. Título de inicialização	Seminegrito 14px
h6. Título de inicialização	Seminegrito 12px

<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>

Crie um texto secundário mais leve em qualquer título com uma <small>tag genérica ou a .smallclasse.

h1. Cabeçalho de bootstrap Texto secundário

h2. Cabeçalho de bootstrap Texto secundário

h3. Cabeçalho de bootstrap Texto secundário

h4. Cabeçalho de bootstrap Texto secundário

h5. Cabeçalho de bootstrap Texto secundário

h6. Cabeçalho de bootstrap Texto secundário

<h1>h1. Bootstrap heading <small>Secondary text</small></h1>
<h2>h2. Bootstrap heading <small>Secondary text</small></h2>
<h3>h3. Bootstrap heading <small>Secondary text</small></h3>
<h4>h4. Bootstrap heading <small>Secondary text</small></h4>
<h5>h5. Bootstrap heading <small>Secondary text</small></h5>
<h6>h6. Bootstrap heading <small>Secondary text</small></h6>

Cópia do corpo

O padrão global do Bootstrap font-sizeé 14px , com um line-heightde 1.428 . Isso se aplica ao <body>e a todos os parágrafos. Além disso, <p>(parágrafos) recebem uma margem inferior de metade da altura da linha calculada (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.

Mecenas 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 do corpo do lead

Faça um parágrafo se destacar adicionando .lead.

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

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

Construído com menos

A escala tipográfica é baseada em duas variáveis Less em variables.less : @font-size-basee @line-height-base. O primeiro é o tamanho da fonte base usado e o segundo é a altura da linha base. Usamos essas variáveis e algumas matemáticas simples para criar as margens, preenchimentos e alturas de linha de todos os nossos tipos e muito mais. Personalize-os e o Bootstrap se adapta.

Elementos de texto embutidos

Texto marcado

Para destacar uma sequência de texto devido à sua relevância em outro contexto, use a <mark>tag.

Você pode usar a marca de marca pararealçartexto.

You can use the mark tag to <mark>highlight</mark> text.

Texto excluído

Para indicar blocos de texto que foram excluídos, use a <del>tag.

~~Esta linha de texto deve ser tratada como texto excluído.~~

<del>This line of text is meant to be treated as deleted text.</del>

Texto tachado

Para indicar blocos de texto que não são mais relevantes, use a <s>tag.

~~Esta linha de texto deve ser tratada como não mais precisa.~~

<s>This line of text is meant to be treated as no longer accurate.</s>

Texto inserido

Para indicar adições ao documento, use a <ins>tag.

Esta linha de texto deve ser tratada como uma adição ao documento.

<ins>This line of text is meant to be treated as an addition to the document.</ins>

Texto sublinhado

Para sublinhar o texto, use a <u>tag.

Esta linha de texto será renderizada como sublinhada

<u>This line of text will render as underlined</u>

Faça uso das tags de ênfase padrão do HTML com estilos leves.

Texto pequeno

Para enfatizar inline ou blocos de texto, use a <small>tag para definir o texto em 85% do tamanho do pai. Os elementos de título recebem seus próprios elementos font-sizeaninhados <small>.

Você também pode usar um elemento embutido .smallno lugar de qualquer <small>.

Esta linha de texto deve ser tratada como letras miúdas.

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

Audacioso

Para enfatizar um trecho de texto com um peso de fonte mais pesado.

O trecho de texto a seguir é renderizado como texto em negrito .

<strong>rendered as bold text</strong>

Itálico

Para enfatizar um trecho de texto com itálico.

O trecho de texto a seguir é renderizado como texto em itálico .

<em>rendered as italicized text</em>

Elementos alternativos

Sinta-se livre para usar <b>e <i>em HTML5. <b>destina-se a destacar palavras ou frases sem transmitir importância adicional, enquanto <i>é principalmente para voz, termos técnicos, etc.

Aulas de alinhamento

Realinhe facilmente o texto aos componentes com classes de alinhamento de texto.

Texto alinhado à esquerda.

Texto alinhado ao centro.

Texto alinhado à direita.

Texto justificado.

Sem quebra de texto.

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>

Aulas de transformação

Transforme texto em componentes com classes de capitalização de texto.

Texto em minúsculas.

Texto em maiúsculas.

Texto em maiúscula.

<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>

Abreviaturas

Implementação estilizada do <abbr>elemento HTML para abreviaturas e siglas para mostrar a versão expandida ao passar o mouse. As abreviações com um titleatributo têm uma borda inferior pontilhada clara e um cursor de ajuda ao passar o mouse, fornecendo contexto adicional ao passar o mouse e aos usuários de tecnologias assistivas.

Abreviação básica

Uma abreviação da palavra atributo é attr .

<abbr title="attribute">attr</abbr>

Inicialismo

Adicione .initialisma uma abreviação para um tamanho de fonte um pouco menor.

HTML é a melhor coisa desde o pão fatiado.

<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>

Endereços

Apresente as informações de contato do antepassado mais próximo ou de todo o trabalho. Preserve a formatação terminando todas as linhas com <br>.

Twitter, Inc.
1355 Market Street, Suite 900
San Francisco, CA 94103
P: (123) 456-7890

Nome completo
[email protected]

<address>
  <strong>Twitter, Inc.</strong><br>
  1355 Market Street, Suite 900<br>
  San Francisco, CA 94103<br>
  <abbr title="Phone">P:</abbr> (123) 456-7890
</address>

<address>
  <strong>Full Name</strong><br>
  <a href="mailto:#">[email protected]</a>
</address>

Citações em bloco

Para citar blocos de conteúdo de outra fonte em seu documento.

Citação de bloco padrão

Envolva <blockquote>qualquer HTML como a citação. Para cotações diretas, recomendamos um <p>.

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

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

Opções de citação em bloco

Mudanças de estilo e conteúdo para variações simples de um padrão <blockquote>.

Nomeando uma fonte

Adicione um <footer>para identificar a fonte. Envolva o nome do trabalho de origem em <cite>.

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

Alguém famoso em Source Title

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

Exibições alternativas

Adicione .blockquote-reversepara um blockquote com conteúdo alinhado à direita.

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

Alguém famoso em Source Title

<blockquote class="blockquote-reverse">
  ...
</blockquote>

Listas

Não ordenado

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

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

<ul>
  <li>...</li>
</ul>

Encomendado

Uma lista de itens em que a ordem importa explicitamente.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem em massa
Facilisis em pretium nisl aliquet
Nulla volutpat aliquam velit
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

<ol>
  <li>...</li>
</ol>

Sem estilo

Remova o padrão list-stylee a margem esquerda nos itens da lista (somente filhos imediatos). Isso se aplica apenas a itens de lista filhos imediatos , o que significa que você também precisará adicionar a classe para qualquer lista aninhada.

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

<ul class="list-unstyled">
  <li>...</li>
</ul>

Em linha

Coloque todos os itens da lista em uma única linha com display: inline-block;um leve preenchimento.

Lorem ipsum
Phasellus iaculis
Nulla volutpat

<ul class="list-inline">
  <li>...</li>
</ul>

Descrição

Uma lista de termos com suas descrições associadas.

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.

<dl>
  <dt>...</dt>
  <dd>...</dd>
</dl>

Descrição horizontal

Faça termos e descrições <dl>alinhados lado a lado. Começa empilhado como <dl>s padrão, mas quando a barra de navegação se expande, faça isso.

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.
Felis euismod sempre eget lacinia: Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

<dl class="dl-horizontal">
  <dt>...</dt>
  <dd>...</dd>
</dl>

Truncamento automático

As listas de descrição horizontal truncarão termos muito longos para caber na coluna da esquerda com text-overflow. Em viewports mais estreitas, eles mudarão para o layout empilhado padrão.

Em linha

Envolva trechos de código embutidos com <code>.

Por exemplo, <section>deve ser encapsulado como embutido.

For example, <code>&lt;section&gt;</code> should be wrapped as inline.

Entrada do usuário

Use o <kbd>para indicar a entrada que normalmente é inserida via teclado.

Para alternar diretórios, digite cdseguido do nome do diretório.
Para editar as configurações, pressione ctrl + ,

To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>

Bloco básico

Use <pre>para várias linhas de código. Certifique-se de escapar quaisquer colchetes angulares no código para renderização adequada.

<p>Exemplo de texto aqui...</p>

<pre>&lt;p&gt;Sample text here...&lt;/p&gt;</pre>

Opcionalmente, você pode adicionar a .pre-scrollableclasse, que definirá uma altura máxima de 350px e fornecerá uma barra de rolagem do eixo y.

Variáveis

Para indicar variáveis, use a <var>tag.

y = mx + b _

<var>y</var> = <var>m</var><var>x</var> + <var>b</var>

Saída de amostra

Para indicar a saída de amostra de blocos de um programa, use o <samp>tag.

Este texto deve ser tratado como saída de amostra de um programa de computador.

<samp>This text is meant to be treated as sample output from a computer program.</samp>

Exemplo básico

Para um estilo básico - preenchimento leve e apenas divisores horizontais - adicione a classe base .tablea qualquer arquivo <table>. Pode parecer super redundante, mas devido ao uso generalizado de tabelas para outros plugins como calendários e seletores de data, optamos por isolar nossos estilos de tabela personalizados.

Legenda de tabela opcional.
#	Primeiro nome	Sobrenome	Nome de usuário
1	Marca	Otto	@mdo
2	Jacó	Thornton	@gordo
3	Larry	o pássaro	@Twitter

<table class="table">
  ...
</table>

Linhas listradas

Use .table-stripedpara adicionar listras de zebra a qualquer linha da tabela dentro do arquivo <tbody>.

Compatibilidade entre navegadores

As tabelas distribuídas são estilizadas por meio do :nth-childseletor CSS, que não está disponível no Internet Explorer 8.

#	Primeiro nome	Sobrenome	Nome de usuário
1	Marca	Otto	@mdo
2	Jacó	Thornton	@gordo
3	Larry	o pássaro	@Twitter

<table class="table table-striped">
  ...
</table>

Tabela com bordas

Adicione .table-borderedpara bordas em todos os lados da tabela e células.

#	Primeiro nome	Sobrenome	Nome de usuário
1	Marca	Otto	@mdo
2	Jacó	Thornton	@gordo
3	Larry	o pássaro	@Twitter

<table class="table table-bordered">
  ...
</table>

Linhas ao passar o mouse

Adicione .table-hoverpara habilitar um estado de foco nas linhas da tabela em um arquivo <tbody>.

#	Primeiro nome	Sobrenome	Nome de usuário
1	Marca	Otto	@mdo
2	Jacó	Thornton	@gordo
3	Larry	o pássaro	@Twitter

<table class="table table-hover">
  ...
</table>

Tabela condensada

Adicione .table-condensedpara tornar as tabelas mais compactas cortando o preenchimento das células pela metade.

#	Primeiro nome	Sobrenome	Nome de usuário
1	Marca	Otto	@mdo
2	Jacó	Thornton	@gordo
3	Larry o pássaro		@Twitter

<table class="table table-condensed">
  ...
</table>

Classes contextuais

Use classes contextuais para colorir linhas da tabela ou células individuais.

Classe	Descrição
`.active`	Aplica a cor de foco a uma linha ou célula específica
`.success`	Indica uma ação bem-sucedida ou positiva
`.info`	Indica uma mudança ou ação informativa neutra
`.warning`	Indica um aviso que pode precisar de atenção
`.danger`	Indica uma ação perigosa ou potencialmente negativa

#	Título da coluna	Título da coluna	Título da coluna
1	Conteúdo da coluna	Conteúdo da coluna	Conteúdo da coluna
2	Conteúdo da coluna	Conteúdo da coluna	Conteúdo da coluna
3	Conteúdo da coluna	Conteúdo da coluna	Conteúdo da coluna
4	Conteúdo da coluna	Conteúdo da coluna	Conteúdo da coluna
5	Conteúdo da coluna	Conteúdo da coluna	Conteúdo da coluna
6	Conteúdo da coluna	Conteúdo da coluna	Conteúdo da coluna
7	Conteúdo da coluna	Conteúdo da coluna	Conteúdo da coluna
8	Conteúdo da coluna	Conteúdo da coluna	Conteúdo da coluna
9	Conteúdo da coluna	Conteúdo da coluna	Conteúdo da coluna

<!-- On rows -->
<tr class="active">...</tr>
<tr class="success">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>
<tr class="info">...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
  <td class="active">...</td>
  <td class="success">...</td>
  <td class="warning">...</td>
  <td class="danger">...</td>
  <td class="info">...</td>
</tr>

Transmitindo significado às tecnologias assistivas

Usar cores para adicionar significado a uma linha da tabela ou célula individual fornece apenas uma indicação visual, que não será transmitida aos usuários de tecnologias assistivas – como leitores de tela. Certifique-se de que as informações indicadas pela cor sejam óbvias no próprio conteúdo (o texto visível na linha/célula da tabela relevante) ou sejam incluídas por meios alternativos, como texto adicional oculto com a .sr-onlyclasse.

Tabelas responsivas

Crie tabelas responsivas envolvendo qualquer um .tablepara .table-responsivefazê-los rolar horizontalmente em dispositivos pequenos (abaixo de 768px). Ao visualizar em algo maior que 768px de largura, você não verá nenhuma diferença nessas tabelas.

Corte/truncamento vertical

As tabelas responsivas fazem uso de overflow-y: hidden, que corta qualquer conteúdo que vá além das bordas inferior ou superior da tabela. Em particular, isso pode cortar menus suspensos e outros widgets de terceiros.

Firefox e conjuntos de campos

O Firefox tem um estilo estranho de conjunto de campos widthque interfere na tabela responsiva. Isso não pode ser substituído sem um hack específico do Firefox que não fornecemos no Bootstrap:

@-moz-document url-prefix() {
  fieldset { display: table-cell; }
}

Para obter mais informações, leia esta resposta do Stack Overflow .

#	Título da tabela	Título da tabela	Título da tabela	Título da tabela	Título da tabela	Título da tabela
1	Célula da tabela	Célula da tabela	Célula da tabela	Célula da tabela	Célula da tabela	Célula da tabela
2	Célula da tabela	Célula da tabela	Célula da tabela	Célula da tabela	Célula da tabela	Célula da tabela
3	Célula da tabela	Célula da tabela	Célula da tabela	Célula da tabela	Célula da tabela	Célula da tabela

#	Título da tabela	Título da tabela	Título da tabela	Título da tabela	Título da tabela	Título da tabela
1	Célula da tabela	Célula da tabela	Célula da tabela	Célula da tabela	Célula da tabela	Célula da tabela
2	Célula da tabela	Célula da tabela	Célula da tabela	Célula da tabela	Célula da tabela	Célula da tabela
3	Célula da tabela	Célula da tabela	Célula da tabela	Célula da tabela	Célula da tabela	Célula da tabela

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

Exemplo básico

Os controles de formulário individuais recebem automaticamente algum estilo global. Todos os elementos textuais <input>, <textarea>e <select>com .form-controlsão definidos width: 100%;por padrão. Enrole etiquetas e controles .form-grouppara um espaçamento ideal.

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-group">
    <label for="exampleInputFile">File input</label>
    <input type="file" id="exampleInputFile">
    <p class="help-block">Example block-level help text here.</p>
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Check me out
    </label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

Não misture grupos de formulários com grupos de entrada

Não misture grupos de formulários diretamente com grupos de entrada . Em vez disso, aninhe o grupo de entrada dentro do grupo de formulários.

Formulário embutido

Adicione .form-inlineao seu formulário (que não precisa ser um <form>) para controles alinhados à esquerda e de bloco embutido. Isso se aplica apenas a formulários em viewports com pelo menos 768 pixels de largura.

Pode exigir larguras personalizadas

Entradas e seleções foram width: 100%;aplicadas por padrão no Bootstrap. Nos formulários embutidos, redefinimos isso para width: auto;que vários controles possam residir na mesma linha. Dependendo do seu layout, podem ser necessárias larguras personalizadas adicionais.

Sempre adicione marcadores

Os leitores de tela terão problemas com seus formulários se você não incluir um rótulo para cada entrada. Para esses formulários embutidos, você pode ocultar os rótulos usando a .sr-onlyclasse. Existem outros métodos alternativos de fornecer um rótulo para tecnologias assistivas, como o atributo aria-label, aria-labelledbyou . titleSe nenhum deles estiver presente, os leitores de tela podem recorrer ao uso do placeholderatributo, se presente, mas observe que o uso de placeholdercomo substituto de outros métodos de rotulagem não é recomendado.

<form class="form-inline">
  <div class="form-group">
    <label for="exampleInputName2">Name</label>
    <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
  </div>
  <div class="form-group">
    <label for="exampleInputEmail2">Email</label>
    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="[email protected]">
  </div>
  <button type="submit" class="btn btn-default">Send invitation</button>
</form>

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="exampleInputEmail3">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
  </div>
  <div class="form-group">
    <label class="sr-only" for="exampleInputPassword3">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Remember me
    </label>
  </div>
  <button type="submit" class="btn btn-default">Sign in</button>
</form>

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
    <div class="input-group">
      <div class="input-group-addon">$</div>
      <input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
      <div class="input-group-addon">.00</div>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Transfer cash</button>
</form>

Forma horizontal

Use as classes de grade predefinidas do Bootstrap para alinhar rótulos e grupos de controles de formulário em um layout horizontal adicionando .form-horizontalao formulário (que não precisa ser um <form>). Isso altera .form-groups para se comportar como linhas de grade, portanto, não há necessidade de .row.

<form class="form-horizontal">
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label>
          <input type="checkbox"> Remember me
        </label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">Sign in</button>
    </div>
  </div>
</form>

Controles compatíveis

Exemplos de controles de formulário padrão suportados em um layout de formulário de exemplo.

Entradas

Controle de formulário mais comum, campos de entrada baseados em texto. Inclui suporte para todos os tipos de HTML5: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tele color.

Declaração de tipo necessária

As entradas só serão totalmente estilizadas se typeforem declaradas corretamente.

<input type="text" class="form-control" placeholder="Text input">

Grupos de entrada

Para adicionar texto ou botões integrados antes e/ou depois de qualquer texto baseado <input>, confira o componente de grupo de entrada .

Área de texto

Controle de formulário que suporta várias linhas de texto. Altere rowso atributo conforme necessário.

<textarea class="form-control" rows="3"></textarea>

Caixas de seleção e rádios

As caixas de seleção são para selecionar uma ou várias opções em uma lista, enquanto os rádios são para selecionar uma opção entre muitas.

Caixas de seleção e rádios desativados são suportados, mas para fornecer um cursor "não permitido" ao passar o mouse sobre o pai<label> , você precisará adicionar a .disabledclasse ao pai .radio, .radio-inline, .checkboxou .checkbox-inline.

Padrão (empilhado)

<div class="checkbox">
  <label>
    <input type="checkbox" value="">
    Option one is this and that&mdash;be sure to include why it's great
  </label>
</div>
<div class="checkbox disabled">
  <label>
    <input type="checkbox" value="" disabled>
    Option two is disabled
  </label>
</div>

<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
    Option one is this and that&mdash;be sure to include why it's great
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
    Option two can be something else and selecting it will deselect option one
  </label>
</div>
<div class="radio disabled">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
    Option three is disabled
  </label>
</div>

Caixas de seleção e rádios em linha

Use as classes .checkbox-inlineou .radio-inlineem uma série de caixas de seleção ou rádios para controles que aparecem na mesma linha.

<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
</label>
<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox2" value="option2"> 2
</label>
<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox3" value="option3"> 3
</label>

<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
</label>
<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
</label>
<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3
</label>

Caixas de seleção e rádios sem texto de rótulo

Se você não tiver texto dentro do <label>, a entrada será posicionada conforme o esperado. Atualmente só funciona em caixas de seleção e rádios não-in-line. Lembre-se de ainda fornecer algum tipo de rótulo para tecnologias assistivas (por exemplo, usando aria-label).

<div class="checkbox">
  <label>
    <input type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="blankRadio" id="blankRadio1" value="option1" aria-label="...">
  </label>
</div>

Selecione% s

Observe que muitos menus de seleção nativos - principalmente no Safari e no Chrome - têm cantos arredondados que não podem ser modificados por meio de border-radiuspropriedades.

<select class="form-control">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

Para <select>controles com o multipleatributo, várias opções são mostradas por padrão.

<select multiple class="form-control">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

Controle estático

Quando você precisar colocar texto simples ao lado de um rótulo de formulário em um formulário, use a .form-control-staticclasse em um arquivo <p>.

<form class="form-horizontal">
  <div class="form-group">
    <label class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <p class="form-control-static">[email protected]</p>
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword" placeholder="Password">
    </div>
  </div>
</form>

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only">Email</label>
    <p class="form-control-static">[email protected]</p>
  </div>
  <div class="form-group">
    <label for="inputPassword2" class="sr-only">Password</label>
    <input type="password" class="form-control" id="inputPassword2" placeholder="Password">
  </div>
  <button type="submit" class="btn btn-default">Confirm identity</button>
</form>

Estado de foco

Removemos os outlineestilos padrão em alguns controles de formulário e aplicamos a box-shadowem seu lugar para :focus.

`:focus`Estado de demonstração

A entrada de exemplo acima usa estilos personalizados em nossa documentação para demonstrar o :focusestado em um arquivo .form-control.

Estado desativado

Adicione o disabledatributo booleano em uma entrada para evitar interações do usuário. As entradas desativadas aparecem mais claras e adicionam um not-allowedcursor.

<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>

Conjuntos de campos desativados

Adicione o disabledatributo a a <fieldset>para desabilitar todos os controles dentro <fieldset>de uma vez.

Advertência sobre a funcionalidade do link de`<a>`

Por padrão, os navegadores tratarão todos os controles de formulário nativos ( <input>, <select>e <button>elementos) dentro de <fieldset disabled>como desabilitados, impedindo interações de teclado e mouse neles. No entanto, se o seu formulário também incluir <a ... class="btn btn-*">elementos, eles receberão apenas um estilo de pointer-events: none. Conforme observado na seção sobre estado desabilitado para botões (e especificamente na subseção para elementos âncora), essa propriedade CSS ainda não é padronizada e não é totalmente suportada no Opera 18 e abaixo, ou no Internet Explorer 11, e ganhou não impede que usuários de teclado consigam focar ou ativar esses links. Portanto, por segurança, use JavaScript personalizado para desativar esses links.

Compatibilidade entre navegadores

Embora o Bootstrap aplique esses estilos em todos os navegadores, o Internet Explorer 11 e versões anteriores não oferecem suporte total ao disabledatributo em um arquivo <fieldset>. Use JavaScript personalizado para desativar o conjunto de campos nesses navegadores.

<form>
  <fieldset disabled>
    <div class="form-group">
      <label for="disabledTextInput">Disabled input</label>
      <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
    </div>
    <div class="form-group">
      <label for="disabledSelect">Disabled select menu</label>
      <select id="disabledSelect" class="form-control">
        <option>Disabled select</option>
      </select>
    </div>
    <div class="checkbox">
      <label>
        <input type="checkbox"> Can't check this
      </label>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </fieldset>
</form>

Estado somente leitura

Adicione o readonlyatributo booleano em uma entrada para evitar a modificação do valor da entrada. As entradas somente leitura parecem mais claras (assim como as entradas desabilitadas), mas mantêm o cursor padrão.

<input class="form-control" type="text" placeholder="Readonly input here…" readonly>

Texto de ajuda

Texto de ajuda em nível de bloco para controles de formulário.

Associando texto de ajuda a controles de formulário

O texto de ajuda deve ser explicitamente associado ao controle de formulário ao qual se relaciona usando o aria-describedbyatributo. Isso garantirá que as tecnologias assistivas – como leitores de tela – anunciem esse texto de ajuda quando o usuário focar ou entrar no controle.

<label class="sr-only" for="inputHelpBlock">Input with help text</label>
<input type="text" id="inputHelpBlock" class="form-control" aria-describedby="helpBlock">
...
<span id="helpBlock" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>

Estados de validação

Bootstrap inclui estilos de validação para estados de erro, aviso e sucesso em controles de formulário. Para usar, adicione .has-warning, .has-errorou .has-successao elemento pai. Qualquer .control-label, .form-controle .help-blockdentro desse elemento receberá os estilos de validação.

Transmissão do estado de validação para tecnologias assistivas e usuários daltônicos

O uso desses estilos de validação para denotar o estado de um controle de formulário fornece apenas uma indicação visual baseada em cores, que não será transmitida a usuários de tecnologias assistivas - como leitores de tela - ou a usuários daltônicos.

Certifique-se de que uma indicação alternativa de estado também seja fornecida. Por exemplo, você pode incluir uma dica sobre o estado no <label>próprio texto do controle de formulário (como é o caso no exemplo de código a seguir), incluir um Glyphicon (com texto alternativo apropriado usando a .sr-onlyclasse - veja os exemplos de Glyphicon ), ou fornecendo um bloco de texto de ajuda adicional . Especificamente para tecnologias assistivas, controles de formulário inválidos também podem receber um aria-invalid="true"atributo.

<div class="form-group has-success">
  <label class="control-label" for="inputSuccess1">Input with success</label>
  <input type="text" class="form-control" id="inputSuccess1" aria-describedby="helpBlock2">
  <span id="helpBlock2" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
</div>
<div class="form-group has-warning">
  <label class="control-label" for="inputWarning1">Input with warning</label>
  <input type="text" class="form-control" id="inputWarning1">
</div>
<div class="form-group has-error">
  <label class="control-label" for="inputError1">Input with error</label>
  <input type="text" class="form-control" id="inputError1">
</div>
<div class="has-success">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxSuccess" value="option1">
      Checkbox with success
    </label>
  </div>
</div>
<div class="has-warning">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxWarning" value="option1">
      Checkbox with warning
    </label>
  </div>
</div>
<div class="has-error">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxError" value="option1">
      Checkbox with error
    </label>
  </div>
</div>

Com ícones opcionais

Você também pode adicionar ícones de feedback opcionais com a adição de .has-feedbacke o ícone certo.

Os ícones de feedback só funcionam com <input class="form-control">elementos textuais.

Ícones, rótulos e grupos de entrada

O posicionamento manual dos ícones de feedback é necessário para entradas sem rótulo e para grupos de entrada com um complemento à direita. Você é fortemente encorajado a fornecer rótulos para todas as entradas por motivos de acessibilidade. Se você deseja impedir que os rótulos sejam exibidos, oculte-os com a .sr-onlyclasse. Se você precisar ficar sem rótulos, ajuste o topvalor do ícone de feedback. Para grupos de entrada, ajuste o rightvalor para um valor de pixel apropriado dependendo da largura do seu complemento.

Transmitindo o significado do ícone para tecnologias assistivas

Para garantir que as tecnologias assistivas – como leitores de tela – transmitam corretamente o significado de um ícone, o texto oculto adicional deve ser incluído na .sr-onlyclasse e explicitamente associado ao controle de formulário relacionado ao uso aria-describedby. Como alternativa, certifique-se de que o significado (por exemplo, o fato de haver um aviso para um campo de entrada de texto específico) seja transmitido de alguma outra forma, como alterar o texto do real <label>associado ao controle de formulário.

Embora os exemplos a seguir já mencionem o estado de validação de seus respectivos controles de formulário no <label>próprio texto, a técnica acima (usando .sr-onlytext e aria-describedby) foi incluída para fins ilustrativos.

<div class="form-group has-success has-feedback">
  <label class="control-label" for="inputSuccess2">Input with success</label>
  <input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status">
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputSuccess2Status" class="sr-only">(success)</span>
</div>
<div class="form-group has-warning has-feedback">
  <label class="control-label" for="inputWarning2">Input with warning</label>
  <input type="text" class="form-control" id="inputWarning2" aria-describedby="inputWarning2Status">
  <span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span>
  <span id="inputWarning2Status" class="sr-only">(warning)</span>
</div>
<div class="form-group has-error has-feedback">
  <label class="control-label" for="inputError2">Input with error</label>
  <input type="text" class="form-control" id="inputError2" aria-describedby="inputError2Status">
  <span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
  <span id="inputError2Status" class="sr-only">(error)</span>
</div>
<div class="form-group has-success has-feedback">
  <label class="control-label" for="inputGroupSuccess1">Input group with success</label>
  <div class="input-group">
    <span class="input-group-addon">@</span>
    <input type="text" class="form-control" id="inputGroupSuccess1" aria-describedby="inputGroupSuccess1Status">
  </div>
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputGroupSuccess1Status" class="sr-only">(success)</span>
</div>

Ícones opcionais em formulários horizontais e embutidos

<form class="form-horizontal">
  <div class="form-group has-success has-feedback">
    <label class="control-label col-sm-3" for="inputSuccess3">Input with success</label>
    <div class="col-sm-9">
      <input type="text" class="form-control" id="inputSuccess3" aria-describedby="inputSuccess3Status">
      <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
      <span id="inputSuccess3Status" class="sr-only">(success)</span>
    </div>
  </div>
  <div class="form-group has-success has-feedback">
    <label class="control-label col-sm-3" for="inputGroupSuccess2">Input group with success</label>
    <div class="col-sm-9">
      <div class="input-group">
        <span class="input-group-addon">@</span>
        <input type="text" class="form-control" id="inputGroupSuccess2" aria-describedby="inputGroupSuccess2Status">
      </div>
      <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
      <span id="inputGroupSuccess2Status" class="sr-only">(success)</span>
    </div>
  </div>
</form>

<form class="form-inline">
  <div class="form-group has-success has-feedback">
    <label class="control-label" for="inputSuccess4">Input with success</label>
    <input type="text" class="form-control" id="inputSuccess4" aria-describedby="inputSuccess4Status">
    <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
    <span id="inputSuccess4Status" class="sr-only">(success)</span>
  </div>
</form>
<form class="form-inline">
  <div class="form-group has-success has-feedback">
    <label class="control-label" for="inputGroupSuccess3">Input group with success</label>
    <div class="input-group">
      <span class="input-group-addon">@</span>
      <input type="text" class="form-control" id="inputGroupSuccess3" aria-describedby="inputGroupSuccess3Status">
    </div>
    <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
    <span id="inputGroupSuccess3Status" class="sr-only">(success)</span>
  </div>
</form>

Ícones opcionais com `.sr-only`rótulos ocultos

Se você usar a .sr-onlyclasse para ocultar um controle de formulário <label>(em vez de usar outras opções de rotulagem, como o aria-labelatributo), o Bootstrap ajustará automaticamente a posição do ícone assim que for adicionado.

<div class="form-group has-success has-feedback">
  <label class="control-label sr-only" for="inputSuccess5">Hidden label</label>
  <input type="text" class="form-control" id="inputSuccess5" aria-describedby="inputSuccess5Status">
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputSuccess5Status" class="sr-only">(success)</span>
</div>
<div class="form-group has-success has-feedback">
  <label class="control-label sr-only" for="inputGroupSuccess4">Input group with success</label>
  <div class="input-group">
    <span class="input-group-addon">@</span>
    <input type="text" class="form-control" id="inputGroupSuccess4" aria-describedby="inputGroupSuccess4Status">
  </div>
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputGroupSuccess4Status" class="sr-only">(success)</span>
</div>

Dimensionamento de controle

Defina alturas usando classes como .input-lg, e defina larguras usando classes de coluna de grade como .col-lg-*.

Dimensionamento de altura

Crie controles de formulário mais altos ou mais curtos que correspondam aos tamanhos dos botões.

<input class="form-control input-lg" type="text" placeholder=".input-lg">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control input-sm" type="text" placeholder=".input-sm">

<select class="form-control input-lg">...</select>
<select class="form-control">...</select>
<select class="form-control input-sm">...</select>

Tamanhos de grupos de formulários horizontais

Dimensione rapidamente rótulos e controles .form-horizontalde formulário adicionando .form-group-lgou .form-group-sm.

<form class="form-horizontal">
  <div class="form-group form-group-lg">
    <label class="col-sm-2 control-label" for="formGroupInputLarge">Large label</label>
    <div class="col-sm-10">
      <input class="form-control" type="text" id="formGroupInputLarge" placeholder="Large input">
    </div>
  </div>
  <div class="form-group form-group-sm">
    <label class="col-sm-2 control-label" for="formGroupInputSmall">Small label</label>
    <div class="col-sm-10">
      <input class="form-control" type="text" id="formGroupInputSmall" placeholder="Small input">
    </div>
  </div>
</form>

Dimensionamento da coluna

Envolva as entradas nas colunas da grade ou em qualquer elemento pai personalizado para impor facilmente as larguras desejadas.

<div class="row">
  <div class="col-xs-2">
    <input type="text" class="form-control" placeholder=".col-xs-2">
  </div>
  <div class="col-xs-3">
    <input type="text" class="form-control" placeholder=".col-xs-3">
  </div>
  <div class="col-xs-4">
    <input type="text" class="form-control" placeholder=".col-xs-4">
  </div>
</div>

Etiquetas de botão

Use as classes de botão em um elemento <a>, <button>ou <input>.

<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">

Uso específico do contexto

Embora as classes de botão possam ser usadas em elementos <a>e <button>, apenas <button>os elementos são suportados em nossos componentes nav e navbar.

Links que funcionam como botões

Se os <a>elementos forem usados para atuar como botões – acionando a funcionalidade na página, em vez de navegar para outro documento ou seção na página atual – eles também devem receber um arquivo role="button".

Renderização entre navegadores

Como prática recomendada, é altamente recomendável usar o <button>elemento sempre que possível para garantir a renderização correspondente em vários navegadores.

Entre outras coisas, há um bug no Firefox <30 que nos impede de configurar os botões baseados em line-heightof <input>, fazendo com que eles não correspondam exatamente à altura de outros botões no Firefox.

Opções

Use qualquer uma das classes de botão disponíveis para criar rapidamente um botão com estilo.

<!-- Standard button -->
<button type="button" class="btn btn-default">Default</button>

<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">Primary</button>

<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">Success</button>

<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">Info</button>

<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">Warning</button>

<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">Danger</button>

<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">Link</button>

Transmitindo significado às tecnologias assistivas

Usar cores para adicionar significado a um botão fornece apenas uma indicação visual, que não será transmitida aos usuários de tecnologias assistivas – como leitores de tela. Certifique-se de que as informações indicadas pela cor sejam óbvias no próprio conteúdo (o texto visível do botão) ou incluídas por meios alternativos, como texto adicional oculto com a .sr-onlyclasse.

Tamanhos

Gosta de botões maiores ou menores? Adicione .btn-lg, .btn-sm, ou .btn-xspara tamanhos adicionais.

<p>
  <button type="button" class="btn btn-primary btn-lg">Large button</button>
  <button type="button" class="btn btn-default btn-lg">Large button</button>
</p>
<p>
  <button type="button" class="btn btn-primary">Default button</button>
  <button type="button" class="btn btn-default">Default button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-sm">Small button</button>
  <button type="button" class="btn btn-default btn-sm">Small button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-xs">Extra small button</button>
  <button type="button" class="btn btn-default btn-xs">Extra small button</button>
</p>

Crie botões de nível de bloco — aqueles que abrangem toda a largura de um pai — adicionando .btn-block.

<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-default btn-lg btn-block">Block level button</button>

Estado ativo

Os botões aparecerão pressionados (com um fundo mais escuro, borda mais escura e sombra inserida) quando ativos. Para <button>elementos, isso é feito via :active. Para <a>elementos, é feito com .active. No entanto, você pode usar .activeon <button>s (e incluir o aria-pressed="true"atributo) caso precise replicar o estado ativo programaticamente.

Elemento de botão

Não há necessidade de adicionar :active, pois é uma pseudo-classe, mas se você precisar forçar a mesma aparência, vá em frente e adicione .active.

<button type="button" class="btn btn-primary btn-lg active">Primary button</button>
<button type="button" class="btn btn-default btn-lg active">Button</button>

Elemento âncora

Adicione a .activeclasse aos <a>botões.

Link principal Link

<a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg active" role="button">Link</a>

Estado desativado

Faça com que os botões pareçam inacessíveis ao esmaecê-los com opacity.

Elemento de botão

Adicione o disabledatributo aos <button>botões.

<button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button</button>
<button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button>

Compatibilidade entre navegadores

Se você adicionar o disabledatributo a um <button>, o Internet Explorer 9 e versões inferiores renderizarão o texto em cinza com uma sombra de texto desagradável que não podemos corrigir.

Elemento âncora

Adicione a .disabledclasse aos <a>botões.

Link principal Link

<a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg disabled" role="button">Link</a>

Usamos .disabledcomo uma classe utilitária aqui, semelhante à .activeclasse comum, portanto, nenhum prefixo é necessário.

Aviso de funcionalidade do link

Essa classe pointer-events: nonetenta desabilitar a funcionalidade de link de <a>s, mas essa propriedade CSS ainda não está padronizada e não é totalmente suportada no Opera 18 e abaixo, ou no Internet Explorer 11. Além disso, mesmo em navegadores que suportam pointer-events: none, teclado a navegação permanece inalterada, o que significa que usuários de teclado com visão e usuários de tecnologias assistivas ainda poderão ativar esses links. Portanto, por segurança, use JavaScript personalizado para desativar esses links.

Imagens responsivas

Imagens no Bootstrap 3 podem se tornar amigáveis com a adição da .img-responsiveclasse. Isso se aplica max-width: 100%;, height: auto;e display: block;à imagem para que ela seja dimensionada bem para o elemento pai.

Para centralizar imagens que usam a .img-responsiveclasse, use .center-blockem vez de .text-center. Consulte a seção de classes auxiliares para obter mais detalhes sobre .center-blocko uso.

Imagens SVG e IE 8-10

No Internet Explorer 8-10, as imagens SVG com .img-responsivetamanho desproporcional. Para corrigir isso, adicione width: 100% \9;onde necessário. O Bootstrap não aplica isso automaticamente, pois causa complicações em outros formatos de imagem.

<img src="..." class="img-responsive" alt="Responsive image">

Formas de imagem

Adicione classes a um <img>elemento para estilizar facilmente imagens em qualquer projeto.

Compatibilidade entre navegadores

Tenha em mente que o Internet Explorer 8 não tem suporte para cantos arredondados.

<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">

Cores contextuais

Transmita significado através da cor com um punhado de classes de utilidade de ênfase. Eles também podem ser aplicados a links e escurecerão ao passar o mouse, assim como nossos estilos de link padrão.

Fusce dapibus, tellus ac cursus comodo, tortor mauris nibh.

Nullam id dolor id nibh ultricies vehicula ut id elit.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

Mecenas sed diam eget risus varius blandit sit amet non magna.

Etiam porta sem maleuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

<p class="text-muted">...</p>
<p class="text-primary">...</p>
<p class="text-success">...</p>
<p class="text-info">...</p>
<p class="text-warning">...</p>
<p class="text-danger">...</p>

Lidando com a especificidade

Às vezes, as classes de ênfase não podem ser aplicadas devido à especificidade de outro seletor. Na maioria dos casos, uma solução alternativa suficiente é envolver seu texto em um <span>com a classe.

Transmitindo significado às tecnologias assistivas

Usar cores para adicionar significado fornece apenas uma indicação visual, que não será transmitida aos usuários de tecnologias assistivas – como leitores de tela. Certifique-se de que as informações indicadas pela cor sejam óbvias do próprio conteúdo (as cores contextuais são usadas apenas para reforçar o significado que já está presente no texto/marcação) ou são incluídas por meios alternativos, como texto adicional oculto com a .sr-onlyclasse .

Planos de fundo contextuais

Semelhante às classes de cores de texto contextuais, defina facilmente o plano de fundo de um elemento para qualquer classe contextual. Os componentes âncora escurecerão ao passar o mouse, assim como as classes de texto.

Nullam id dolor id nibh ultricies vehicula ut id elit.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

Mecenas sed diam eget risus varius blandit sit amet non magna.

Etiam porta sem maleuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

<p class="bg-primary">...</p>
<p class="bg-success">...</p>
<p class="bg-info">...</p>
<p class="bg-warning">...</p>
<p class="bg-danger">...</p>

Lidando com a especificidade

Às vezes, as classes contextuais de fundo não podem ser aplicadas devido à especificidade de outro seletor. Em alguns casos, uma solução alternativa suficiente é envolver o conteúdo do seu elemento em a <div>com a classe.

Transmitindo significado às tecnologias assistivas

Tal como acontece com as cores contextuais , certifique-se de que qualquer significado transmitido pela cor também seja transmitido em um formato que não seja puramente de apresentação.

Fechar ícone

Use o ícone de fechamento genérico para dispensar conteúdo como modais e alertas.

<button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>

Acentos circunflexos

Use acentos circunflexos para indicar a funcionalidade e a direção da lista suspensa. Observe que o cursor padrão será revertido automaticamente nos menus suspensos .

<span class="caret"></span>

Flutuações rápidas

Flutue um elemento para a esquerda ou direita com uma classe. !importantestá incluído para evitar problemas de especificidade. As classes também podem ser usadas como mixins.

<div class="pull-left">...</div>
<div class="pull-right">...</div>

// Classes
.pull-left {
  float: left !important;
}
.pull-right {
  float: right !important;
}

// Usage as mixins
.element {
  .pull-left();
}
.another-element {
  .pull-right();
}

Blocos de conteúdo central

Defina um elemento para display: blocke centralize via margin. Disponível como mixin e classe.

<div class="center-block">...</div>

// Class
.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

// Usage as a mixin
.element {
  .center-block();
}

Clearfix

Limpe s facilmente floatadicionando .clearfix ao elemento pai . Utiliza o micro clearfix popularizado por Nicolas Gallagher. Também pode ser usado como mixin.

<!-- Usage as a class -->
<div class="clearfix">...</div>

// Mixin itself
.clearfix() {
  &:before,
  &:after {
    content: " ";
    display: table;
  }
  &:after {
    clear: both;
  }
}

// Usage as a mixin
.element {
  .clearfix();
}

Mostrando e ocultando conteúdo

Forçar a exibição ou ocultação de um elemento ( inclusive para leitores de tela ) com o uso de .showe .hiddenclasses. Essas classes são usadas !importantpara evitar conflitos de especificidade, assim como os quick floats . Eles estão disponíveis apenas para alternância de nível de bloco. Eles também podem ser usados como mixins.

.hideestá disponível, mas nem sempre afeta os leitores de tela e está obsoleto a partir da v3.0.1. Use .hiddenou .sr-onlyem vez disso.

Além disso, .invisiblepode ser usado para alternar apenas a visibilidade de um elemento, ou seja, ele displaynão é modificado e o elemento ainda pode afetar o fluxo do documento.

<div class="show">...</div>
<div class="hidden">...</div>

// Classes
.show {
  display: block !important;
}
.hidden {
  display: none !important;
}
.invisible {
  visibility: hidden;
}

// Usage as mixins
.element {
  .show();
}
.another-element {
  .hidden();
}

Leitor de tela e conteúdo de navegação do teclado

Oculte um elemento para todos os dispositivos, exceto leitores de tela com extensão .sr-only. Combine .sr-onlycom .sr-only-focusablepara mostrar o elemento novamente quando estiver em foco (por exemplo, por um usuário apenas com teclado). Necessário para seguir as melhores práticas de acessibilidade . Também pode ser usado como mixins.

<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>

// Usage as a mixin
.skip-navigation {
  .sr-only();
  .sr-only-focusable();
}

Substituição de imagem

Utilize a .text-hideclasse ou mixin para ajudar a substituir o conteúdo de texto de um elemento por uma imagem de fundo.

<h1 class="text-hide">Custom heading</h1>

// Usage as a mixin
.heading {
  .text-hide();
}

Para um desenvolvimento mais rápido e otimizado para dispositivos móveis, use essas classes de utilitário para mostrar e ocultar conteúdo por dispositivo por meio de consulta de mídia. Também estão incluídas classes de utilitários para alternar o conteúdo quando impresso.

Tente usá-los de forma limitada e evite criar versões totalmente diferentes do mesmo site. Em vez disso, use-os para complementar a apresentação de cada dispositivo.

Aulas disponíveis

Use uma única ou uma combinação das classes disponíveis para alternar o conteúdo entre os pontos de interrupção da janela de visualização.

	Dispositivos extra pequenosTelefones (<768px)	Dispositivos pequenosTablets (≥768px)	Dispositivos médiosDesktops (≥992px)	Dispositivos grandesDesktops (≥1200px)
`.visible-xs-*`	Visível	Escondido	Escondido	Escondido
`.visible-sm-*`	Escondido	Visível	Escondido	Escondido
`.visible-md-*`	Escondido	Escondido	Visível	Escondido
`.visible-lg-*`	Escondido	Escondido	Escondido	Visível
`.hidden-xs`	Escondido	Visível	Visível	Visível
`.hidden-sm`	Visível	Escondido	Visível	Visível
`.hidden-md`	Visível	Visível	Escondido	Visível
`.hidden-lg`	Visível	Visível	Visível	Escondido

A partir da v3.2.0, as .visible-*-*classes para cada ponto de interrupção vêm em três variações, uma para cada displayvalor de propriedade CSS listado abaixo.

Grupo de aulas	CSS`display`
`.visible-*-block`	`display: block;`
`.visible-*-inline`	`display: inline;`
`.visible-*-inline-block`	`display: inline-block;`

xsAssim, para telas extra pequenas ( ), por exemplo, as .visible-*-*classes disponíveis são: .visible-xs-block, .visible-xs-inline, e .visible-xs-inline-block.

As classes .visible-xs, .visible-sm, .visible-mde .visible-lgtambém existem, mas estão obsoletas a partir da v3.2.0 . Eles são aproximadamente equivalentes a .visible-*-block, exceto com casos especiais adicionais para alternar <table>elementos relacionados.

Imprimir aulas

Semelhante às classes responsivas regulares, use-as para alternar o conteúdo para impressão.

Aulas	Navegador	Imprimir
`.visible-print-block` `.visible-print-inline` `.visible-print-inline-block`	Escondido	Visível
`.hidden-print`	Visível	Escondido

A classe .visible-printtambém existe, mas está obsoleta a partir da v3.2.0. É aproximadamente equivalente a .visible-print-block, exceto com casos especiais adicionais para <table>elementos relacionados.

Casos de teste

Redimensione seu navegador ou carregue em diferentes dispositivos para testar as classes de utilitários responsivos.

Visível em...

Marcas de seleção verdes indicam que o elemento está visível em sua viewport atual.

Muito pequeno ✔ Visível em x-small

Pequena ✔ Visível em pequenos

Médio ✔ Visível no meio

Grande ✔ Visível em grandes

Extra pequeno e pequeno ✔ Visível em x-small e small

Médio e grande ✔ Visível em médio e grande porte

Extra pequeno e médio ✔ Visível em x-pequeno e médio

Pequeno e grande ✔ Visível em pequenos e grandes

Extra pequeno e grande ✔ Visível em x-pequeno e grande

Pequeno e médio ✔ Visível em pequenas e médias

Escondido em...

Aqui, as marcas de seleção verdes também indicam que o elemento está oculto em sua viewport atual.

Muito pequeno ✔ Escondido em x-small

Pequena ✔ Escondido em pequenos

Médio ✔ Escondido no meio

Grande ✔ Escondido em grande

Extra pequeno e pequeno ✔ Escondido em x-small e small

Médio e grande ✔ Escondido em médio e grande

Extra pequeno e médio ✔ Hidden on x-small and medium

Small and large ✔ Escondido em pequenos e grandes

Extra small and large ✔ Escondido em x-pequeno e grande

Pequeno e médio ✔ Hidden on small and medium

O CSS do Bootstrap é construído em Less, um pré-processador com funcionalidades adicionais como variáveis, mixins e funções para compilar CSS. Aqueles que procuram usar os arquivos fonte Less em vez de nossos arquivos CSS compilados podem fazer uso das inúmeras variáveis e mixins que usamos em todo o framework.

Variáveis de grade e mixins são abordados na seção Sistema de grade .

Compilando Bootstrap

Bootstrap pode ser usado de pelo menos duas maneiras: com o CSS compilado ou com os arquivos fonte Less. Para compilar os arquivos Less, consulte a seção Getting Started para saber como configurar seu ambiente de desenvolvimento para executar os comandos necessários.

Ferramentas de compilação de terceiros podem funcionar com o Bootstrap, mas não são suportadas por nossa equipe principal.

Variáveis

As variáveis são usadas em todo o projeto como forma de centralizar e compartilhar valores comumente usados, como cores, espaçamento ou pilhas de fontes. Para um detalhamento completo, consulte o Personalizador .

Cores

Use facilmente dois esquemas de cores: tons de cinza e semânticos. As cores em tons de cinza fornecem acesso rápido a tons de preto comumente usados, enquanto a semântica inclui várias cores atribuídas a valores contextuais significativos.

@gray-darker:  lighten(#000, 13.5%); // #222
@gray-dark:    lighten(#000, 20%);   // #333
@gray:         lighten(#000, 33.5%); // #555
@gray-light:   lighten(#000, 46.7%); // #777
@gray-lighter: lighten(#000, 93.5%); // #eee

@brand-primary: darken(#428bca, 6.5%); // #337ab7
@brand-success: #5cb85c;
@brand-info:    #5bc0de;
@brand-warning: #f0ad4e;
@brand-danger:  #d9534f;

Use qualquer uma dessas variáveis de cor como estão ou reatribua-as a variáveis mais significativas para o seu projeto.

// Use as-is
.masthead {
  background-color: @brand-primary;
}

// Reassigned variables in Less
@alert-message-background: @brand-info;
.alert {
  background-color: @alert-message-background;
}

Andaimes

Um punhado de variáveis para personalizar rapidamente os principais elementos do esqueleto do seu site.

// Scaffolding
@body-bg:    #fff;
@text-color: @black-50;

Links

Estilize facilmente seus links com a cor certa com apenas um valor.

// Variables
@link-color:       @brand-primary;
@link-hover-color: darken(@link-color, 15%);

// Usage
a {
  color: @link-color;
  text-decoration: none;

  &:hover {
    color: @link-hover-color;
    text-decoration: underline;
  }
}

Observe que o @link-hover-colorusa uma função, outra ferramenta incrível do Less, para criar automaticamente a cor de foco correta. Você pode usar darken, lighten, saturatee desaturate.

Tipografia

Defina facilmente seu tipo de letra, tamanho do texto, entrelinha e muito mais com algumas variáveis rápidas. O Bootstrap também os utiliza para fornecer mixins tipográficos fáceis.

@font-family-sans-serif:  "Helvetica Neue", Helvetica, Arial, sans-serif;
@font-family-serif:       Georgia, "Times New Roman", Times, serif;
@font-family-monospace:   Menlo, Monaco, Consolas, "Courier New", monospace;
@font-family-base:        @font-family-sans-serif;

@font-size-base:          14px;
@font-size-large:         ceil((@font-size-base * 1.25)); // ~18px
@font-size-small:         ceil((@font-size-base * 0.85)); // ~12px

@font-size-h1:            floor((@font-size-base * 2.6)); // ~36px
@font-size-h2:            floor((@font-size-base * 2.15)); // ~30px
@font-size-h3:            ceil((@font-size-base * 1.7)); // ~24px
@font-size-h4:            ceil((@font-size-base * 1.25)); // ~18px
@font-size-h5:            @font-size-base;
@font-size-h6:            ceil((@font-size-base * 0.85)); // ~12px

@line-height-base:        1.428571429; // 20/14
@line-height-computed:    floor((@font-size-base * @line-height-base)); // ~20px

@headings-font-family:    inherit;
@headings-font-weight:    500;
@headings-line-height:    1.1;
@headings-color:          inherit;

Ícones

Duas variáveis rápidas para personalizar o local e o nome do arquivo de seus ícones.

@icon-font-path:          "../fonts/";
@icon-font-name:          "glyphicons-halflings-regular";

Componentes

Os componentes do Bootstrap usam algumas variáveis padrão para definir valores comuns. Aqui estão os mais usados.

@padding-base-vertical:          6px;
@padding-base-horizontal:        12px;

@padding-large-vertical:         10px;
@padding-large-horizontal:       16px;

@padding-small-vertical:         5px;
@padding-small-horizontal:       10px;

@padding-xs-vertical:            1px;
@padding-xs-horizontal:          5px;

@line-height-large:              1.33;
@line-height-small:              1.5;

@border-radius-base:             4px;
@border-radius-large:            6px;
@border-radius-small:            3px;

@component-active-color:         #fff;
@component-active-bg:            @brand-primary;

@caret-width-base:               4px;
@caret-width-large:              5px;

Misturas de fornecedores

Mixins de fornecedores são mixins para ajudar a suportar vários navegadores, incluindo todos os prefixos de fornecedores relevantes em seu CSS compilado.

Tamanho da caixa

Redefina o modelo da caixa de seus componentes com um único mixin. Para contextualizar, veja este artigo útil da Mozilla .

O mixin está obsoleto a partir da v3.2.0, com a introdução do Autoprefixer. Para preservar a compatibilidade com versões anteriores, o Bootstrap continuará a usar o mixin internamente até o Bootstrap v4.

.box-sizing(@box-model) {
  -webkit-box-sizing: @box-model; // Safari <= 5
     -moz-box-sizing: @box-model; // Firefox <= 19
          box-sizing: @box-model;
}

Cantos arredondados

Hoje todos os navegadores modernos suportam a border-radiuspropriedade não prefixada. Como tal, não há .border-radius()mixin, mas o Bootstrap inclui atalhos para arredondar rapidamente dois cantos em um lado específico de um objeto.

.border-top-radius(@radius) {
  border-top-right-radius: @radius;
   border-top-left-radius: @radius;
}
.border-right-radius(@radius) {
  border-bottom-right-radius: @radius;
     border-top-right-radius: @radius;
}
.border-bottom-radius(@radius) {
  border-bottom-right-radius: @radius;
   border-bottom-left-radius: @radius;
}
.border-left-radius(@radius) {
  border-bottom-left-radius: @radius;
     border-top-left-radius: @radius;
}

Sombras de caixa (soltar)

Se o seu público-alvo estiver usando os melhores e mais recentes navegadores e dispositivos, certifique-se de usar a box-shadowpropriedade por conta própria. Se você precisar de suporte para dispositivos Android mais antigos (pré-v4) e iOS (pré-iOS 5), use o mixin obsoleto para pegar o -webkitprefixo necessário.

O mixin está obsoleto a partir da v3.1.0, pois o Bootstrap não suporta oficialmente as plataformas desatualizadas que não suportam a propriedade padrão. Para preservar a compatibilidade com versões anteriores, o Bootstrap continuará a usar o mixin internamente até o Bootstrap v4.

Certifique-se de usar rgba()cores nas sombras da caixa para que elas se misturem o mais perfeitamente possível com os fundos.

.box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) {
  -webkit-box-shadow: @shadow; // iOS <4.3 & Android <4.1
          box-shadow: @shadow;
}

Transições

Múltiplos mixins para flexibilidade. Defina todas as informações de transição com uma ou especifique um atraso e duração separados conforme necessário.

Os mixins estão obsoletos a partir da v3.2.0, com a introdução do Autoprefixer. Para preservar a compatibilidade com versões anteriores, o Bootstrap continuará a usar os mixins internamente até o Bootstrap v4.

.transition(@transition) {
  -webkit-transition: @transition;
          transition: @transition;
}
.transition-property(@transition-property) {
  -webkit-transition-property: @transition-property;
          transition-property: @transition-property;
}
.transition-delay(@transition-delay) {
  -webkit-transition-delay: @transition-delay;
          transition-delay: @transition-delay;
}
.transition-duration(@transition-duration) {
  -webkit-transition-duration: @transition-duration;
          transition-duration: @transition-duration;
}
.transition-timing-function(@timing-function) {
  -webkit-transition-timing-function: @timing-function;
          transition-timing-function: @timing-function;
}
.transition-transform(@transition) {
  -webkit-transition: -webkit-transform @transition;
     -moz-transition: -moz-transform @transition;
       -o-transition: -o-transform @transition;
          transition: transform @transition;
}

Transformações

Girar, dimensionar, traduzir (mover) ou inclinar qualquer objeto.

.rotate(@degrees) {
  -webkit-transform: rotate(@degrees);
      -ms-transform: rotate(@degrees); // IE9 only
          transform: rotate(@degrees);
}
.scale(@ratio; @ratio-y...) {
  -webkit-transform: scale(@ratio, @ratio-y);
      -ms-transform: scale(@ratio, @ratio-y); // IE9 only
          transform: scale(@ratio, @ratio-y);
}
.translate(@x; @y) {
  -webkit-transform: translate(@x, @y);
      -ms-transform: translate(@x, @y); // IE9 only
          transform: translate(@x, @y);
}
.skew(@x; @y) {
  -webkit-transform: skew(@x, @y);
      -ms-transform: skewX(@x) skewY(@y); // See https://github.com/twbs/bootstrap/issues/4885; IE9+
          transform: skew(@x, @y);
}
.translate3d(@x; @y; @z) {
  -webkit-transform: translate3d(@x, @y, @z);
          transform: translate3d(@x, @y, @z);
}

.rotateX(@degrees) {
  -webkit-transform: rotateX(@degrees);
      -ms-transform: rotateX(@degrees); // IE9 only
          transform: rotateX(@degrees);
}
.rotateY(@degrees) {
  -webkit-transform: rotateY(@degrees);
      -ms-transform: rotateY(@degrees); // IE9 only
          transform: rotateY(@degrees);
}
.perspective(@perspective) {
  -webkit-perspective: @perspective;
     -moz-perspective: @perspective;
          perspective: @perspective;
}
.perspective-origin(@perspective) {
  -webkit-perspective-origin: @perspective;
     -moz-perspective-origin: @perspective;
          perspective-origin: @perspective;
}
.transform-origin(@origin) {
  -webkit-transform-origin: @origin;
     -moz-transform-origin: @origin;
      -ms-transform-origin: @origin; // IE9 only
          transform-origin: @origin;
}

Animações

Um único mixin para usar todas as propriedades de animação do CSS3 em uma declaração e outros mixins para propriedades individuais.

.animation(@animation) {
  -webkit-animation: @animation;
          animation: @animation;
}
.animation-name(@name) {
  -webkit-animation-name: @name;
          animation-name: @name;
}
.animation-duration(@duration) {
  -webkit-animation-duration: @duration;
          animation-duration: @duration;
}
.animation-timing-function(@timing-function) {
  -webkit-animation-timing-function: @timing-function;
          animation-timing-function: @timing-function;
}
.animation-delay(@delay) {
  -webkit-animation-delay: @delay;
          animation-delay: @delay;
}
.animation-iteration-count(@iteration-count) {
  -webkit-animation-iteration-count: @iteration-count;
          animation-iteration-count: @iteration-count;
}
.animation-direction(@direction) {
  -webkit-animation-direction: @direction;
          animation-direction: @direction;
}

Opacidade

Defina a opacidade para todos os navegadores e forneça um filtersubstituto para o IE8.

.opacity(@opacity) {
  opacity: @opacity;
  // IE8 filter
  @opacity-ie: (@opacity * 100);
  filter: ~"alpha(opacity=@{opacity-ie})";
}

Texto do espaço reservado

Forneça contexto para controles de formulário em cada campo.

.placeholder(@color: @input-color-placeholder) {
  &::-moz-placeholder           { color: @color; } // Firefox
  &:-ms-input-placeholder       { color: @color; } // Internet Explorer 10+
  &::-webkit-input-placeholder  { color: @color; } // Safari and Chrome
}

Colunas

Gere colunas via CSS em um único elemento.

.content-columns(@width; @count; @gap) {
  -webkit-column-width: @width;
     -moz-column-width: @width;
          column-width: @width;
  -webkit-column-count: @count;
     -moz-column-count: @count;
          column-count: @count;
  -webkit-column-gap: @gap;
     -moz-column-gap: @gap;
          column-gap: @gap;
}

Gradientes

Transforme facilmente quaisquer duas cores em um gradiente de fundo. Fique mais avançado e defina uma direção, use três cores ou use um gradiente radial. Com um único mixin, você obtém todas as sintaxes prefixadas necessárias.

#gradient > .vertical(#333; #000);
#gradient > .horizontal(#333; #000);
#gradient > .radial(#333; #000);

Você também pode especificar o ângulo de um gradiente linear padrão de duas cores:

#gradient > .directional(#333; #000; 45deg);

Se você precisa de um gradiente de estilo barbeiro, isso também é fácil. Basta especificar uma única cor e sobreporemos uma faixa branca translúcida.

#gradient > .striped(#333; 45deg);

Aumente a aposta e use três cores em vez disso. Defina a primeira cor, a segunda cor, o limite de cor da segunda cor (um valor percentual como 25%) e a terceira cor com estes mixins:

#gradient > .vertical-three-colors(#777; #333; 25%; #000);
#gradient > .horizontal-three-colors(#777; #333; 25%; #000);

Atenção! Se você precisar remover um gradiente, certifique-se de remover qualquer específico do IE filterque possa ter adicionado. Você pode fazer isso usando o .reset-filter()mixin ao lado background-image: none;de .

Mixins utilitários

Mixins utilitários são mixins que combinam propriedades CSS não relacionadas para atingir um objetivo ou tarefa específica.

Clearfix

Esqueça a adição class="clearfix"de qualquer elemento e, em vez disso, adicione o .clearfix()mixin quando apropriado. Usa o micro clearfix de Nicolas Gallagher .

// Mixin
.clearfix() {
  &:before,
  &:after {
    content: " ";
    display: table;
  }
  &:after {
    clear: both;
  }
}

// Usage
.container {
  .clearfix();
}

Centralização horizontal

Centralize rapidamente qualquer elemento dentro de seu pai. Requer widthou max-widtha ser definido.

// Mixin
.center-block() {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

// Usage
.container {
  width: 940px;
  .center-block();
}

Auxiliares de dimensionamento

Especifique as dimensões de um objeto com mais facilidade.

// Mixins
.size(@width; @height) {
  width: @width;
  height: @height;
}
.square(@size) {
  .size(@size; @size);
}

// Usage
.image { .size(400px; 300px); }
.avatar { .square(48px); }

Áreas de texto redimensionáveis

Configure facilmente as opções de redimensionamento para qualquer área de texto ou qualquer outro elemento. Padrões para o comportamento normal do navegador ( both).

.resizable(@direction: both) {
  // Options: horizontal, vertical, both
  resize: @direction;
  // Safari fix
  overflow: auto;
}

Truncando texto

Trunque facilmente o texto com reticências com um único mixin. Requer que o elemento seja blockou inline-blocknível.

// Mixin
.text-overflow() {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

// Usage
.branch-name {
  display: inline-block;
  max-width: 200px;
  .text-overflow();
}

Imagens de retina

Especifique dois caminhos de imagem e as dimensões de imagem @1x e o Bootstrap fornecerá uma consulta de mídia @2x. Se você tiver muitas imagens para servir, considere escrever manualmente o CSS da imagem retina em uma única consulta de mídia.

.img-retina(@file-1x; @file-2x; @width-1x; @height-1x) {
  background-image: url("@{file-1x}");

  @media
  only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (   min--moz-device-pixel-ratio: 2),
  only screen and (     -o-min-device-pixel-ratio: 2/1),
  only screen and (        min-device-pixel-ratio: 2),
  only screen and (                min-resolution: 192dpi),
  only screen and (                min-resolution: 2dppx) {
    background-image: url("@{file-2x}");
    background-size: @width-1x @height-1x;
  }
}

// Usage
.jumbotron {
  .img-retina("/img/bg-1x.png", "/img/bg-2x.png", 100px, 100px);
}

Embora o Bootstrap seja construído em Less, ele também possui uma porta oficial Sass . Nós o mantemos em um repositório GitHub separado e lidamos com atualizações com um script de conversão.

O que está incluído

Como o port Sass tem um repositório separado e atende a um público um pouco diferente, o conteúdo do projeto difere muito do projeto principal do Bootstrap. Isso garante que a porta Sass seja compatível com o maior número possível de sistemas baseados em Sass.

Caminho	Descrição
`lib/`	Código gem Ruby (configuração Sass, integrações Rails e Compass)
`tasks/`	Scripts de conversão (transformando menos para Sass upstream)
`test/`	Testes de compilação
`templates/`	Manifesto do pacote da bússola
`vendor/assets/`	Sass, JavaScript e arquivos de fonte
`Rakefile`	Tarefas internas, como rake e converter

Visite o repositório GitHub da porta Sass para ver esses arquivos em ação.

Instalação

Para obter informações sobre como instalar e usar o Bootstrap for Sass, consulte o leia-me do repositório GitHub . É a fonte mais atualizada e inclui informações para uso com Rails, Compass e projetos Sass padrão.

Bootstrap para Sass

CSS

Visão geral

Tipo de documento HTML5

Primeiro celular

Tipografia e links

Normalize.css

Recipientes

Sistema de rede

Introdução

Consultas de mídia

Opções de grade

Exemplo: empilhado para horizontal

Exemplo: recipiente de fluido

Exemplo: celular e desktop

Exemplo: celular, tablet, desktop

Exemplo: quebra de coluna

Redefinições de coluna responsivas

Colunas de compensação

Colunas de aninhamento

Ordenação das colunas

Menos mixins e variáveis

Variáveis

Mixins

Exemplo de uso

Tipografia

Títulos

h1. Título de inicialização

h2. Título de inicialização

h3. Título de inicialização

h4. Título de inicialização

h5. Título de inicialização

h6. Título de inicialização

h1. Cabeçalho de bootstrap Texto secundário

h2. Cabeçalho de bootstrap Texto secundário

h3. Cabeçalho de bootstrap Texto secundário

h4. Cabeçalho de bootstrap Texto secundário

h5. Cabeçalho de bootstrap Texto secundário

h6. Cabeçalho de bootstrap Texto secundário

Cópia do corpo

Cópia do corpo do lead

Construído com menos

Elementos de texto embutidos

Texto marcado

Texto excluído

Texto tachado

Texto inserido

Texto sublinhado

Texto pequeno

Audacioso

Itálico

Elementos alternativos

Aulas de alinhamento

Aulas de transformação

Abreviaturas

Abreviação básica

Inicialismo

Endereços

Citações em bloco

Citação de bloco padrão

Opções de citação em bloco

Nomeando uma fonte

Exibições alternativas

Listas

Não ordenado

Encomendado

Sem estilo

Em linha

Descrição

Descrição horizontal

Truncamento automático

Código

Em linha

Entrada do usuário

Bloco básico

Variáveis

Saída de amostra

Tabelas

Exemplo básico

Linhas listradas

Compatibilidade entre navegadores

`:focus`Estado de demonstração

Advertência sobre a funcionalidade do link de`<a>`

Ícones opcionais com `.sr-only`rótulos ocultos