Testo
Aggiungere senso attraverso il testo-colori con le classi inferiori. Link si scurisce al passaggio del mouse:
| Classe | Descrizione | Esempio |
|---|---|---|
| .text-muted | Testo in stile con classe "text-muted" | Provalo |
| .text-primary | Testo in stile con classe "text-primary" | Provalo |
| .text-success | Testo in stile con classe "text-success" | Provalo |
| .text-info | Testo in stile con classe "text-info" | Provalo |
| .text-warning | Testo in stile con classe "text-warning" | Provalo |
| .text-danger | Testo in stile con classe "text-danger" | Provalo |
sfondo
Aggiungere significato attraverso sfondo-colori con le classi inferiori. Link si scurisce al passaggio del mouse proprio come classi di testo:
| Classe | Descrizione | Esempio |
|---|---|---|
| .bg-primary | Cella di una tabella è in stile con classe "bg-primary" | Provalo |
| .bg-success | Cella di una tabella è in stile con classe "bg-success" | Provalo |
| .bg-info | Cella di una tabella è in stile con classe "bg-info" | Provalo |
| .bg-warning | Cella di una tabella è in stile con classe "bg-warning" | Provalo |
| .bg-danger | Cella di una tabella è in stile con classe "bg-danger" | Provalo |
Altro
| Classe | Descrizione | Esempio |
|---|---|---|
| .pull-left | Galleggia un elemento a fianco | Provalo |
| .pull-right | Galleggia un elemento a destra | Provalo |
| .center-block | Imposta un elemento di display:block con margin-right:auto e margin-left:auto | Provalo |
| .clearfix | Cancella galleggianti | Provalo |
| .show | Forza un elemento da mostrare | Provalo |
| .hidden | Forza un elemento per essere nascosto | Provalo |
| .sr-only | Nasconde un elemento a tutti i dispositivi tranne i lettori di schermo | Provalo |
| .sr-only-focusable | Combinate con .sr solo per visualizzare nuovamente l'elemento quando viene focalizzata (ad esempio una tastiera user-only) | Provalo |
| .text-hide | Aiuta a sostituire il contenuto testuale di un elemento con un'immagine di sfondo | Provalo |
| .close | Indica l'icona di un vicino | Provalo |
| .caret | Indica funzionalità discesa (invertirà automaticamente nei menu dropup) | Provalo |
Utilità responsive
Queste classi vengono utilizzati per mostrare e / o nascondere i contenuti di dispositivo tramite media query.
Utilizzare uno o una combinazione delle classi disponibili per alternare contenuti attraverso viewport punti di interruzione:
| Classi | Extra piccoli dispositivi cellulari (<768px) | Dispositivi piccole tavolette (≥768px) | Dispositivi Media Desktop (≥992px) | Dispositivi di grandi dimensioni desktop (≥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 |
Come di v3.2.0 , il .visible-*-* le classi per venire in tre varianti, una per ogni CSS display valore di proprietà:
| Gruppo di classi | CSS display |
|---|---|
| visible-*-block | display: block; |
| .visible-*-inline | display: inline; |
| .visible-*-inline-block | display: inline-block; |
Ad esempio per i piccoli ( sm schermi), la disposizione .visible-*-* classi sono: .visible-sm-block , .visible-sm-inline , e .visible-sm-inline-block .
Le classi .visible-xs , .visible-sm , .visible-md , e .visible-lg sono obsolete come di v3.2.0.
Esempio
<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>Risultato:
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.
Prova tu stesso "