Bootstrap Utilità Responsive
Bootstrap fornisce alcune classi helper, al fine di realizzare lo sviluppo per i dispositivi mobili ai più veloci. Queste query possono combinare apparecchiature grandi, piccole e medie imprese attraverso i media, per realizzare i contenuti del dispositivo per mostrare e nascondere.
L'utilizzo di questi strumenti devono fare attenzione per evitare di creare un completamente diverse versioni dello stesso sito.utility Responsive è attualmente disponibile solo in blocchi e commutazione tavolo.
| Ultra-piccolo schermo Telefono (<768px) | schermo piccolo Tablet (≥768px) | schermo medio Desktop (≥992px) | Il grande schermo Desktop (≥1200px) | |
|---|---|---|---|---|
| .Visible-XS- * | visibile | nascondere | nascondere | nascondere |
| .Visible-SM- * | nascondere | visibile | nascondere | nascondere |
| .Visible-MD- * | nascondere | nascondere | visibile | nascondere |
| .Visible-LG-* | nascondere | nascondere | nascondere | visibile |
| .hidden-XS | nascondere | visibile | visibile | visibile |
| .hidden-sm | visibile | nascondere | visibile | visibile |
| .hidden-MD | visibile | visibile | nascondere | visibile |
| .hidden-lg | visibile | visibile | visibile | nascondere |
Dalla release v3.2.0, a forma di .Visible - * - * dimensione della classe per ogni schermo ha tre varianti, ognuna per un diverso elenco delle proprietà CSS display è la seguente:
| cluster | CSS display |
|---|---|
| .Visible - * - blocco | display: block; |
| .Visible - * - in linea | display: inline; |
| .Visible - * - inline-block | display: inline-block; |
Pertanto, l'ultra-piccolo schermo (XS), per esempio, disponibili .Visible - * - * classi sono: .Visible-XS-block, .Visible-XS-linea e .Visible-XS-inline-block.
Esistono anche .Visible-XS, .Visible-SM, .Visible-MD e classi .Visible-lg. Ma dalla versione v3.2.0 inizio non è raccomandato. In casi particolari <table> elementi legati al di fuori, si .Visible - * - blocco stesso.
categoria Stampa
La seguente tabella elenca la categoria di stampa. Utilizzare questi per cambiare i contenuti di stampa.
| classe | Browser | stampante |
|---|---|---|
| .Visible-print-block .Visible-print-linea .Visible-print-inline-block | nascondere | visibile |
| .hidden-stampa | visibile | nascondere |
Esempi
L'esempio seguente mostra l'utilizzo sopra elencati classe di supporto. Regolare la dimensione della finestra del browser, oppure caricare le istanze su diversi dispositivi, prova reattivo classe di utilità.
Esempi
Prova »
I risultati sono i seguenti:
Segno di spunta (✔) indica che l'elemento è visibile nella finestra corrente.