Bootstrap Utilities Responsive
Bootstrap fornece algumas classes auxiliares, a fim de alcançar o desenvolvimento para dispositivos móveis amigável mais rápidos. Essas consultas podem combinar equipamentos de grande porte, as pequenas e médias empresas através da mídia, para perceber o conteúdo do dispositivo para mostrar e esconder.
Usando essas ferramentas têm de ter o cuidado de evitar a criação de um versões completamente diferentes do mesmo site.utilitário Responsive é atualmente disponível apenas em blocos e comutação de mesa.
| tela ultra-pequenas Telefone (<768px) | Pequeno ecrã Tablet (≥768px) | tela médio Área de trabalho (≥992px) | A tela grande Área de trabalho (≥1200px) | |
|---|---|---|---|---|
| .Visible-XS- * | visível | esconder | esconder | esconder |
| .Visible-SM * | esconder | visível | esconder | esconder |
| .Visible-Md- * | esconder | esconder | visível | esconder |
| .Visible-lg- * | esconder | esconder | esconder | visível |
| .hidden-xs | esconder | visível | visível | visível |
| .hidden-sm | visível | esconder | visível | visível |
| .hidden-md | visível | visível | esconder | visível |
| .hidden-lg | visível | visível | visível | esconder |
De liberação v3.2.0, em forma de .Visible - * - * tamanho da classe para cada tela tem três variantes, cada um para uma lista diferente propriedade de exibição CSS é a seguinte:
| Clusters | exibição CSS |
|---|---|
| .Visible - * - bloco | display: block; |
| .Visible - * - em linha | display: inline; |
| .Visible - * - inline-block | display: inline-block; |
Portanto, a tela ultra-pequeno (xs), por exemplo, .Visible disponível - * - * classes são: .Visible-xs-block, .Visible-xs-inline e .Visible-XS-inline-bloco.
.Visible-xs, .Visible-SM, .Visible-MD e aulas .Visible-lg também existem. Mas a partir da versão v3.2.0 começando não é mais recomendado. Em casos especiais <table> elementos relacionados para o exterior, eles .Visible - * - bloco mesma.
categoria de impressão
A tabela a seguir lista a categoria de impressão. Use-os para mudar o conteúdo de impressão.
| classe | navegador | impressora |
|---|---|---|
| .Visible-print-bloco .Visible-print-inline .Visible-print-inline-block | esconder | visível |
| .hidden-print | visível | esconder |
Exemplos
O exemplo a seguir demonstra o uso listadas acima classe auxiliar. Ajuste o tamanho da janela do navegador, ou carregar instâncias em diferentes dispositivos, teste de classe de utilitário ágil.
Exemplos
tente »
Os resultados são os seguintes:
Checkmark (✔) indica que o elemento é visível na janela de visualização atual.