Texto
Adicionar significado através de texto-cores com as classes listadas abaixo. Ligações vai escurecer em foco:
| Classe | Descrição | Exemplo |
|---|---|---|
| .text-muted | Texto com estilo com a classe "text-muted" | Tente |
| .text-primary | Texto com estilo com a classe "text-primary" | Tente |
| .text-success | Texto com estilo com a classe "text-success" | Tente |
| .text-info | Texto com estilo com a classe "text-info" | Tente |
| .text-warning | Texto com estilo com a classe "text-warning" | Tente |
| .text-danger | Texto com estilo com a classe "text-danger" | Tente |
fundo
Adicionar significado através dos fundo-cores com as classes listadas abaixo. Ligações vai escurecer em foco, assim como classes de texto:
| Classe | Descrição | Exemplo |
|---|---|---|
| .bg-primary | Célula da tabela é denominada com classe "bg-primary" | Tente |
| .bg-success | Célula da tabela é denominada com classe "bg-success" | Tente |
| .bg-info | Célula da tabela é denominada com classe "bg-info" | Tente |
| .bg-warning | Célula da tabela é denominada com classe "bg-warning" | Tente |
| .bg-danger | Célula da tabela é denominada com classe "bg-danger" | Tente |
De outros
| Classe | Descrição | Exemplo |
|---|---|---|
| .pull-left | Flutua um elemento para a esquerda | Tente |
| .pull-right | Flutua um elemento para a direita | Tente |
| .center-block | Define um elemento para display:block com margin-right:auto e margin-left:auto | Tente |
| .clearfix | limpa flutuadores | Tente |
| .show | Força um elemento a ser mostrado | Tente |
| .hidden | Força um elemento a ser escondido | Tente |
| .sr-only | Esconde um elemento para todos os dispositivos, exceto os leitores de tela | Tente |
| .sr-only-focusable | Combine com .sr somente para mostrar o elemento novamente quando se está focado (por exemplo, um usuário somente teclado) | Tente |
| .text-hide | Ajuda a substituir o conteúdo de texto de um elemento uma imagem de fundo | Tente |
| .close | Indica um ícone próximo | Tente |
| .caret | Indica funcionalidade suspensa (reverterá automaticamente no menus dropup) | Tente |
Utilities Responsive
Essas classes são usados para mostrar e / ou ocultar o conteúdo pelo dispositivo via consultas de mídia.
Use um ou uma combinação das classes disponíveis para alternar conteúdo através viewport pontos de interrupção:
| Classes | Extra pequenos dispositivos Telefones (<768px) | Dispositivos Tablets pequenas (≥768px) | Dispositivos Desktops médios (≥992px) | Desktops dispositivos grandes (≥1200px) |
|---|---|---|---|---|
| .visible-xs-* | Visible | Hidden | Hidden | Hidden |
| .visible-sm-* | Hidden | Visible | Hidden | Hidden |
| .visible-md-* | Hidden | Hidden | Visible | Hidden |
| .visible-lg-* | Hidden | Hidden | Hidden | Visible |
| .hidden-xs | Hidden | Visible | Visible | Visible |
| .hidden-sm | Visible | Hidden | Visible | Visible |
| .hidden-md | Visible | Visible | Hidden | Visible |
| .hidden-lg | Visible | Visible | Visible | Hidden |
Como de v3.2.0 , o .visible-*-* classes para vêm em três variações, uma para cada CSS display valor da propriedade:
| Grupo de aulas | exibição CSS |
|---|---|
| visible-*-block | display: block; |
| .visible-*-inline | display: inline; |
| .visible-*-inline-block | display: inline-block; |
Por exemplo, para as pequenas ( sm telas), o disponível .visible-*-* classes são: .visible-sm-block , .visible-sm-inline , e .visible-sm-inline-block .
As classes .visible-xs , .visible-sm , .visible-md e .visible-lg está obsoleto a partir do v3.2.0.
Exemplo
<h2>Example</h2>
<p>Resize this page to see how the text below
changes:</p>
<h1 class="visible-xs">This text is shown only on an EXTRA
SMALL screen.</h1>
<h1 class="visible-sm">This text is shown only on a
SMALL screen.</h1>
<h1 class="visible-md">This text is shown only on a
MEDIUM screen.</h1>
<h1 class="visible-lg">This text is shown only on a
LARGE screen.</h1>Resultado:
Example
Resize this page to see how the text below changes:
This text is shown only on an EXTRA SMALL screen.
This text is shown only on a SMALL screen.
This text is shown only on a MEDIUM screen.
This text is shown only on a LARGE screen.
Tente você mesmo "