Bootstrap - classes auxiliares
Este capítulo discute algumas das classes auxiliares no Bootstrap que podem ser úteis.
Fechar ícone
Use o ícone de fechamento genérico para descartar conteúdo como modais e alertas. Use a classeclose para obter o ícone de fechamento.
<p>Close Icon Example
<button type = "button" class = "close" aria-hidden = "true">
×
</button>
</p>
Carets
Use circunflexos para indicar a funcionalidade e direção da lista suspensa. Para obter essa funcionalidade, use a classecaret com um elemento <span>.
<p>Caret Example<span class = "caret"></span></p>
Flutuadores rápidos
Você pode flutuar um elemento para a esquerda ou direita com a classe pull-left ou pull-right respectivamente, o exemplo a seguir demonstra isso.
<div class = "pull-left">Quick Float to left</div>
<div class = "pull-right">Quick Float to right</div>
Para alinhar componentes em navbars com classes utilitárias, use .navbar-left ou .navbar-rightem vez de. Consulte o capítulo da barra de navegação para obter detalhes.
Centralizar blocos de conteúdo
Usar aula center-block para definir um elemento para o centro.
<div class = "row">
<div class = "center-block" style = "width:200px; background-color:#ccc;">
This is an example for center-block
</div>
</div>
Clearfix
Para limpar a flutuação de qualquer elemento, use o .clearfix classe.
<div class = "clearfix" style = "background: #D8D8D8;border: 1px solid #000; padding: 10px;">
<div class = "pull-left" style = "background:#58D3F7;">
Quick Float to left
</div>
<div class = "pull-right" style = "background: #DA81F5;">
Quick Float to right
</div>
</div>
Mostrando e ocultando conteúdo
Você pode forçar a exibição ou ocultação de um elemento (inclusive para leitores de tela) com o uso de classes .show e .hidden.
<div class = "row" style = "padding: 91px 100px 19px 50px;">
<div class = "show" style = "left-margin:10px; width:300px; background-color:#ccc;">
This is an example for show class
</div>
<div class = "hidden" style = "width:200px; background-color:#ccc;">
This is an example for hide class
</div>
</div>
Conteúdo do leitor de tela
Você pode ocultar um elemento para todos os dispositivos, exceto leitores de tela com a classe .sr-only.
<div class = "row" style = "padding: 91px 100px 19px 50px;">
<form class = "form-inline" role = "form">
<div class = "form-group">
<label class = "sr-only" for = "email">Email address</label>
<input type = "email" class = "form-control" placeholder = "Enter email">
</div>
<div class = "form-group">
<label class = "sr-only" for = "pass">Password</label>
<input type = "password" class = "form-control" placeholder = "Password">
</div>
</form>
</div>
Aqui podemos ver que o rótulo de ambos os tipos de entrada é atribuído à classe sr-only, portanto, os rótulos ficarão visíveis apenas para leitores de tela.