English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Bootstrap fornisce alcune classi di assistenza per accelerare lo sviluppo compatibile con dispositivi mobili. Queste possono essere combinate con query media per dispositivi grandi, piccoli e medi per mostrare o nascondere il contenuto in base al dispositivo.
Utilizzare questi strumenti con cautela per evitare di creare versioni completamente diverse dello stesso sito.Gli strumenti responsive sono al momento applicabili solo ai toggle di blocco e tabella.
| Schermo ultr-piccolo Telefono (<768px) | Schermo piccolo Tablet (≥768px) | Schermo medio Desktop (≥992px) | Schermo grande Desktop (≥1200px) | |
|---|---|---|---|---|
| .visible-xs-* | Visibile | Nascosto | Nascosto | Nascosto |
| .visible-sm-* | Nascosto | Visibile | Nascosto | Nascosto |
| .visible-md-* | Nascosto | Nascosto | Visibile | Nascosto |
| .visible-lg-* | Nascosto | Nascosto | Nascosto | Visibile |
| .hidden-xs | Nascosto | Visibile | Visibile | Visibile |
| .hidden-sm | Visibile | Nascosto | Visibile | Visibile |
| .hidden-md | Visibile | Visibile | Nascosto | Visibile |
| .hidden-lg | Visibile | Visibile | Visibile | Nascosto |
Dalla versione 3.2.0, le classi di forma .visible-*-* sono disponibili per ogni dimensione dello schermo in tre varianti, ciascuna per un diverso display property in CSS, elencate di seguito:
| Gruppi di classi | CSS display |
|---|---|
| .visible-*-block | display: block; |
| .visible-*-inline | display: inline; |
| .visible-*-inline-block | display: inline-block; |
Quindi, prendiamo ad esempio lo schermo ultr-piccolo (xs), le classi .visible-*-* disponibili sono: .visible-xs-block, .visible-xs-inline e .visible-xs-inline-block.
Le classi .visible-xs, .visible-sm, .visible-md e .visible-lg esistono anche. Tuttavia, a partire dalla versione 3.2.0 non si consiglia di utilizzarle. Tranne che per casi speciali relativi a <table>, sono generalmente simili a .visible-*-block.
La tabella seguente elenca le classi di stampa. Utilizza questi switch per cambiare il contenuto di stampa.
| class | Browser | Stampante |
|---|---|---|
| .visible-print-block .visible-print-inline .visible-print-inline-block | Nascosto | Visibile |
| .hidden-print | Visibile | Nascosto |
Il seguente esempio dimostra l'uso delle classi di aiuto elencate sopra. Modificare la dimensione della finestra del browser o caricare l'esempio su dispositivi diversi per testare le classi di strumenti risponsivi.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Esempio Bootstrap - Strumenti risponsivi</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="container" style="padding: 40px;"> <div class="row visible-on"> <div class="col-xs-6 col-sm-3" style="background-color: #dedef8;box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> <span class="hidden-xs">Piccolissima</span> <span class="visible-xs">✔ Visibile su dispositivi di piccolissima dimensione</span> </div> <div class="col-xs-6 col-sm-3" style="background-color: #dedef8;box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> <span class="hidden-sm">Piccola</span> <span class="visible-sm">✔ Visibile su dispositivi di piccola dimensione</span> </div> <div class="clearfix visible-xs"></div> <div class="col-xs-6 col-sm-3" style="background-color: #dedef8;box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> <span class="hidden-md">Media</span> <span class="visible-md">✔ Visibile su dispositivi di media dimensione</span> </div> <div class="col-xs-6 col-sm-3" style="background-color: #dedef8;box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> <span class="hidden-lg">大型</span> <span class="visible-lg">✔ 在大型设备上可见</span> </div> </div> </div> </body> </html>测试看看 ‹/›
结果如下所示：
勾号（✔） 表示元素在当前视口中可见。