Cours Bootstrap

All bootstrap classes with description pdf [Eng]


Télécharger All bootstrap classes with description pdf [Eng]

★★★★★★★★★★3.5 étoiles sur 5 basé sur 1 votes.
Votez ce document:

Télécharger aussi :


all bootstrap classes with description pdf [Eng]

.aligner-*

 Un ensemble de classes utilitaires équivalant à l'écriture de la propriété css vertical-align: middle; vous pouvez l'utiliser sur des éléments de cellule en ligne et de tableau. .align- (baseline, top, middle, bottom) Utilitaire

.align-content- *

 Ajouté au conteneur flexbox parent pour déterminer la manière dont les éléments sont alignés horizontalement. .align-content- (début (valeur par défaut du navigateur), fin, centre, entre, autour ou étiré) Utilitaire

.align-items- *

 Classe ajoutée aux éléments enfants flexbox pour spécifier si elle doit être alignée vers le haut ou le bas du conteneur (début, fin)

.align-self- *

 Utilisé sur les éléments flexbox pour les aligner verticalement par rapport au conteneur parent. Si des colonnes sont utilisées, les éléments s'aligneront verticalement. (début, fin, centre, ligne de base ou extension (par défaut du navigateur))

.align-text- *

 Un ensemble de classes d'utilitaires équivalentes à l'écriture de la propriété css vertical-align: text-bottom; Vous pouvez utiliser ceci sur des éléments de cellule en ligne et de tableau. Utilitaire .align-text- (haut, bas)

.badge-*

 Utilisé pour les étiquettes et les compteurs dans les applications .badge- (clair, primaire foncé, secondaire, transparent, blanc, avertissement, succès, info, danger) Badge

.bg- *

 Classes d'utilitaires de couleur de fond: .bg- (clair, foncé primaire, secondaire, transparent, blanc, avertissement, succès, info, danger)

.frontière-*

 Une classe utilitaire de bordure polyvalente qui vous permet d'ajouter / de supprimer des bordures sur un côté ou de changer une couleur de bordure. .border- (clair, primaire sombre, secondaire, transparent, blanc, avertissement, succès, info, danger, 0, haut-0, droite-0, bas-0, gauche-0, haut-droite, bas, gauche)

.btn-contour- *

 Une variante de bouton pour avoir des boutons décrits au lieu d'un arrière-plan solide. .btn-contour- (clair, foncé principal, secondaire, transparent, blanc, avertissement, succès, info, danger) Boutons

.carousel-control- *

 Lorsque vous avez un carrousel d'images avec pagination, vous utiliserez cette classe sur les liens d'ancrage précédents et suivants. .carousel-control- (prev, next) Carousel

.carousel-fade

n / a Anime la transition de diapositive avec un fondu enchaîné au lieu d'un diapositive

.col

 Les éléments Flexbox ont automatiquement la même largeur. Cette classe est donc utilisée lorsque vous souhaitez que vos colonnes aient la même largeur et atteignent 100% du point d'arrêt xs. la grille

.col- *

 Cette classe est utilisée par les colonnes de la grille pour déterminer la largeur de la colonne et le point d'arrêt que vous souhaitez qu'elle soit active. Les classes fonctionnent à partir du point d'arrêt que vous avez défini et de tout ce qui est plus grand. .col- (sm, md, lg, xl) - (1-12) grille

.custom-range

 Modifie le style par défaut d'une plage de saisie de formulaire

.d-flex

n / a Définit l'élément avec la propriété de style display: flex; Utilitaire

.d-none

n / a Définit l'élément avec la propriété de style display: none; Utilitaire

.ré-*-*

n / a Une classe d'utilitaire d'affichage responsive qui vous permet de spécifier quand une propriété d'affichage est appliquée à l'élément. .d- (sm, md, lg, xl) - (aucun, en ligne, bloc en ligne, bloc, tableau, cellule de tableau, ligne de tableau, flex, inline-flex) Utilitaire

.d-print- *

n / a Modifie l'affichage des éléments lorsque vous imprimez le document. Utilitaire .d-print- (flex, inline-flex, table, cellule-tableau, ligne-table)

.fixé-*

n / a Cette classe crée un élément fixé en haut / en bas de la fenêtre du navigateur. Voici à quoi ressemble le jeu de règles CSS. .fixed-bottom {position: fixe; droite: 0; bas: 0; gauche: 0; z-index: 1030;} Utilitaire

.fléchir-*-*-*

n / a Modifie la disposition, l'alignement ou la taille des éléments de la flexbox. .flex- (sm, md, lg, xl) - (rangée, inversée, colonne) Utilitaire

.flex-fill- *

n / a Ajoutez à tous les éléments frères que vous souhaitez forcer en largeurs égales et remplissez tout l'espace horizontal disponible. .flex-fill- (sm, md, lg, xl) Utilitaire

.flex- (grossir | rétrécir) - *

Force un élément à grossir ou à rétrécir et à utiliser plus ou moins l'espace disponible .flex- (croître, rétrécir) - (0, 1) Utilité

.flotte-*-*

n / a Utilitaire responsive pour faire flotter un élément. .float- (sm, md, lg, xl) - (aucun, gauche, droite) Utilitaire

.form-control-texte

 Utilisez la classe .form-control-plaintext pour supprimer le style par défaut des champs de formulaire et conserver la marge et le remplissage corrects. Formes

.form-row

 Fonctionne comme une grille .row mais est plus compacte pour rendre la forme plus uniforme

.h- *

 Classe d'utilitaire de hauteur qui fait de l'élément un pourcentage en hauteur de son élément parent. h- (25,50,78,100, auto) Utilitaire

.invalid-feedback

 Cette classe peut être ajoutée à la validation de formulaire côté serveur pour ajouter un message de feedback à un champ non valide.

.est-*

n / a Si vous effectuez une validation de formulaire côté serveur, vous pouvez utiliser cette classe pour définir les couleurs de retour d'informations sur les entrées ou le message d'erreur. .is- (valide, invalide) Formulaires

.justify-content - * - *

 Classe spécifie où les éléments flexibles seront placés à l'intérieur du conteneur. .justify-content- (sm, md, lg, xl) - (début, fin, centre, entre, autour) Utilitaire

.m * - * - *

Applique la marge à un élément en utilisant des points d'arrêt réactifs {propriété} {côtés} - {point d'arrêt} - {taille}

m (t, b, r, l, x, y) - (sm, md, lg, xl) - (0, 1, 2, 3, 4, 5) Utilitaire

.p * - * - *

Applique le remplissage à un élément à l'aide de points d'arrêt réactifs {propriété} {côtés} - {point d'arrêt} - {taille}

p (t, b, r, l, x, y) - (sm, md, lg, xl) - (0, 1, 2, 3, 4, 5) Utilitaire

.progress-bar-animated

 Lorsque cette classe est ajoutée à une barre de progression, la progression est animée à l'aide d'animations css3.



.nav-fill

 Fait en sorte que tous les éléments de navigation utilisent tout l'espace horizontal disponible. Les éléments de navigation ont des largeurs différentes sur leur contenu. Navs

.nav-justifié

 Rend tous les éléments de navigation égaux en largeur et utilise tout l’espace horizontal disponible. Navs

.navbar-collapse

n / a Les liens de navigation qui sont réduits et affichés lorsqu'ils sont basculés sur les largeurs mobiles. Barre de navigation

.navbar-expand- *

n / a Comme la barre de navigation est affichée en premier sur le mobile, cette classe indique le point d'arrêt auquel vous souhaitez que la barre de navigation ne soit pas réduite.

.navbar-text

Centrer verticalement le texte dans une barre de navigation Navbar

.navbar-toggler-icon

 L’icône de navigation cheeseburger est définie à l’aide d’une image de fond svg de trois lignes horizontales

.no-gouttières

n / a Supprime la marge négative sur le .row et le remplissage des colonnes enfants. Utile lorsque vous souhaitez agrandir une image sur les bords du navigateur sans ajouter de marge sur les bords gauche et droit. la grille

.ordre-*-*

 Cette classe est utilisée pour contrôler le classement des éléments sur la page, quel que soit leur ordre dans le code source. Ainsi, vous pouvez réorganiser votre mise en page selon vos besoins. la grille

.rounded- *

 La classe .img-arrondie a été renommée en ceci et est principalement utilisée avec des images. Cependant, la classe ajoute simplement un rayon de bordure afin que vous puissiez l'utiliser sur d'autres éléments pour lesquels vous souhaitez appliquer un rayon. Images

.visible

n / a Masque la visibilité d'un élément mais ne modifie pas leur propriété d'affichage. Utilitaire

.w- *

 Classe d'utilitaire de largeur qui fait de l'élément un pourcentage en largeur de son élément parent. w- (25,50,78,100, auto) Utilitaire

.was-validé

 Cette classe est définie par le javascript de Bootstrap pour appliquer des styles de validation de sous-classe aux entrées de formulaire. Formes

.alert-heading

 Cette classe est ajoutée aux en-têtes des alertes. Il applique la couleur: héritez afin que les couleurs correspondent. Les alertes

.blocquote

 Ajoutez aux éléments blockquote pour appliquer l'espacement et la marge inférieure appropriés afin de les séparer des autres textes. Devis de blocs

.blockquote-footer

 Classe d'habillage pour le texte de citation sous une citation. Utilisé pour alléger la couleur du texte. Devis de blocs

.btn-group-lg

 Augmente la taille par défaut du groupe de boutons Groupe de boutons

.btn-group-sm

 Diminue la taille par défaut du groupe de boutons Groupe de boutons

.btn-group-toggle

 Cette classe remplace une case à cocher d’entrée par un style personnalisé qui peut être basculé en cliquant sur Groupe de boutons.

.btn-lg

 Augmente la taille de bouton par défaut

.btn-contour- *

 Fond transparent avec texte coloré et bordure (danger | info | primaire | secondaire | succès | avertissement) Boutons

.carte

 La classe ajoutée au div qui enveloppe chaque carte individuelle

.card-body

 Cette classe est ajoutée au premier div enfant dans les cartes parent div.card.

.card-colonnes

 La classe .card-columns est ajoutée à la division d'emballage d'une collection de cartes de type maçonnerie

.carte-*

 Ajoutez d’abord .card-inverse, puis l’une des couleurs d’arrière-plan contextuelles (danger | info | primaire | secondaire | succès | avertissement).

.jeu de cartes

 Semblables aux colonnes, les jeux de cartes Bootstrap ont la même hauteur et la même largeur

.card-footer

 Classe d'emballage pour la zone de contenu d'un pied de carte

.card-group

 Le parent qui entoure la classe autour d’un groupe de cartes. Les groupes sont similaires aux decks mais ils n'ont aucune marge entre chaque carte. Cartes

.card-header

 Classe d'emballage pour une zone de contenu d'en-tête de carte

.card-header-pills

 Classe ajoutée en combinaison avec .nav-pilules pour ajouter la navigation de pilule à un en-tête de carte

.card-header-tabs

 Classe ajoutée en combinaison avec .nav-pills pour ajouter la navigation par onglets à un en-tête de carte

.card-img

 Ajoutez cette classe à l'image que vous souhaitez utiliser comme image de fond de carte. Utilisé pour créer des cartes avec des superpositions d'image. Cartes

.card-img-bottom

 Semblable à un pied de carte, vous pouvez coiffer le bas d’une carte avec une image.

.card-img-overlay

 Classe wrapper utilisée pour créer une carte avec une superposition d'images d'arrière-plan

.card-img-top

 Semblable à un en-tête de carte, vous pouvez coiffer le haut d'une carte avec une image

.card-inverse

 Inverse les couleurs par défaut pour utiliser du texte clair sur une couleur d'arrière-plan sombre

.card-link

 Ajoute un espacement autour des liens ajoutés à l'intérieur des cartes

.card-sous-titre

 Classe ajoutée aux sous-titres de carte qui ajuste les styles de titre par défaut

.card-text

 Cette classe enveloppe le conteneur autour du texte de la carte Cards

.card-titre

 La classe a ajouté des titres à l'intérieur des cartes. Il applique le bon espacement. Cartes

.carousel-item

 La classe d'emballage s'applique à chaque élément de carrousel. Carrousel

.clearfix

nd Efface les flotteurs de tous les éléments enfants. Ajoutez cette classe à l'élément parent qui enveloppe les éléments flottants. Utilitaire

.col-form-label

 Classe ajoutée aux étiquettes de formulaire pour appliquer un remplissage et des marges cohérents

.col-form-label-lg

 Augmente la taille de la police et l'espacement d'une étiquette de formulaire

.col-form-label-sm



 Diminue la taille de la police et l'espacement d'une étiquette de formulaire

.col-xl- *

n / a Définit la largeur de la colonne pour toute valeur supérieure à 1200px. Spécifiez l'étendue des colonnes en ajoutant 1-12 à la fin du système de grille.

.custom-checkbox

 Classe parente qui convertit une case à cocher de formulaire par défaut en une case à cocher HTML / CSS personnalisée

.custom-control

n / a Utilisé sur toutes les entrées de formulaire personnalisées et ajoute des styles de base tels que le remplissage et l'affichage: formulaire en ligne

.custom-control-inline

 Les cases à cocher de formulaire personnalisé sont configurées pour être affichées: bloc. Utilisez cette classe pour rendre la case à cocher des formulaires en ligne

.custom-control-input

n / a Cette classe est ajoutée à l'entrée par défaut à remplacer. Il ajoute ce qui suit: position: absolute; z-index: -1; opacité: 0; Formes

.custom-control-label

 Lors de la création d'une case à cocher de formulaire personnalisé, cette classe remplace la case à cocher par défaut par des éléments personnalisés à l'aide de: before et: after Forms

.fichier personnalisé

 Classe ajoutée à une étiquette d'éléments groupés pour créer une entrée de téléchargement de fichier personnalisée

.custom-file-control

 Semblable à la classe custom-control-indicator, cette classe est ajoutée à une div pour créer une entrée de fichier personnalisée à l'aide de CSS: before et: after. Formes

.custom-file-input

n / a Cette classe est ajoutée au type d'entrée par défaut = "fichier" et le cache à l'aide de formulaires CSS

.custom-file-label

 Lors de la création d'un navigateur de fichier de formulaire personnalisé, cette classe remplace le navigateur de fichier par défaut par des éléments personnalisés à l'aide de: after Forms

.custom-radio

 Cette classe est ajoutée à la balise d'étiquette parent avec la classe .custom-control pour spécifier le type d'entrée personnalisé à utiliser.

.custom-select

 Classe ajoutée à une balise de sélection pour créer un menu de sélection personnalisé

.custom-select-sm

 Diminue la taille de la police et le remplissage sur un formulaire personnalisé sélectionné

.custom-select-lg

 Augmente la taille relative d'un formulaire personnalisé, sélectionnez Formulaires.

.ré-*

 Ajoutez ce qui suit pour modifier la propriété d'affichage de l'élément (block, inline, inline-block). Utilitaire

.désactivée

 Ajoutez cette classe aux balises d'ancrage pour désactiver la fonctionnalité de clic tout en les maintenant visibles. Boutons

.afficher-*

 Cet ensemble de classes augmente la taille de la police des en-têtes en 4 étapes. Ces classes sont utilisées pour les en-têtes en dehors du contenu principal de la page, telles que les jumbotrons et les en-têtes de page. Ajoutez (1-4) à la fin pour ajuster la taille. Typographie

.dropdown-divider

 La classe ajoute une ligne horizontale entre les éléments de lien déroulants.

.dropdown-item

 Cette classe est ajoutée à chaque élément de lien affiché dans un menu déroulant.

.dropdown-item-text

n / a Supprime l'interactivité d'un menu déroulant afin qu'il n'apparaisse pas cliquable.

.dropdown-toggle-split

 Classe ajoutée à la navigation déroulante cochée. Idéal pour fournir des actions supplémentaires mais ayant toujours une action principale. Des listes déroulantes

.dropleft

 Menu déroulant qui s'ouvre à gauche du bouton Liste déroulante

.dropright

 Menu déroulant qui s'ouvre à droite du bouton Liste déroulante

.déposer jusqu'à

 Affiche le menu déroulant au-dessus du bouton au lieu de ci-dessous. Des listes déroulantes

.embed-responsive- *

n / a Classe utilisée pour ajuster le rapport d'aspect incorporé sensible. Ajoutez l’un des éléments suivants pour le rapport de format souhaité (21by9, 16by9, 4by3, 1by1).

.embed-responsive-item

n / a Par défaut, les intégrations réactives s'appliquent aux balises iframe, object, embed et video. Vous pouvez ajouter .embed-responsive-item à n’importe quel autre élément pour appliquer les mêmes styles réactifs. Utilitaire

.Légende de la figure

 Ajouté à un élément figcaption de la figure pour appliquer un style de police

.figure-img

 Classés ajoutés aux images à l'intérieur d'une figure pour appliquer une marge

.Police de caractère-*

 (italique, gras, léger, léger, monospace)

.form-check

 La classe parent des cases à cocher Formulaires

.form-check-inline

 Classe utilisée pour un groupe horizontal de coches ou de boutons radio Formulaires

.form-check-input

 Cette classe est ajoutée à la balise d'entrée pour les cases à cocher et les boutons radio. Ajoute des styles pour le positionnement et les marges. Formes

.form-check-label

 Cette classe est ajoutée aux étiquettes des cases à cocher et des boutons radio.

.form-control-file

 La classe ajoutée à input type = "file" pour appliquer la police et les formulaires d'espacement

.form-control- *

 Appliquez cette classe aux éléments de formulaire pour augmenter ou réduire sa taille par rapport à la taille par défaut. Forms-control- (lg, sm)

.form-inline

 Utilisez cette classe pour avoir une série d'étiquettes et d'éléments de formulaire sur une seule ligne horizontale.

.form-text

 Cette classe est utilisée pour le texte d'aide à côté des éléments de formulaire. Vous pouvez ajouter .text-muted pour rendre le texte plus clair en couleur.

.a-*

 Le .has- (succès, avertissement, danger) est ajouté au conteneur d'éléments de formulaire parent pour appliquer un retour visuel à l'utilisateur lors de la validation du formulaire. Formes

.img-fluid

 Cette classe s’applique aux images dont vous souhaitez une réactivité ou une largeur fluide pour différentes tailles d’écran. C'était .img-responsive dans v3 Images

.input-group- *



 Cette classe vous permet d'étendre les contrôles de formulaire en ajoutant du texte ou des boutons à gauche ou à droite de l'entrée. .input-group- (addon | btn) Groupe d'entrée

.input-group-append

 Cette classe ajoute margin-left: -1px; à l'entrée définie à gauche du groupe pour compenser le groupe d'entrée de la bordure 1px

.input-group-prepend

 Cette classe ajoute margin-right: -1px; à l'entrée définie à droite du groupe pour compenser le groupe d'entrée de bordure 1px

.input-group-text

 Cette classe ajoute la couleur d’arrière-plan et les styles de texte au texte contenu dans un groupe de saisie.

.jumbotron-fluid

 Un jumbotron par défaut n’est pas de la largeur totale mais l’ajout de cette classe supprime les coins arrondis et l’étend à 100% de son parent Jumbotron.

.list-group-flush

 Lors de l'ajout d'un groupe de listes à une carte, ajoutez cette classe au groupe de listes pour supprimer la bordure. Sinon, vous aurez une double bordure. Cartes

.list-group-item-action

 Ajoutez cette classe à chaque ancre d'un groupe de listes pour supprimer la couleur du texte d'ancre par défaut. Groupe de listes

.list-inline

 Modifiez la liste ul ou ol pour qu’elle apparaisse horizontalement avec une petite marge entre chaque typographie.

.m * - #

 Parfois, vous devez ajouter des marges ou un remplissage à un élément sans écrire de sélecteur CSS personnalisé. Définissez la marge ou le rembourrage, le côté auquel appliquer l'espacement et enfin la taille de l'espacement (m, p) - (t | r | b | l | x | y | a) - (0,1,2,1,5, 3) utilitaire

.media-bottom

 Ajoutez cette classe au div encapsulant l'image de l'objet multimédia pour l'aligner sur l'objet multimédia inférieur.

.media-left

 Ajoutez cette classe au div encapsulant l'image de l'objet multimédia pour l'aligner sur l'objet multimédia de gauche

.media-middle

 Ajoutez cette classe à la division encapsulant l'image de l'objet multimédia pour la centrer verticalement

.media-right

 Ajoutez cette classe au div encapsulant l'image de l'objet multimédia pour l'aligner sur le bon objet multimédia

.nav-item

 Si votre système de navigation utilise une liste, ajoutez cette classe à chaque élément de la liste pour obtenir un espacement approprié.

.nav-link

 Chaque lien d’ancre à l’intérieur de votre navigation se voit attribuer cette classe afin d’avoir le style approprié Navs

pilules .nav

 Utilisez cette classe avec .nav pour transformer chaque lien de navigation en un bouton

.navbar-light

 Ajoutez cette classe à votre barre de navigation si vous souhaitez qu’elle ait un arrière-plan et un texte sombres. Navbar

.navbar-toggler

 L'icône infâme de cheeseburger pour indiquer un menu de navigation sur la barre de navigation mobile

.décalage-*-*

 Utilisé pour décaler une colonne de la grille de sa position d'origine. Système de grille

.p * - #

 Parfois, vous devez ajouter des marges ou un remplissage à un élément sans écrire de sélecteur CSS personnalisé. Définissez la marge ou le rembourrage, le côté auquel appliquer l'espacement et enfin la taille de l'espacement (m, p) - (t | r | b | l | x | y | a) - (0,1,2,1,5, 3) utilitaires

.page-item

 Cette classe est ajoutée à chaque li de la ul.pagination et fait flotter sa pagination

.page-link

 Cette classe est ajoutée à chaque lien d'ancrage contenant les numéros Pagination

.pagination-sm

 Diminue la taille de la police et l'espacement d'une pagination nav Pagination

.pagination-lg

 Augmente la taille de la police et l'espacement d'une pagination nav Pagination

.position-*

N / A Non réactif, mais un groupe de classes utilitaires permettant d'ajouter des valeurs de position communes. .position- (absolu, fixe, relatif, statique, collant)

.ombre-*

 Ajoute une ombre de boîte CSS noire à un élément. .shadow- (aucun, sm, lg) Utilitaire

.pos-f-t

n / a Positionne un élément fixé en haut de la fenêtre et sur toute la largeur. Utilitaire

.sr seulement

n / a Masquer l'élément sur tous les périphériques sauf les lecteurs d'écran

.sr-only-focusable

Combinez .sr-only avec .sr-only-focusable pour afficher à nouveau l'élément lorsqu'il est mis au point par un utilisateur à l'aide d'un clavier. Utilitaires

.table-*

 Ajoute un trait de 1px autour des lignes, des colonnes et du contour de la table. Vous pouvez également supprimer entièrement les bordures. .table- (bordé, sans bordure) Tables

.table-*

 Classes contextuelles de différents styles de couleur pour fournir des informations aux utilisateurs (active | danger | info | principal | secondaire | succès | avertissement) Tables

.table-hover

 Ajoute une couleur d'arrière-plan lorsque vous survolez une ligne d'un tableau.

.table-refusion

 L'en-tête de la table devient la première colonne de la table à gauche.

.table-sm

 Supprime le remplissage vertical entre les lignes de la table afin de ne pas utiliser autant d'espace vertical. Bon pour les tables avec beaucoup de lignes. les tables



37