Cours gratuits » Cours informatique » Cours développement web » Cours Bootstrap » Bootstrap all class with example

Bootstrap all class with example

Problème à signaler:

Télécharger



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

bootstrap all class with example

...

.active Ajoute une couleur de fond grise à la ligne du tableau (<tr> ou à la cellule du tableau (<td>) (même couleur que celle utilisée en survol).

.active Ajoute une couleur d'arrière-plan grise au lien actif dans une barre de navigation par défaut. Ajoute un fond noir et une couleur blanche au lien actuel dans une barre de navigation inversée.

.active Ajoute une couleur de fond bleue à l'élément de liste actif dans un groupe de liste

.active Ajoute une couleur de fond bleue pour simule

r un bouton "enfoncé"

.active Anime une barre de progression rayée

.active Ajoute une couleur d'arrière-plan bleue à l'élément de liste déroulante actif dans une liste déroulante.

.active Ajoute une couleur de fond bleue au lien de pagination actif (pour mettre en surbrillance la page en cours)

.affix Le plugin Affixe permet à un élément d’être apposé (verrouillé / collant) sur une zone de la page. Il bascule la position: fixe sur et off

.alert Crée un message d'alerte

.alert-danger Boîte d'alerte rouge. Indique une action dangereuse ou potentiellement négative

.alert-licenciable Avec la classe .close, cette classe est utilisée pour fermer l'alerte.

.alert-info Boîte d’alerte bleu clair. Indique des informations

.alert-link Utilisé sur les liens dans les alertes pour ajouter des liens colorés correspondants

.alert-success Boîte d’alerte verte. Indique une action réussie ou positive

.alert-warning Zone d'alerte jaune. Indique que cette action doit être effectuée avec prudence

.badge Crée un badge circulaire (cercle gris - souvent utilisé comme indicateur numérique)

.bg-danger Ajoute une couleur de fond rouge à un élément. Représente un danger ou une action négative

.bg-info Ajoute une couleur de fond bleu clair à un élément. Représente des informations

.bg-primary Ajoute une couleur d'arrière-plan bleue à un élément. Représente quelque chose d'important

.bg-success Ajoute une couleur d'arrière-plan verte à un élément. Indique le succès ou une action positive

.bg-warning Ajoute une couleur de fond jaune à un élément. Représente un avertissement ou une action négative

.breadcrumb Une pagination. Indique l'emplacement de la page en cours dans une hiérarchie de navigation.

.btn Crée un bouton de base (fond gris et coins arrondis)

.btn-block Crée un bouton de niveau bloc couvrant toute la largeur de l'élément parent

Bouton rouge .btn-danger. Indique un danger ou une action négative

Bouton par défaut .btn. Fond blanc et bordure grise

.btn-group Regroupe les boutons sur une seule ligne

.btn-group-Justifie un groupe de boutons sur toute la largeur de l'écran

.btn-group-lg Grand groupe de boutons (agrandit tous les boutons d'un groupe de boutons - augmentation de la taille et du remplissage de la police)

.btn-group-sm Petit groupe de boutons (réduit la taille de tous les boutons d'un groupe de boutons)

.btn-group-xs Groupe de boutons très petit (rend tous les boutons d'un groupe de boutons très petits)

.btn-group-vertical Fait apparaître un groupe de boutons empilés verticalement

.btn-info Bouton bleu clair. Représente l'information

.btn-link Fait ressembler un bouton à un lien (obtenir le comportement du bouton)

.btn-lg Grand bouton

Bouton bleu .btn-primary.

.btn-sm Petit bouton

Bouton vert .btn-success. Indique le succès ou une action positive

Bouton jaune .btn-warning. Représente un avertissement ou une action négative

.btn-xs Extra petit bouton

.caption Ajoute un texte de légende à l'intérieur d'un .thumbnail

.caret Crée une icône en forme de flèche de curseur, indiquant que le bouton est une liste déroulante.

.carousel Crée un carrousel (diaporama)

.carousel-caption Crée un texte de légende pour chaque diapositive du carrousel.

Conteneur .carousel-control pour les liens suivants et précédents

.carousel-indicateurs Ajoute de petits points / indicateurs au bas de chaque diapositive (qui indique le nombre de diapositives dans le carrousel et la diapositive actuellement visualisée par l'utilisateur).

.carousel-inner Conteneur pour articles de diapositive

.center-block Centre n'importe quel élément (Définit un élément à afficher: blockwith margin-right: auto et margin-left: auto)

Conteneur .checkbox pour les cases à cocher

.checkbox-inline Fait apparaître plusieurs cases sur la même ligne

.clearfix Clears flotte

.close Indique une icône de fermeture

.col - * - * Grille sensible (colonne 1-12). Très petits appareils Téléphones (<768px), Tablettes pour petits appareils (≥768px), Ordinateurs de bureau de taille moyenne (≥992px), Ordinateurs de bureau de grande taille (≥1200px). Les valeurs de colonne peuvent être 1-12.

.col - * - offset- * Déplace les colonnes vers la droite. Ces classes augmentent la marge gauche d'une colonne de * colonnes

.col - * - pull- * Change l'ordre des colonnes de la grille

.col - * - push- * Modifie l'ordre des colonnes de la grille

.collapse Indique un contenu compressible pouvant être masqué ou affiché à la demande.

.collapse in Afficher le contenu réductible par défaut

.container Conteneur de largeur fixe avec des largeurs déterminées par les sites d'écran. Marge égale à gauche et à droite.

.container-fluid Un conteneur qui couvre toute la largeur de l'écran.

.control-label Permet à une étiquette d'être utilisée pour la validation de formulaire

.danger Ajoute un fond rouge à la ligne du tableau (<tr> ou à la cellule du tableau (<td>). Indique une action dangereuse ou potentiellement négative.

.disabled Désactive un bouton (ajoute de l'opacité et une icône "pas de stationnement" en survol)

.disabled Désactive un élément de la liste déroulante (ajoute une couleur de texte grise et une icône "pas de stationnement" en survol)

.disabled Désactive un lien de pagination (il est impossible de cliquer dessus - ajoute une couleur de texte grise et une icône "pas de stationnement" en survol)

.disabled Désactive un élément de la liste dans un groupe (il est impossible de cliquer dessus - ajoute une couleur d'arrière-plan grise et une icône "pas de stationnement" en survol)

.divider Utilisé pour séparer les liens dans le menu déroulant avec une fine bordure horizontale

.dl-horizontal Aligne les termes <dt> et les descriptions <dd> dans <dl> éléments côte à côte. Commence comme <dl> s par défaut, mais lorsque la fenêtre du navigateur s’agrandit, elle s’alignera côte à côte.

.dropdown Crée un menu pouvant être basculé qui permet à l'utilisateur de choisir une valeur dans une liste prédéfinie.

.dropdown-header Utilisé pour ajouter des en-têtes dans le menu déroulant.

.dropdown-menu Ajoute les styles par défaut pour le conteneur de menu déroulant

.dropdown-menu-right Droite-aligne un menu déroulant

.dropdown-toggle Utilisé sur le bouton qui devrait masquer et afficher (basculer) le menu déroulant

.dropup Indique un menu déroulant (vers le haut au lieu de vers le bas)

Conteneur .embed-responsive pour le contenu incorporé. Fait en sorte que les vidéos ou les diaporamas soient correctement mis à l'échelle sur tout appareil

.embed-responsive-16by9 Conteneur pour le contenu incorporé. Crée un contenu incorporé au format 16: 9

.embed-responsive-4by3 Conteneur pour le contenu incorporé. Crée un contenu incorporé au format 4: 3

.embed-responsive-item Utilisé à l'intérieur .embed-responsive. Ajuste bien la vidéo à l'élément parent

.fade Ajoute un effet de fondu lors de la fermeture d'une alerte

.form-control Utilisé sur les éléments input, textarea et select pour s’étendre sur toute la largeur de la page et les rendre réactifs.

Classe de validation de formulaire .form-control-feedback

.form-control-static Ajoute du texte brut à côté d'une étiquette de formulaire dans un formulaire horizontal

Conteneur .form-group pour la saisie de formulaire et l'étiquette

.form-inline Crée un <formulaire> aligné à gauche avec les contrôles inline-block (cela ne s'applique qu'aux formulaires dans les fenêtres ayant une largeur d'au moins 768 pixels)

.form-horizontal Aligne les étiquettes et les groupes de contrôles de formulaire dans une présentation horizontale.

.glyphicon Crée une icône. Bootstrap fournit 260 glyphicons gratuits du jeu Glyphicons Halflings

.has-danger Ajoute une couleur rouge à l'étiquette et une bordure rouge à l'entrée, ainsi qu'une icône d'erreur à l'intérieur de l'entrée (utilisée avec .has-feedback)

.has-feedback Ajoute des icônes de commentaires pour les entrées (coche, signes d'avertissement et d'erreur)

.has-success Ajoute une couleur verte à l'étiquette et une bordure verte à l'entrée, ainsi qu'une icône représentant une coche à l'intérieur de l'entrée (utilisée avec .has-feedback)

.has-warning Ajoute une couleur jaune / orange à l'étiquette et une bordure jaune / orange à l'entrée, ainsi qu'une icône à cocher à l'intérieur de l'entrée (utilisée avec .has-feedback)

.help-block Bloc de texte d'aide inséré dans une nouvelle ligne et pouvant s'étendre au-delà d'une ligne.

.hidden Oblige un élément à être masqué (affichage: aucun)

.hidden- * Masque le contenu en fonction de la taille de l'écran

.hide Obsolète. Utilisez .hidden à la place

.h1 - .h6 Fait ressembler un élément à un en-tête de la classe choisie (h1-h6)

.icon-bar Utilisé dans la barre de navigation pour créer un menu hamburger (trois barres horizontales)

Icône Unicode .icon-next (flèche pointant vers la droite), utilisée dans les carrousels. Ceci est souvent remplacé par un glyphicon

Icône Unicode .icon-prev (flèche pointant vers la gauche), utilisée dans les carrousels. Ceci est souvent remplacé par un glyphicon

.img-circle Transforme une image en cercle (non pris en charge par IE8 et les versions antérieures)

.img-responsive Rend une image sensible

.img-rounded Ajoute des coins arrondis à une image

.img-thumbnail Transforme une image en vignette (bordures)

.in Fondu dans les onglets

.info Ajoute un fond bleu clair à la ligne du tableau (<tr> ou à la cellule du tableau (<td>). Indique un changement ou une action informatif neutre.

.initialism Affiche le texte à l'intérieur d'un élément <abbr> dans une taille de police légèrement plus petite

Conteneur .input-group pour améliorer une entrée en ajoutant une icône, un texte ou un bouton devant ou derrière celle-ci en tant que "texte d'aide"

.input-group-lg Grand groupe d'entrées

.input-group-sm Petit groupe d'entrées

.input-group-addon Avec la classe .input-group, cette classe permet d'ajouter une icône ou un texte d'aide en regard du champ de saisie.

.input-group-btn Avec la classe .input-group, cette classe attache un bouton à côté d'une entrée. Souvent utilisé comme barre de recherche

.input-lg Grand champ de saisie

.input-sm Petit champ de saisie

.invisible Rend un élément invisible (visibilité: caché). Remarque: Même si l'élément est invisible, il occupera de l'espace sur la page.

.item Classe ajoutée à chaque élément du carrousel. Peut-être du texte ou des images

.jumbotron Crée une zone grise matelassée aux coins arrondis qui agrandit les tailles de police du texte qu'il contient. Crée une grande boîte pour attirer l'attention sur un contenu ou des informations spéciales

.label Ajoute une boîte arrondie grise à un élément. Fournit des informations supplémentaires sur quelque chose (par exemple, "Nouveau")

.label-danger Etiquette rouge

.label-info Étiquette bleu clair

.label-success Label vert

.label-warning Etiquette jaune

.lead Augmente la taille de la police et la hauteur de ligne d'un paragraphe

.left Utilisé pour identifier le contrôle du carrousel gauche

.list-group Crée un groupe de liste avec des bordures pour les éléments <li>

.list-group-item Ajouté à chaque élément <li> du groupe de listes

.list-group-item-header Crée un en-tête de groupe de listes (utilisé sur d'autres éléments que <li>).

.list-group-item-text Utilisé pour le texte d'élément dans le groupe de listes (utilisé pour d'autres éléments en plus de <li>)

.list-group-item-danger Couleur d'arrière-plan rouge pour un élément de la liste dans un groupe de la liste.

.list-group-item-info Couleur de fond bleu clair pour un élément de la liste dans un groupe de la liste

.list-group-item-success Couleur de fond vert pour un élément de la liste dans un groupe de la liste

.list-group-item-warning Couleur de fond jaune pour un élément de la liste dans un groupe de listes

.list-inline Place tous les éléments de la liste sur une seule ligne (menu horizontal)

.list-unstyled Supprime tous les styles de style de liste par défaut (puces, marge de gauche, etc.) d'une liste <ul> ou <ol>

.mark Texte surligné: Texte surligné

.media Aligne les objets multimédias (comme les images ou les vidéos - souvent utilisés pour les commentaires dans un article de blog, etc.).

.media-body Texte devant apparaître à côté d'un objet multimédia

.media-header Crée un en-tête à l'intérieur de l'objet multimédia.

.media-list Listes de médias imbriquées

.media-object Indique un objet multimédia (image ou vidéo)

.modal Identifie le contenu en tant que modal et le met en évidence

.modal-body Définit le style du corps du modal. Ajoutez n'importe quel balisage HTML ici (p, img, etc.)

.modal-content Styles le modal (bordure, couleur de fond, etc.). À l'intérieur, ajoutez l'en-tête, le corps et le pied de page du modal, si nécessaire.

.modal-dialog Définit la largeur et la marge appropriées du modal

.modal-footer Le pied de page du modal (contient souvent un bouton d'action et un bouton de fermeture)

.modal-header En-tête du modal (contient souvent un titre et un bouton de fermeture)

.modal-lg Large modal (plus large que celui par défaut)

.modal-open Utilisé sur l'élément <body> pour empêcher le défilement de page (débordement: masqué)

.modal-sm Petit modal (moins de largeur)

.modal-title Le titre du modal

.nav nav-tabs Indique un menu à onglets

.nav nav-pills Indique un menu de pilule

.nav .navbar-nav Utilisé sur un conteneur <ul> contenant les éléments de la liste avec des liens dans une barre de navigation

.Nav-Justified Center onglets / pilules. Notez que sur les écrans inférieurs à 768px, les éléments sont empilés (le contenu restera centré)

.nav-stacked Empilez verticalement des onglets ou des pilules

.nav-tabs Crée un menu à onglets

.navbar Crée une barre de navigation

.navbar-brand Ajouté à un lien ou à un élément d'en-tête à l'intérieur de la barre de navigation pour représenter un logo ou un en-tête.

.navbar-btn Aligne verticalement un bouton dans une barre de navigation

.navbar-collapse Réduit la barre de navigation (masquée et remplacée par une icône de menu / hamburger sur les téléphones mobiles et les petites tablettes)

.navbar-default Crée une barre de navigation par défaut (couleur d'arrière-plan gris clair)

.navbar-fixed-bottom Fait que la barre de navigation reste en bas de l'écran (collante / fixe)

.navbar-fixed-top Fait que la barre de navigation reste en haut de l'écran (collante / fixe)

.navbar-form Ajouté pour former des éléments à l'intérieur de la barre de navigation pour les centrer verticalement (remplissage approprié)

.navbar-header Ajouté à un élément conteneur qui contient le lien / élément qui représente un logo ou un en-tête.

.navbar-inverse Crée une barre de navigation noire (au lieu de gris clair)

.navbar-left Aligne les liens de navigation, les formulaires, les boutons ou le texte dans la barre de navigation vers la gauche.

.navbar-link Styles un élément qui ressemble à un lien dans la barre de navigation (les ancres reçoivent un rembourrage approprié et un soulignement lors du survol, tandis que d'autres éléments tels que p ou span reçoivent un effet de survol par défaut - la couleur blanche dans une barre de navigation inversée et une couleur noire dans une barre de navigation par défaut)

.navbar-nav Utilisé sur un conteneur <ul> contenant les éléments de la liste avec des liens dans une barre de navigation

.navbar-right Aligne les liens de navigation, les formulaires, les boutons ou le texte dans la barre de navigation à droite.

.navbar-static-top Supprime les bordures gauche, supérieure et droite (coins arrondis) de la barre de navigation (la barre de navigation par défaut a une bordure grise et un rayon de bordure de 4 pixels par défaut)

.navbar-text Vertical aligne tous les éléments de la barre de navigation qui ne sont pas des liens (assure un bon remplissage).

.navbar-toggle Styles le bouton qui doit ouvrir la barre de navigation sur de petits écrans. Souvent utilisé avec trois .icon-Barclasses pour indiquer une icône de menu pouvant être basculée (hamburger / barres)

.next Utilisé dans le contrôle carrousel pour identifier le contrôle suivant

.next Utilisé pour aligner les boutons du pager sur le côté droit de la page (bouton suivant)

.page-header Ajoute une ligne horizontale sous l'en-tête (+ ajoute de l'espace supplémentaire autour de l'élément)

.pager Crée les boutons précédent / suivant (utilisé sur les éléments <ul>)

.pagination Crée une pagination (utile lorsque vous avez un site Web avec beaucoup de pages. Utilisé sur les éléments <ul>)

.pagination-lg Grande pagination (chaque lien de pagination a une taille de police de 18px. La valeur par défaut est 14px)

.pagination-sm Petite pagination (chaque lien de pagination a une taille de police de 12px. La valeur par défaut est 14px)

.panel Crée une boîte bordée avec du rembourrage autour de son contenu.

Conteneur .panel-body pour le contenu à l'intérieur du panneau

.panel-collapse Panneau réductible (bascule entre le ou les panneaux masqués ou masqués)

.panel-danger Panneau rouge. Indique un danger

.panel-info Panneau bleu clair. Indique des informations

Panneau vert .panel-success. Indique le succès

.panel-warning Panneau jaune. Indique un avertissement

.panel-footer Crée un pied de page de panneau (couleur d'arrière-plan claire)

.panel-group Utilisé pour regrouper plusieurs panneaux. Cela supprime la marge inférieure sous chaque panneau

.panel-heading Crée un en-tête de panneau (couleur d'arrière-plan claire)

.panel-title Utilisé dans un en-tête .panel pour ajuster le style du texte (supprime les marges et ajoute une taille de police de 16 pixels)

Pop-box .popover qui apparaît lorsque l'utilisateur clique sur un élément

.pre-scrollable Fait défiler un élément <pre> (hauteur maximale de 350 pixels et fournit une barre de défilement de l'axe des ordonnées)

.prev Utilisé dans les carrousels pour indiquer un lien "précédent"


2