Texte
Ajouter sens par texte-couleurs avec les classes ci-dessous. Links va assombrir le vol stationnaire:
| Classe | La description | Exemple |
|---|---|---|
| .text-muted | Texte de style avec classe "text-muted" | Essayez - le |
| .text-primary | Texte de style avec classe "text-primary" | Essayez - le |
| .text-success | Texte de style avec classe "text-success" | Essayez - le |
| .text-info | Texte de style avec classe "text-info" | Essayez - le |
| .text-warning | Texte de style avec classe "text-warning" | Essayez - le |
| .text-danger | Texte de style avec classe "text-danger" | Essayez - le |
Contexte
Ajouter sens à travers fond-couleurs avec les classes ci-dessous. Liens noircissent sur le vol stationnaire comme les classes de texte:
| Classe | La description | Exemple |
|---|---|---|
| .bg-primary | Tableau cellulaire est de style avec classe "bg-primary" | Essayez - le |
| .bg-success | Tableau cellulaire est de style avec classe "bg-success" | Essayez - le |
| .bg-info | Tableau cellulaire est de style avec classe "bg-info" | Essayez - le |
| .bg-warning | Tableau cellulaire est de style avec classe "bg-warning" | Essayez - le |
| .bg-danger | Tableau cellulaire est de style avec classe "bg-danger" | Essayez - le |
Autre
| Classe | La description | Exemple |
|---|---|---|
| .pull-left | Flotte un élément vers la gauche | Essayez - le |
| .pull-right | Flotteurs un élément vers la droite | Essayez - le |
| .center-block | Définit un élément à display:block avec margin-right:auto et margin-left:auto | Essayez - le |
| .clearfix | Efface flotteurs | Essayez - le |
| .show | Force un élément à afficher | Essayez - le |
| .hidden | Force un élément à être caché | Essayez - le |
| .sr-only | Hides un élément à tous les appareils, à l'exception des lecteurs d'écran | Essayez - le |
| .sr-only-focusable | Combiner avec .sr seulement pour montrer à nouveau l'élément quand il est concentré (par exemple par un utilisateur du clavier uniquement) | Essayez - le |
| .text-hide | Aide à remplacer le contenu de texte d'un élément avec une image d'arrière-plan | Essayez - le |
| .close | Indique une icône de fermeture | Essayez - le |
| .caret | Indique la fonctionnalité de liste déroulante (inversera automatiquement dans les menus de dropup) | Essayez - le |
Utilitaires Responsive
Ces classes sont utilisées pour afficher et / ou masquer le contenu par le dispositif via des requêtes des médias.
Utilisez un ou une combinaison des classes disponibles pour basculer contenu à travers viewport breakpoints:
| Des cours | Extra petits appareils portables (<768px) | Petits appareils Tablets (≥768px) | Appareils de bureau moyen (≥992px) | Les grands appareils de bureau (≥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 |
Au v3.2.0 , le .visible-*-* classes pour venir en trois variantes, un pour chaque CSS display valeur de la propriété:
| Groupe de classes | CSS display |
|---|---|
| visible-*-block | display: block; |
| .visible-*-inline | display: inline; |
| .visible-*-inline-block | display: inline-block; |
Par exemple , pour les petits ( sm ) écrans, la disposition .visible-*-* classes sont: .visible-sm-block , .visible-sm-inline et .visible-sm-inline-block .
Les classes .visible-xs , .visible-sm , .visible-md , et .visible-lg sont déconseillés comme des v3.2.0.
Exemple
<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>Résultat:
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.
Essayez - le vous - même »