Latest web development tutorials

Bootstrap classe auxiliaire

Ce chapitre traite de certains des Bootstrap pourrait venir dans les classes d'aide à portée de main.

texte

Les différentes classes suivantes montrent différentes couleurs de texte. Si le texte est un lien pour déplacer la souris sur le texte sera grisé:

catégorie description Exemples
.text-coupé Style de texte catégorie «texte-coupé" essayer
.text primaire Style de texte catégorie «texte-primaire" essayer
.text-succès Style de texte catégorie "text-succès» essayer
.text-info Style de texte catégorie "text-info" essayer
.text alerte Style de texte catégorie «texte d' avertissement" essayer
.text-danger Style de texte catégorie "text-danger" essayer

fond

Les différentes classes suivantes montrent différentes couleurs de fond. Si le texte est un lien pour déplacer la souris sur le texte sera grisé:

catégorie description Exemples
.bg primaire cellule de tableau en utilisant la catégorie «bg-primaire" essayer
.bg-succès cellule de tableau en utilisant la catégorie «bg-succès" essayer
.bg-info cellule de tableau en utilisant la catégorie «bg-info" essayer
.bg alerte cellule de tableau en utilisant la catégorie «bg-warning" essayer
.bg-danger cellule de tableau en utilisant la catégorie «bg-danger" essayer

autre

catégorie description Exemples
.Retirer gauche Les éléments flottent vers la gauche essayer
.Retirer droite Les éléments flottent à la droite essayer
.center-block Element est réglé display: block et centré essayer
.clearfix float clair essayer
.montrer Les éléments obligatoires sont affichés essayer
.hidden Obligatoire élément caché essayer
.sr seule En plus du lecteur d'écran, l'élément caché sur d'autres appareils essayer
.sr-only-focusable En conjonction avec la classe de .sr seule, affichée lorsque l'élément obtient le focus (par exemple: le fonctionnement du clavier de l'utilisateur) essayer
.text-hide La page des éléments de texte contenus remplacer fond essayer
.close Afficher Off essayer
.caret Afficher le menu déroulant essayer

D'autres exemples

icône de fermeture

Utilisez commune icône Fermer pour fermer la boîte modale et la zone d'alerte. Utilisez laclasse près de se rapprocher icône.

Exemples

<P> Fermer l' icône instance <button type = "button" class = "close" aria-hidden = "true"> et horaires; </ Button> </ P>

Essayez »

Les résultats sont les suivants:

icône de fermeture

lambda

Utilisez caret pour tirer vers le bas la fonction et de la direction. Utilisez <span> avec caretde classe pour obtenir cette fonctionnalité.

Exemples

<P> instance de caret <span class = "caret"> </ span> </ P>

Essayez »

Les résultats sont les suivants:

lambda

rapide flottante

Vous pouvez utiliser chaquepull-droite pull-gauche classeou aux éléments de gauche ou de droite flottante. L'exemple suivant illustre ce point.

Exemples

<Div class = "pull-left"> gauche rapide flottante </ div> <Div class = "pull-right"> flottant droit rapidement </ div>

Essayez »

Les résultats sont les suivants:

rapide flottante

Pour aligner les composants de la barre de navigation, utilisez.navbar gauche ou .navbar droiteà la place. Voir la barre de navigation Bootstrap .

Centré contenu

Utiliser le centre-blocde classe pour centrer des éléments.

Exemples

<Div class = "ligne"> <Div class = "center-block" style = "width: 200px; fond -couleur: #ccc;"> Ceci est l'instance centre-bloc </ div> </ Div>

Essayez »

Les résultats sont les suivants:

bloc de contenu Centré

float clair

Pour effacer l'élément flottant, utilisez.clearfix classe.

Exemples

<Div class = "clearfix" style = "background: # D8D8D8; border: 1px solid # 000; padding: 10px;"> <Div class = "pull-gauche" style = "background: # 58D3F7; "> gauche rapide flottante </ div> <Div class = "pull-droite" style = "background: # DA81F5; "> flottant droit rapidement </ div> </ Div>

Essayez »

Les résultats sont les suivants:

float clair

Afficher et masquer le contenu

Vous pouvez forcer l'élément à afficher ou masquer (y compris les lecteurs d'écran) grâce à l'utilisation de laclasse .montrer et .hiddenvenir.

Exemples

<Div class = "ligne" style = "padding: 91px 100px 19px 50px;"> <Div class = "show" style = "left-margin: 10px ; width: 300px; background-color: #ccc;"> Ceci est un exemple de la classe show </ div> <Div class = "hidden" style = "width: 200px; fond -couleur: #ccc;"> Ceci est un exemple de la classe hide </ div> </ Div>

Essayez »

Les résultats sont les suivants:

Afficher et masquer le contenu

Lecteur d'écran

Vous pouvez mettre tous les éléments sur le dispositif en utilisant uneclasse cachée .sr seule, en plus d'un lecteur d'écran.

Exemples

<Div class = "ligne" style = "padding: 91px 100px 19px 50px;"> <Form class = "form-ligne" role = "form"> <Div class = "form-groupe"> <Étiquette class = "sr-only" for = "email"> Adresse e - mail </ label> <entrée type = "email" class = "form-commande" espace réservé = "Entrer email"> </ Div> <Div class = "form-groupe"> <Étiquette class = "sr-only" for = "pass"> password </ label> <entrée type = "password" class = "form-commande" espace réservé = "Mot de passe"> </ Div> </ Form> </ Div>

Essayez »

Les résultats sont les suivants:

Lecteur d'écran

Ici , nous voyons deux types de balises d'entrée de l' étiquette avec laclasse sr-seulement, alors l'étiquette ne sera visible que pour les lecteurs d'écran.