Ceci est le site officiel de JdB.CSS.
Les liens externes vers d'autres sites Internet ne devraient pas être interprétés comme une approbation des vues ou la politique de confidentialité qui y sont contenues.
Code sous licence MIT • Documentation sous licence CC BY-NC-SA 4.0
Saisissez un terme pour la recherche...
Classe | Version | Définition |
---|---|---|
jdb-container | 1.0.0 |
|
jdb-panel | 1.0.0 |
|
jdb-tag | 1.0.0 | Crée une étiquette rectangulaire noire. |
jdb-badge | 1.0.0 | Crée un badge circulair noir comme jdb-tag mais en arrondi. |
jdb-display-container | 1.0.0 | Conteneur pour les classes jdb-display-classes (active le positionnement des éléments à l'intérieure du conteneur). |
jdb-block | 1.0.0 | Conteneur de bloc (élément de bloc). |
jdb-code | 1.0.0 | Conteneur de code |
jdb-codespan | 1.0.0 | Conteneur de code sur une ligne |
jdb-content | 1.0.0 | Conteneur pour contenu centré à largeur fixe (largeur max. : 980px). |
jdb-stretch | 1.0.0 | Supprime 16 pixels des marges de droite et de gauche (particulièrement utile pour agrandir les lignes des éléments portant la classe jdb-row-padding ). |
jdb-clear, jdb-clearfix | 1.0.0 | Effacent le flottement des éléments précédents et garantissent que l'élément ciblé occupe tout l'espace disponible dans son conteneur parent. La classe jdb-clear a deux pseudo-classes (::before et ::after ) travailler avant et après l'élément et jdb-clearfix n'en a qu'une (::after ) pour travailer après l'élément. |
Les classe suivantes peuvent être combinées à la classe jdb-table
.
Classe | Version | Définition |
---|---|---|
jdb-table | 1.0.0 | Conteneur pour les éléments table
|
jdb-border | 1.0.0 | Tableau avec bordure extérieure |
jdb-bordered | 1.0.0 | Bordure du bas sur chaque ligne |
jdb-bordered-all | 1.0.0 |
|
jdb-striped | 1.0.0 | Ajoute une couleur d'arrière-plan à chaque ligne paire du tableau. |
jdb-centered | 1.0.0 | Centre le contenu du tableau |
jdb-align-top | 1.1.0 | Aligne verticalement en haut le contenu d'une cellule |
jdb-align-middle | 1.1.0 | Centre verticalement le contenu d'une cellule |
jdb-align-bottom | 1.1.0 | Aligne verticalement en bas le contenu d'une cellule |
jdb-hoverable | 1.0.0 | Tableau survolable. Chaque ligne du tableau change de couleur d'arrière-plan lorsqu'elle est survolée par le curseur. |
jdb-table-all | 1.0.0 | Combine jdb-table avec jdb-striped et jdb-border . Ne pas utiliser en combinaison avec jdb-table . |
jdb-responsive | 1.0.0 | En tant que parent de jdb-table , jdb-responsive rend le tableau responsif afin d'éviter le débordement horizontal. Il peut également être utilisé pour tout autre élément dans le même but, rendre responsif. Similaire à jdb-responsive . |
JdB.CSS fournit quelques classes pour afficher des cartes de type papier avec une ombre portée. La variable x ci-après répresente le niveau de l'ombre portée. Les niveaux possibles sont :
Classe | Version | Définition |
---|---|---|
jdb-card-0 | 1.0.0 | Supprime les ombres portées de n'importe quel élément HTML. |
jdb-card, jdb-card-2 | 1.0.0 | Ajoute une ombre portée à n'importe quel élément HTML (ombre portée de 2 pixels). |
jdb-card-x | 1.0.0 | jdb-card avec une ombre portée de x pixels. |
jdb-card-x-hover | 1.0.0 | jdb-card avec une ombre portée de x pixels lorsque l'élément est survolé par le curseur. |
Bien qu'il soit possible d'ajouter autant de colonnes que vous le souhaitez, il est recommandé de s'en tenir à 12 colonnes. Si vous voulez des découpages plus petits, vous pouvez toujours imbriquer des colonnes.
Classe | Version | Définition |
---|---|---|
jdb-half | 1.0.0 | Conteneur divisé en 2 colonnes (1/2) - (style="width:50%" ) |
jdb-third | 1.0.0 | Conteneur divisé en 3 colonnes (1/3) - (style="width:33.33%" ) |
jdb-twothird | 1.0.0 | Conteneur divisé en 2/3 - (style="width:66.66%" ) |
jdb-quarter | 1.0.0 | Conteneur divisé en 4 colonnes (1/4) - (style="width:25%" ) |
jdb-threequarter | 1.0.0 | Conteneur divisé en 3/4 - (style="width:75%" ) |
jdb-col | 1.0.0 | Conteneur de colonnes pour tout contenu HTML |
jdb-rest | 1.0.0 | Occupe le reste de la largeur de colonne |
jdb-mobile | 1.0.0 | Ajoute la responsivité mobile-first à n'importe quel élément. Affiche les éléments sous forme d'éléments de bloc sur les appareils mobiles. |
Les classes réactives ci-dessus doivent être placées dans un élément parent ayant la classe jdb-row
ou jdb-row-padding
pour être entièrement réactives.
Classe | Version | Définition |
---|---|---|
jdb-row | 1.0.0 | Conteneur pour une rangée des éléments responsifs sans marge. |
jdb-row-padding | 1.0.0 | jdb-row avec marge intérieure par défaut. |
jdb-margin-auto | 1.0.0 | Conteneur pour un contenu responsive centré sur la largeur. |
jdb-stretch | 1.0.0 | Supprime 16 pixels des marges de droite et de gauche (particulièrement utile pour agrandir les lignes des éléments portant la classe jdb-row-padding ). |
l1 - l12 | 1.0.0 | Taille responsive pour les écrans larges. Sous-classes de jdb-col |
m1 - m12 | 1.0.0 | Taille responsive pour les écrans moyens. Sous-classes de jdb-col |
s1 - s12 | 1.0.0 | Taille responsive pour les petits écrans. Sous-classes de jdb-col |
jdb-hide-small | 1.0.0 | Masque le contenu sur des petits écrans (moins de 601 pixels) |
jdb-hide-medium | 1.0.0 | Masque le contenu sur des écrans moyens |
jdb-hide-large | 1.0.0 | Masque le contenu sur des petits écrans larges (plus de 992 pixels) |
jdb-image | 1.0.0 | Rend une image responsive |
jdb-responsive | 1.0.0 | Voir la description. |
jdb-ov-x-scroll | 1.0.0 | Affiche automatiquement la barre de défilement horizontale d'un élément. |
jdb-ov-y-scroll | 1.0.0 | Affiche automatiquement la barre de défilement verticale d'un élément. |
jdb-ov-x-hidden | 1.0.0 | Masque la barre de défilement horizontale d'un élément. Similaire à jdb-ov-x-scroll . |
jdb-ov-y-hidden | 1.0.0 | Masque la barre de défilement verticale d'un élément. |
jdb-resizable | 1.0.0 | Permet à un élément d'être redimensionné par l'utilisateur dans les deux axes (x et y). Peut être utilisée pour rédimensionner le champ de texte textarea ou d'autres éléments. Attention : Ces redimensionnements ne s'appliquent que sur les éléments blocs. |
jdb-resizable-x | 1.0.0 | Permet à un élément d'être redimensionné par l'utilisateur dans l'axe x. |
jdb-resizable-y | 1.0.0 | Permet à un élément d'être redimensionné par l'utilisateur dans l'axe y. |
JdB.CSS a 4 points d'arrêts :
600px
601px
et 992px
993px
Classe | Version | Définition |
---|---|---|
jdb-cell-row | 1.0.0 | Conteneur pour les colonnes (cellules). |
jdb-cell | 1.0.0 | Colonne / cellule |
jdb-cell-top | 1.0.0 | Aligne le contenu en haut d'une colonne / cellule |
jdb-cell-middle | 1.0.0 | Centre verticalement le contenu d'une colonne / cellule |
jdb-cell-bottom | 1.0.0 | Aligne le contenu en bas d'une colonne / cellule |
flex
)Classe | Version | Définition |
---|---|---|
jdb-flex | 1.2.0 | Transforme le conteneur en flex, ce qui organise ses enfants en lignes ou en colonnes pour une mise en page flexible. |
jdb-flex-inline | 1.2.0 | Transforme le conteneur en flex de type inline, lui permettant de s'ajuster à son contenu en ligne, plutôt qu'en bloc. |
jdb-flex-row | 1.2.0 | Transforme le conteneur en flex de type ligne. Utilisez cette classe pour positionner les éléments flexibles horizontalement dans la même direction que le texte. |
jdb-flex-row-reverse | 1.2.0 | Transforme le conteneur en flex de type ligne inversée. |
jdb-flex-column | 1.2.0 | Transforme le conteneur en flex de type colonne. |
jdb-flex-column-reverse | 1.2.0 | Transforme le conteneur en flex de type colonne inversée. |
jdb-flex-nowrap | 1.2.0 | Spécifie que les éléments enfants ne doivent pas être forcés à s'ajuster à une ligne ou à une colonne. Peut laisser place à un débordement s'il y a des éléments non flexibles. |
jdb-flex-wrap | 1.2.0 | Le conteneur est flexible et multiligne. |
jdb-flex-wrap-reverse | 1.2.0 | Le conteneur est flexible et multiligne inversée. |
jdb-flex-start | 1.2.0 | Aligne les éléments enfants au début du conteneur. |
jdb-flex-end | 1.2.0 | Aligne les éléments enfants à la fin du conteneur. |
jdb-flex-center | 1.2.0 | Centre sur l'axe horizontal et vertical les éléments enfants dans le conteneur. |
jdb-flex-center-x | 1.2.0 | Centre les éléments enfants dans le conteneur sur l'axe horizontal. |
jdb-flex-center-y | 1.2.0 | Centre les éléments enfants dans le conteneur sur l'axe vertical. |
jdb-flex-center-stretch | 1.2.0 | Étire les éléments enfants dans le conteneur pour les centrer sur l'axe vertical. Sa valeur utilisée est la longueur nécessaire pour que la taille croisée de la zone de marge de l'élément soit aussi proche que possible de la même taille que la ligne, tout en respectant les contraintes imposées par min-height /min-width /max-height /max-width . |
jdb-flex-space-between | 1.2.0 | Les éléments enfants sont répartis avec un espace égal entre eux. Il n'y a pas d'espace avant le premier élément et après le dernier élément. |
jdb-flex-around | 1.2.0 | Les éléments enfants sont répartis avec un espace égal autour d'eux. Il y a un espace avant le premier élément et après le dernier élément, mais ils sont deux fois plus petits que l'espace entre les éléments. |
jdb-flex-evenly | 1.2.0 | Les éléments enfants sont répartis avec un espace égal autour d'eux. L'espace avant le premier élément et après le dernier élément ont la même taille que l'espace entre les éléments. |
jdb-flex-item-grow | 1.2.0 | S'applique sur les éléments dont le parent est flex. Spécifie combien un élément enfant doit grandir par rapport aux autres éléments enfants. Si vous avez besoin d'une valeur particulière, veuillez la définir par vous-même. |
jdb-flex-item-grow-0 | 1.2.0 | S'applique sur les éléments dont le parent est flex. Empêche un élément flexible de s'agrandir. |
jdb-flex-item-shrink | 1.2.0 | S'applique sur les éléments dont le parent est flex. Permet à un élément flexible de rétrécir si nécessaire. |
jdb-flex-item-shrink-0 | 1.2.0 | S'applique sur les éléments dont le parent est flex. Empêche un élément flexible de rétrécir. |
jdb-order-{0-12} | 1.2.0 | Utilisez une de ces classes pour afficher les éléments flex et grid dans un ordre différent de celui dans lequel ils apparaissent dans le DOM. |
jdb-order-first | 1.2.0 | Utilisez cette classe pour afficher un élément flex et grid en premier, indépendamment de son ordre dans le DOM. |
jdb-order-last | 1.2.0 | Utilisez cette classe pour afficher un élément flex et grid en dernier, indépendamment de son ordre dans le DOM. |
jdb-order-none | 1.2.0 | Utilisez cette classe pour afficher un élément flex et grid dans l'ordre dans lequel il apparaît dans le DOM. |
Classe | Version | Définition |
---|---|---|
jdb-bar | 1.0.0 | Barre horizontale |
jdb-bar-block | 1.0.0 | Barre verticale |
jdb-bordered-items | 1.1.0 | Met une bordure aux éléments jdb-bar-item contenus dans jdb-bar |
jdb-bar-item | 1.0.0 | Fournit un style commun pour les éléments de la barre |
jdb-sidebar | 1.0.0 | Une barre latérale peut :
|
jdb-collapse | 1.0.0 | Utilisé avec la jdb-sidebar pour créer une navigation latérale entièrement et automatique responsif. Pour que cette classe fonctionne, le contenu de la page doit se trouver dans une classe jdb-main . |
jdb-main | 1.0.0 |
|
jdb-sidenav | 1.0.0 | Crée une barre de navigation latérale avec des liens et des menus déroulants (.jdb-dropdown ). |
jdb-navbar | 1.0.0 | Conteneur d'une simple barre de navigation. Peut contenir des jdb-navitem et/ou .jdb-dropdown . |
jdb-navitem | 1.0.0 | Élément de la barre de navigation. Doit être un élément li , et cet élément li contiendra le lien de navigation. |
jdb-accordion | 1.0.0 | Conteneur de toutes les classes commençant par "jdb-accordion". Un élément d'accordéon peut être utilisé pour afficher / masquer du contenu. Possède le même comportement que l'élément details . Vous devez créer l'action click avec JavaScript. |
jdb-accordion-hover | 1.0.0 | Similaire à jdb-accordion , mais avec un effet de survol. Il suffira de survoler l'élément jdb-accordion-title pour deployer le conteneur jdb-accordion-content . |
jdb-accordion-title | 1.0.0 | Titre de l'élément d'accordéon. |
jdb-accordion-content | 1.0.0 | Contenu de l'élément d'accordéon. |
Les classes de liste peuvent être utilisées pour afficher des éléments dans une liste verticale avec un style particulier.
Classe | Version | Définition |
---|---|---|
jdb-ol | 1.0.0 | List ordonnée (avec numérotation et sans bordure). |
jdb-ul | 1.0.0 | List non-ordonnée (sans bullet), avec bordure comme séparateur des lignes. Peut porter la classe jdb-striped pour afficher des lignes rayées. |
jdb-ul-all | 1.0.0 | List non-ordonnée comme jdb-ul , mais avec un changement d'arrière-plan au survol des éléments de la liste. De plus, ces éléments sont rayés en impair par défaut. |
Classe | Version | Définition |
---|---|---|
jdb-dropdown-click | 1.0.0 | Élément de la liste déroulante cliquable |
jdb-dropdown-hover | 1.0.0 | Un élément déroulant hoverable peut être utilé dans :
|
jdb-dropdown-content | 1.0.0 | Contenu de la liste déroulante |
Classe | Version | Définition |
---|---|---|
jdb-button | 1.0.0 | Bouton rectangulaire avec fond gris au survol du curseur |
jdb-btn | 1.0.0 | Bouton rectangulaire avec une ombre portée au survol du curseur |
jdb-btn-link | 1.1.0 | Lien hypertexte du style d'un bouton rectangulaire (jdb-button ) avec arrière-plan transparent |
jdb-circle | 1.0.0 | Peut être utilisé pour créer un bouton circulaire |
jdb-bar | 1.0.0 | Peut être utilisé comme parent pour regrouper des éléments (comme des boutons) dans une barre horizontale. |
jdb-btn-block | 1.0.0 | Similaire à jdb-btn mais avec une largeur de 100%. |
jdb-ripple | 1.1.0 | Ajoute un effet au clique d'un élément |
Classe | Version | Définition |
---|---|---|
jdb-label | 1.0.0 | Classe pour les étiquettes (label ) des éléments inputs d'un formulaire. |
jdb-label-required | 1.1.0 | Ajoute une astérisque aux étiquettes portant la classe jdb-label Attention : Cette classe ne remplace pas l'attribut required qui rend une input obligatoire. |
jdb-input | 1.0.0 | Classe pour les champs de texte (<input> , <textarea> ). Par défaut en pleine largeur.Types pris en charge : tel, search, password, url, text, email, number, date, month, time, week, datetime-local, file et color. |
jdb-input-all | 1.0.0 | Idem que jdb-input mais en plus stylé, avec toutes les options de :hover et de :focus . |
jdb-inputs-all | 1.0.0 | Classe du conteneur. Applique le style jdb-input-all à tous les éléments du formulaire contenu dans ce conteneur. |
jdb-input-group | 1.0.0 | Conteneur pour grouper les éléments d'un formulaire. Ajoute une marge supérieure et inférieure de 24px. |
jdb-check | 1.0.0 | Champ du type checkbox |
jdb-radio | 1.0.0 | Champ du type radio |
jdb-select | 1.0.0 | Champ pour l'element select |
jdb-select-all | 1.0.0 | Idem que jdb-select mais en plus stylé. |
jdb-animate-input | 1.0.0 | Anime la largeur d'un champ de texte de x% à 100%. |
jdb-focusable | 1.0.0 | Classe pour les éléments focalisables (input , textarea , button , select et [tabindex=">0"] ). L'élément sur lequel est appliquée cette classe aura un style particulier lorsqu'il est en état :focus . |
jdb-focusable-inputs | 1.0.0 | Classe pour les conteneurs d'éléments du formulaire. Tous les éléments du formulaire ayant une des classes d'éléments du formulaire JdB.CSS de ce conteneur auront un style particulier lorsqu'ils sont :focus . |
jdb-focusable-buttons | 1.0.0 | Classe pour les conteneurs des boutons. Tous les boutons enfants ayant les classes des boutons JdB.CSS auront un style particulier lorsqu'ils sont :focus . |
jdb-disabled | 1.0.0 | Marque un champ de texte comme désactivé. |
jdb-disabled + jdb-label | 1.1.0 | Un élément label précédé d'un élément input , textarea ou select portant la classe jdb-disabled a automatiquement une faible opacité en raison du champ qui est désactivé. |
jdb-check + jdb-label, jdb-radio + jdb-label, jdb-label > jdb-check, jdb-label > jdb-radio | 1.2.0 | Un élément label contenant ou précédé d'un élément input[type=radio] ou input[type=checkbox] bénéficie d'une petite marge de 6px à gauche. |
Classe | Version | Définition |
---|---|---|
jdb-modal | 1.0.0 | Conteneur du pop-up (cette fenêtre en superposition). |
jdb-modal-content | 1.0.0 | L'élément pop-up. Le contenu du pop-up sera placé ici. |
jdb-overlay | 1.0.0 | Crée un cadre sombre et légèrement transparent en superposition, en pleine page. |
jdb-tooltip | 1.0.0 | Elément en info-bulle simple |
jdb-text | 1.0.0 | Contenu de l'info-bulle |
Classe | Version | Définition |
---|---|---|
jdb-animate-top | 1.0.0 | Anime un élément en le deplaçant de -300 pixels du haut à 0 pixel |
jdb-animate-left | 1.0.0 | Anime un élément en le deplaçant de -300 pixels de gauche à 0 pixel |
jdb-animate-bottom | 1.0.0 | Anime un élément en le deplaçant de -300 pixels du bas à 0 pixel |
jdb-animate-right | 1.0.0 | Anime un élément en le deplaçant de -300 pixels de gauche à 0 pixel |
jdb-animate-opacity | 1.0.0 | Anime l'opacité d'un élément de 0 à 1 |
jdb-animate-zoom | 1.0.0 | Anime la taille d'un élément de 0 à 100% (effet de zoom) |
jdb-animate-fading | 1.0.0 | Anime en continu (clignote) l'opacité d'un élément de 0 à 1 et de 1 à 0 (fondu en entrée et en sortie) |
jdb-spin | 1.0.0 |
|
jdb-animate-input | 1.0.0 | Anime la largeur d'un champ de texte (input et textarea ) d'une taille défini (ex: width:60% ou width:50px ) à 100% |
Classe | Version | Définition |
---|---|---|
jdb-tiny | 1.0.0 | Spécifie une taille de police de 10 pixels |
jdb-small jdb-sm | 1.0.0 | Spécifie une taille de police de 12 pixels |
jdb-large jdb-lg | 1.0.0 | Spécifie une taille de police de 18 pixels |
jdb-xlarge jdb-xl | 1.0.0 | Spécifie une taille de police de 24 pixels |
jdb-xxlarge jdb-xxl | 1.0.0 | Spécifie une taille de police de 32 pixels |
jdb-xxxlarge jdb-xxxl | 1.0.0 | Spécifie une taille de police de 48 pixels |
jdb-jumbo | 1.0.0 | Spécifie une taille de police de 64 pixels |
jdb-wide | 1.0.0 | Spécifie un texte plus large en espaçant légèrement les lettres |
jdb-tight | 1.1.0 | Spécifie un texte moins large en reduisant légèrement les espaces entre les lettres. |
jdb-serif | 1.0.0 | Change le type de police en utilisant une police basique avec empattement (sérif). |
jdb-sans-serif | 1.2.0 | Change le type de police en utilisant une série de polices basiques sans empattement (sérif). |
jdb-monospace | 1.0.0 | Change le type de police en utilisant une police à chasse fixe (pour du code par exemple). |
jdb-text-decoration-0 | 1.0.0 | Annule les décorations du texte d'un élément |
jdb-text-decoration-all-0 | 1.0.0 | Pour les conteneurs. Annule les décorations du texte de tous les éléments contenus par le conteneur portant cette classe. |
jdb-text-shadow | 1.0.0 | Ajoute une simple ombre portée au texte |
jdb-text-shadow-0 | 1.1.0 | Enleve de l'ombre portée au texte |
jdb-text-shadow-multiple, jdb-text-shadow-multiple-light | 1.0.0 | Ajoute une ombre portée claire à deux niveaux au texte (pour un texte sombre et arrière-plan clair). |
jdb-text-shadow-dark | 1.0.0 | Ajoute une ombre portée sombre à deux niveaux au texte (pour texte clair et arrière-plan sombre). |
jdb-bold | 1.0.0 | Met le texte en gras |
jdb-italic | 1.1.0 | Met le texte en italique |
jdb-underline | 1.1.0 | Souligne me texte |
jdb-strike | 1.1.0 | Barre le texte |
jdb-lowercase | 1.0.0 | Met le texte en miniscule |
jdb-uppercase | 1.0.0 | Met le texte en majuscule |
jdb-ellips | 1.0.0 | Affiche une ellipse ('…') pour représenter le texte rogné. L'ellipse est affichée à l'intérieur du conteneur et réduit donc la quantité de texte affichée. S'il n'y a pas assez de place pour afficher l'ellipse, celui-ci est rognée. |
jdb-clamp | 1.2.0 | Limite l'affichage du contenu d'un bloc à un nombre donné de lignes en affichant une ellipse ('…') pour représenter le texte rogné (s'il y en a). Doit être accompagnée de la classe l2, l3, l4, l5 ou l6 (pour 6 lignes). Si vous souhaitez ne rogner que jusqu'à une ligne max, la classe jdb-ellips est là pour ça.Introduit à la version 1.1.0, mais n'était pas fonctionnelle jusqu'à la version 1.2.0. |
jdb-wrap | 1.0.0 | Fait des passages des textes à la ligne, sans césure pour remplir les conteneur. |
jdb-nowrap | 1.0.0 | Similaire à jdb-wrap mais sans les passages à la ligne automatiques. |
jdb-word-wrap | 1.2.0 | Contrairement à jdb-nowrap , jdb-word-wrap permet les passages à la ligne automatiques pour éviter le débordement du texte. |
jdb-text-balance | 1.3.1 | Équilibre le texte en répartissant le nombre de caractères sur chaque ligne, améliorant ainsi la qualité et la lisibilité de la mise en page. |
jdb-text-pretty | 1.3.1 | Idem que jdb-text-balance mais avec un meilleur rendu. Elle permet d'éviter les orphelins et surtout à la fin de longs blocs de texte, c'est-à-dire les mots seuls sur une ligne. |
jdb-text-color | 1.0.0 | Définie la couleur de texte |
jdb-hover-text-color | 1.0.0 | Définie la couleur de texte au survol du curseur |
jdb-unselectable | 1.0.0 | Empêche la sélection du texte |
Classe | Version | Définition |
---|---|---|
jdb-center | 1.0.0 | Centre le texte et les images d'un élément |
jdb-left | 1.0.0 | Fais flotter un élément vers la gauche (float: left ) |
jdb-right | 1.0.0 | Fais flotter un élément vers la droite (float: right ) |
jdb-left-align | 1.0.0 | Aligne le texte à gauche |
jdb-right-align | 1.0.0 | Aligne le texte à droite |
jdb-justify, jdb-text-justify | 1.0.0 | Aligne le texte à gauche et à droite, justifie le texte. |
jdb-block | 1.0.0 | Définie une largeur totale pour n'importe quel élément, rend block un élément inline-block ou autre. |
jdb-circle | 1.0.0 | Contenu encerclé, arrondi. |
jdb-hide | 1.0.0 | Contenu caché (display: none ) |
jdb-hide-empty | 1.2.0 | Masque l'élément n'ayant pas de contenu (enfants). Remarque : S'il y a du contenu à un moment donné, l'élément sera affiché. |
jdb-show | 1.0.0 | Affiche le contenu (display: block ) |
jdb-show-block | 1.0.0 | Similaire à jdb-block ({ display: block; width: 100% } ) |
jdb-show-inline-block | 1.0.0 | Affiche un élément en ligne (display: inline-block ) |
jdb-top | 1.0.0 | Fixe l'élément en haut de la page (ex. : barre de navigation) |
jdb-bottom | 1.0.0 | Fixe l'élément en bat de la page (ex. : pied de page fixé) |
jdb-display-container | 1.0.0 | Conteneur pour jdb-display-classes (position: relative ) |
jdb-display-position | 1.0.0 | Enfant de jdb-display-container . Affiche l'élément à la position spécifiée dans jdb-display-container . |
jdb-display-topleft | 1.0.0 | Afficihe le contenu en haut à gauche de jdb-display-container |
jdb-display-topright | 1.0.0 | Afficihe le contenu en haut à droite de jdb-display-container |
jdb-display-bottomleft | 1.0.0 | Afficihe le contenu en bas à gauche de jdb-display-container |
jdb-display-bottomright | 1.0.0 | Afficihe le contenu en bas à droite de jdb-display-container |
jdb-display-left | 1.0.0 | Centre le contenu verticalement à gauche de jdb-display-container |
jdb-display-right | 1.0.0 | Centre le contenu verticalement à droite de jdb-display-container |
jdb-display-middle | 1.0.0 | Centre le contenu verticalement et horizontalement dans jdb-display-container |
jdb-display-topmiddle | 1.0.0 | Centre le contenu horizontalement en haut de jdb-display-container |
jdb-display-bottommiddle | 1.0.0 | Centre le contenu horizontalement en bas de jdb-display-container |
jdb-display-hover | 1.0.0 | Va avec jdb-display-container . Affiche le contenu de jdb-display-container au survol du curseur. |
jdb-flex | 1.2.0 | Définit un conteneur flexible pour jdb-flex-classes (display: flex ). |
jdb-flex-center-x | 1.2.0 | Centre le contenu horizontalement dans un conteneur. | jdb-flex-center-y | 1.2.0 | Centre le contenu verticalement dans un conteneur. |
jdb-flex-center | 1.0.0 | Centre le contenu horizontalement et verticalement dans un conteneur. C'est une combinaison de jdb-flex-center-x et jdb-flex-y . |
Classe | Version | Définition |
---|---|---|
jdb-opacity | 1.0.0 | Ajoute de l'opacité/transparence (opacity: 0.6 - 60%)
|
jdb-opacity-off | 1.0.0 | Enleve l'opacité/transparence d'un élément (opacity: 1 - 100%) |
jdb-opacity-min | 1.0.0 | Identique à jdb-opacity mais avec une opacité de 0.75 (75%) |
jdb-opacity-max | 1.0.0 | Identique à jdb-opacity mais avec une opacité de 0.25 (25%) |
jdb-grayscale, jdb-greyscale | 1.0.0 | Ajoute un filtre de niveau de gris à un élément (grayscale: 75% ) |
jdb-grayscale-min, jdb-greyscale-min | 1.0.0 | Similaire à jdb-grayscale mais à 50% (grayscale: 50% ) |
jdb-grayscale-max, jdb-greyscale-max | 1.0.0 | Similaire à jdb-grayscale mais à 100% (grayscale: 100% ) |
jdb-sepia | 1.0.0 | Ajoute un filtre sépia à un élément (sepia: 75% ) |
jdb-sepia-min | 1.0.0 | Similaire à jdb-sepia mais à 50% (sepia: 50% ) |
jdb-sepia-max | 1.0.0 | Similaire à jdb-sepia mais à 100% (sepia: 100% ) |
jdb-blur | 1.2.0 | Ajoute un flou à un élément (blur: 3px ). |
jdb-blur-min | 1.2.0 | Similaire à jdb-blur mais avec 1px de flou. |
jdb-blur-max | 1.2.0 | Similaire à jdb-blur mais avec 5px de flou. |
Voir les effets de survol | ||
jdb-overlay | 1.0.0 | Voir la description. |
Classe | Version | Définition |
---|---|---|
jdb-red | 1.0.0 | Arrière-plan en rouge |
jdb-pink | 1.0.0 | Arrière-plan en rose |
jdb-purple | 1.0.0 | Arrière-plan en violet |
jdb-deep-purple | 1.0.0 | Arrière-plan en violet foncé |
jdb-indigo | 1.0.0 | Arrière-plan en indigo |
jdb-blue | 1.0.0 | Arrière-plan en bleu |
jdb-light-blue | 1.0.0 | Arrière-plan en bleu clair |
jdb-cyan | 1.0.0 | Arrière-plan en cyan |
jdb-aqua | 1.0.0 | Arrière-plan en aqua |
jdb-teal | 1.0.0 | Arrière-plan en sarcelle |
jdb-green | 1.0.0 | Arrière-plan en vert |
jdb-light-green | 1.0.0 | Arrière-plan en vert clair |
jdb-lime | 1.0.0 | Arrière-plan en vert citron |
jdb-sand | 1.0.0 | Arrière-plan en sable |
jdb-khaki | 1.0.0 | Arrière-plan en kaki |
jdb-yellow | 1.0.0 | Arrière-plan en jaune |
jdb-amber | 1.0.0 | Arrière-plan en ambre |
jdb-orange | 1.0.0 | Arrière-plan en orange |
jdb-deep-orange | 1.0.0 | Arrière-plan en orange foncé |
jdb-blue-grey | 1.0.0 | Arrière-plan en bleu gris |
jdb-brown | 1.0.0 | Arrière-plan en marron |
jdb-light-grey | 1.0.0 | Arrière-plan en gris clair |
jdb-grey | 1.0.0 | Arrière-plan en gris |
jdb-dark-grey | 1.0.0 | Arrière-plan en gris foncé |
jdb-black | 1.0.0 | Arrière-plan en noir |
jdb-pale-red | 1.0.0 | Arrière-plan en rouge pâle |
jdb-pale-yellow | 1.0.0 | Arrière-plan en jaune pâle |
jdb-pale-green | 1.0.0 | Arrière-plan en vert pâle |
jdb-pale-blue | 1.0.0 | Arrière-plan en bleu pâle |
jdb-transparent | 1.0.0 | Arrière-plan transparent |
jdb-striped | 1.0.0 | Ajoute un style de rayure en combinaison avec les classes suivantes pour :
|
Les couleurs ci-dessus peuvent également être utilisées lors du survol du curseur à l'aide des classes ci-après :
Classe | Version | Définition |
---|---|---|
jdb-hover-red | 1.0.0 | Arrière-plan rouge au survole |
jdb-hover-pink | 1.0.0 | Arrière-plan rose au survole |
jdb-hover-purple | 1.0.0 | Arrière-plan violet au survole |
jdb-hover-deep-purple | 1.0.0 | Arrière-plan violet foncé au survole |
jdb-hover-indigo | 1.0.0 | Arrière-plan indigo au survole |
jdb-hover-blue | 1.0.0 | Arrière-plan bleu au survole |
jdb-hover-light-blue | 1.0.0 | Arrière-plan bleu clair au survole |
jdb-hover-aqua | 1.0.0 | Arrière-plan aqua au survole |
jdb-hover-teal | 1.0.0 | Arrière-plan sarcelle au survole |
jdb-hover-cyan | 1.0.0 | Arrière-plan cyan au survole |
jdb-hover-green | 1.0.0 | Arrière-plan vert au survole |
jdb-hover-light-green | 1.0.0 | Arrière-plan vert clair au survole |
jdb-hover-lime | 1.0.0 | Arrière-plan vert citron au survole |
jdb-hover-sand | 1.0.0 | Arrière-plan sable au survole |
jdb-hover-khaki | 1.0.0 | Arrière-plan kaki au survole |
jdb-hover-yellow | 1.0.0 | Arrière-plan jaune au survole |
jdb-hover-amber | 1.0.0 | Arrière-plan ambre au survole |
jdb-hover-orange | 1.0.0 | Arrière-plan orange au survole |
jdb-hover-deep-orange | 1.0.0 | Arrière-plan orange foncé au survole |
jdb-hover-blue-gray | 1.0.0 | Arrière-plan bleu gris au survole |
jdb-hover-brown | 1.0.0 | Arrière-plan marron au survole |
jdb-hover-light-gray | 1.0.0 | Arrière-plan gris clair au survole |
jdb-hover-gray | 1.0.0 | Arrière-plan gris au survole |
jdb-hover-dark-gray | 1.0.0 | Arrière-plan gris foncé au survole |
jdb-hover-black | 1.0.0 | Arrière-plan noir au survole |
jdb-hover-pale-red | 1.0.0 | Arrière-plan rouge pâle au survole |
jdb-hover-pale-yellow | 1.0.0 | Arrière-plan jaune pâle au survole |
jdb-hover-pale-green | 1.0.0 | Arrière-plan vert pâle au survole |
jdb-hover-pale-blue | 1.0.0 | Arrière-plan blue pâle au survole |
jdb-hover-white | 1.0.0 | Arrière-plan blanc au survole |
jdb-hover-transparent | 1.0.0 | Arrière-plan transparent au survole |
Classe | Version | Définition |
---|---|---|
jdb-text-red | 1.0.0 | Texte en rouge |
jdb-text-green | 1.0.0 | Texte en vert |
jdb-text-blue | 1.0.0 | Texte en bleu |
jdb-text-yellow | 1.0.0 | Texte en jaune |
jdb-text-light-gray, jdb-text-light-grey | 1.0.0 | Texte en gris clair |
jdb-text-gray, jdb-text-grey | 1.0.0 | Texte en gris |
jdb-text-dark-gray, jdb-text-dark-grey | 1.0.0 | Texte en gris foncé |
jdb-text-black | 1.0.0 | Texte en noir |
jdb-text-white | 1.0.0 | Texte en blanc |
jdb-text-pink | 1.0.0 | Texte en rose |
jdb-text-purple | 1.0.0 | Texte en violet |
jdb-text-teal | 1.0.0 | Texte en sarcelle |
jdb-text-light-green | 1.0.0 | Texte en vert clair |
jdb-text-lime | 1.0.0 | Texte en vert citron |
jdb-text-deep-purple | 1.0.0 | Texte en violet foncé |
jdb-text-indigo | 1.0.0 | Texte en indigo |
jdb-text-light-blue | 1.0.0 | Texte en bleu clair |
jdb-text-blue-grey | 1.0.0 | Texte en bleu gris |
jdb-text-cyan | 1.0.0 | Texte en cyan |
jdb-text-aqua | 1.0.0 | Texte en aqua |
jdb-text-amber | 1.0.0 | Texte en ambre |
jdb-text-orange | 1.0.0 | Texte en orange |
jdb-text-deep-orange | 1.0.0 | Texte en orange foncé |
jdb-text-sand | 1.0.0 | Texte en sable |
jdb-text-khaki | 1.0.0 | Texte en kaki |
jdb-text-brown | 1.0.0 | Texte en marron |
Les couleurs ci-dessus peuvent également être utilisées lors du survol du curseur à l'aide des classes ci-après :
Classe | Version | Définition |
---|---|---|
jdb-hover-text-red | 1.0.0 | Texte en rouge au survole |
jdb-hover-text-green | 1.0.0 | Texte en vert au survole |
jdb-hover-text-blue | 1.0.0 | Texte en bleu au survole |
jdb-hover-text-yellow | 1.0.0 | Texte en jaune au survole |
jdb-hover-text-light-gray, jdb-hover-text-light-grey | 1.0.0 | Texte en gris clair au survole |
jdb-hover-text-gray, jdb-hover-text-grey | 1.0.0 | Texte en gris au survole |
jdb-hover-text-dark-gray, jdb-hover-text-dark-grey | 1.0.0 | Texte en gris foncé au survole |
jdb-hover-text-black | 1.0.0 | Texte en noir au survole |
jdb-hover-text-white | 1.0.0 | Texte en blanc au survole |
jdb-hover-text-amber | 1.0.0 | Texte en ambre au survole |
jdb-hover-text-aqua | 1.0.0 | Texte en aqua au survole |
jdb-hover-text-light-blue | 1.0.0 | Texte en bleu clair au survole |
jdb-hover-text-brown | 1.0.0 | Texte en marron au survole |
jdb-hover-text-cyan | 1.0.0 | Texte en cyan au survole |
jdb-hover-text-blue-gray, jdb-hover-text-blue-grey | 1.0.0 | Texte en bleu gris au survole |
jdb-hover-text-light-green | 1.0.0 | Texte en vert clair au survole |
jdb-hover-text-indigo | 1.0.0 | Texte en indigo au survole |
jdb-hover-text-khaki | 1.0.0 | Texte en kaki au survole |
jdb-hover-text-lime | 1.0.0 | Texte en vert citron au survole |
jdb-hover-text-orange | 1.0.0 | Texte en orange au survole |
jdb-hover-text-deep-orange | 1.0.0 | Texte en orange foncé au survole |
jdb-hover-text-pink | 1.0.0 | Texte en rose au survole |
jdb-hover-text-purple | 1.0.0 | Texte en violet au survole |
jdb-hover-text-deep-purple | 1.0.0 | Texte en violet foncé au survole |
jdb-hover-text-sand | 1.0.0 | Texte en sable au survole |
jdb-hover-text-teal | 1.0.0 | Texte en sarcelle au survole |
:hover
)Classe | Version | Définition |
---|---|---|
jdb-hover-border-color | 1.0.0 | Couleur de la bordure au survol (rouge, vert, bleu, jaune, gris, noir et blanc) |
jdb-hover-opacity | 1.0.0 | Ajoute de la transparence à un élément au survol (opacity: 0.6 - 60%) |
jdb-hover-opacity-off | 1.0.0 | Supprime la transparence d'un élément au survol (opacity: 1 - 100%) |
jdb-hover-blur-off | 1.0.0 | Supprime le flou d'un élément au survol (filter: blur(0px) ) |
jdb-hover-shadow | 1.0.0 | Ajoute de l'ombre portée à un élément au survol |
jdb-hover-grayscale | 1.0.0 | Ajoute un effet noir et blanc (100% niveaux de gris) à un élément au survol |
jdb-hover-sepia | 1.0.0 | Ajoute un effet sépia à un élément en survol |
jdb-hover-none jdb-hover-card-0 | 1.0.0 1.1.0 | Supprime les effets de survol (ombre portée) d'un élément |
Plus de classes d'effets | 1.0.0 |
Classe | Version | Définition |
---|---|---|
jdb-hr | 1.0.0 | Ajoute une ligne horizontale de 2 pixel. S'utilise uniquement avec l'élément hr . |
jdb-separator jdb-separator-y | 1.2.0 | Ajoute une ligne de séparation entre deux éléments. Empile les éléments sur un axe vertical. Similaire à jdb-hr lorsque l'élément est vide. |
jdb-separator-x | 1.2.0 | Ajoute une ligne de séparation entre deux éléments. Enchaîne les éléments sur un axe horizontal. Remarque : Il est important d'englober les éléments à séparer par un parent portant la classe jdb-responsive pour éviter les débordements. |
Classe | Version | Définition |
---|---|---|
jdb-border | 1.0.0 | Ajoute toutes les bordures (haut, droite, bas, gauche) de 1 pixel à un élément |
jdb-border-top | 1.0.0 | Bordure du haut |
jdb-border-right | 1.0.0 | Bordure de droite |
jdb-border-bottom | 1.0.0 | Bordure du bas |
jdb-border-left | 1.0.0 | Bordure de gauche |
jdb-border-0 jdb-border-none | 1.0.0 | Supprime toutes les bordures |
jdb-border-w0 | 1.0.0 | Réduit l'épaisseur des bordures à 0 |
jdb-border-wx | 1.1.0 | Donne l'épaisseur x à toutes les bordures d'un élément (tailles disponibles : 1, 2, 3, 4, 5)
|
jdb-border-dotted | 1.1.0 | Met le style pointillé à toutes les bordures |
jdb-border-dashed | 1.1.0 | Met le style rayé à toutes les bordures |
jdb-border-solid | 1.1.0 | Met le style rempli à toutes les bordures |
jdb-border-color | 1.0.0 | Affiche toutes les bordures définies dans une couleur spécifiée (red, green, blue, yellow, gray, grey, black et white). |
jdb-border-transparent | 1.2.0 | Rend transparentes toutes les bordures définies. |
jdb-hover-border-color | 1.0.0 | Couleur de la bordure au survol (red, green, blue, yellow, gray, grey, black et white) |
jdb-hover-border-transparent | 1.2.0 | Rend transparentes toutes les bordures définies au survol. |
jdb-bottombar | 1.0.0 | Ajoute une bordure épaisse en dessous d'un élément |
jdb-leftbar | 1.0.0 | Ajoute une bordure épaisse à gauche d'un élément |
jdb-rightbar | 1.0.0 | Ajoute une bordure épaisse à droite d'un élément |
jdb-topbar | 1.0.0 | Ajoute une bordure épaisse au dessus d'un élément |
jdb-round-position | 1.0.0 | Élément arrondi de 4 pixels à la position indiquée
|
jdb-round-position-x | 1.0.0 | Élément arrondi de x pixels à la position indiquée (x désigne la taille)
|
jdb-round-position-0, jdb-round-position-none | 1.0.0 | Supprime les arrondissements de bordures d'un élément à la position indiquée |
Classe | Version | Définition |
---|---|---|
jdb-round, jdb-round-medium, jdb-round-md | 1.0.0 | Élément entièrement arrondi de 4 pixels |
jdb-round-small, jdb-round-sm | 1.0.0 | Élément entièrement arrondi de 2 pixels |
jdb-round-large, jdb-round-lg | 1.0.0 | Élément entièrement arrondi de 8 pixels |
jdb-round-xlarge, jdb-round-xl | 1.0.0 | Élément entièrement arrondi de 16 pixels |
jdb-round-xxlarge, jdb-round-xxl | 1.0.0 | Élément entièrement arrondi de 32 pixels |
jdb-round-0, jdb-round-none | 1.0.0 | Supprime tous les arrondissements de bordures d'un élément |
jdb-round-top, jdb-round-medium, jdb-round-md | 1.0.0 | Élément arrondi de 4 pixels en haut |
jdb-round-top-small, jdb-round-top-sm | 1.0.0 | Élément arrondi de 2 pixels en haut |
jdb-round-top-large, jdb-round-top-lg | 1.0.0 | Élément arrondi de 8 pixels en haut |
jdb-round-top-xlarge, jdb-round-top-xl | 1.0.0 | Élément arrondi de 16 pixels en haut |
jdb-round-top-xxlarge jdb-round-top-xxl | 1.0.0 | Élément arrondi de 32 pixels en haut |
jdb-round-top-0, jdb-round-top-none | 1.0.0 | Supprime les arrondissements de bordures en haut d'un élément |
jdb-round-right, jdb-round-right-medium, jdb-round-right-md | 1.0.0 | Élément arrondi de 4 pixels à droite |
jdb-round-right-small, jdb-round-right-sm | 1.0.0 | Élément arrondi de 2 pixels à droite |
jdb-round-right-large, jdb-round-right-lg | 1.0.0 | Élément arrondi de 8 pixels à droite |
jdb-round-right-xlarge, jdb-round-right-xl | 1.0.0 | Élément arrondi de 16 pixels à droite |
jdb-round-right-xxlarge, jdb-round-right-xxl | 1.0.0 | Élément arrondi de 32 pixels à droite |
jdb-round-right-0, jdb-round-right-none | 1.0.0 | Supprime les arrondissements de bordures de droite d'un élément |
jdb-round-bottom, jdb-round-right-medium, jdb-round-right-md | 1.0.0 | Élément arrondi de 4 pixels en bas |
jdb-round-bottom-small, jdb-round-right-sm | 1.0.0 | Élément arrondi de 2 pixels en bas |
jdb-round-bottom-large, jdb-round-right-lg | 1.0.0 | Élément arrondi de 8 pixels en bas |
jdb-round-bottom-xlarge, jdb-round-right-xl | 1.0.0 | Élément arrondi de 16 pixels en bas |
jdb-round-bottom-xxlarge, jdb-round-right-xxl | 1.0.0 | Élément arrondi de 32 pixels en bas |
jdb-round-bottom-0, jdb-round-bottom-none | 1.0.0 | Supprime les arrondissements de bordures en bas d'un élément |
jdb-round-left, jdb-round-right-medium, jdb-round-right-md | 1.0.0 | Élément arrondi de 4 pixels à gauche |
jdb-round-left-small, jdb-round-right-sm | 1.0.0 | Élément arrondi de 2 pixels à gauche |
jdb-round-left-large, jdb-round-right-lg | 1.0.0 | Élément arrondi de 8 pixels à gauche |
jdb-round-left-xlarge, jdb-round-right-xl | 1.0.0 | Élément arrondi de 16 pixels à gauche |
jdb-round-left-xxlarge, jdb-round-right-xxl | 1.0.0 | Élément arrondi de 32 pixels à gauche |
jdb-round-left-0, jdb-round-left-none | 1.0.0 | Supprime les arrondissements de bordures de gauche d'un élément |
Classe | Version | Définition |
---|---|---|
jdb-padding-tiny | 1.0.0 | Ajoute une marge intérieure de 2 pixels en haut et en bas, et de 4 pixels à gauche et à droite. |
jdb-padding-small, jdb-padding-sm | 1.0.0 | Ajoute une marge intérieure de 4 pixels en haut et en bas, et de 8 pixels à gauche et à droite. |
jdb-padding | 1.0.0 | Ajoute une marge intérieure de 8 pixels en haut et en bas, et de 16 pixels à gauche et à droite. |
jdb-padding-large, jdb-padding-lg | 1.0.0 | Ajoute une marge intérieure de 12 pixels en haut et en bas, et de 24 pixels à gauche et à droite. |
jdb-padding-4 | 1.0.0 | Ajoute une marge intérieure de 4 pixels en haut et en bas. |
jdb-padding-8 | 1.0.0 | Ajoute une marge intérieure de 8 pixels en haut et en bas. |
jdb-padding-12 | 1.0.0 | Ajoute une marge intérieure de 12 pixels en haut et en bas. |
jdb-padding-16 | 1.0.0 | Ajoute une marge intérieure de 16 pixels en haut et en bas. |
jdb-padding-24 | 1.0.0 | Ajoute une marge intérieure de 16 pixels en haut et en bas. |
jdb-padding-32 | 1.0.0 | Ajoute une marge intérieure de 32 pixels en haut et en bas. |
jdb-padding-48 | 1.0.0 | Ajoute une marge intérieure de 48 pixels en haut et en bas. |
jdb-padding-64 | 1.0.0 | Ajoute une marge intérieure de 64 pixels en haut et en bas. |
jdb-padding-128 | 1.0.0 | Ajoute une marge intérieure de 128 pixels en haut et en bas. |
Classe | Version | Définition |
---|---|---|
jdb-margin | 1.0.0 | Ajoute une marge extérieure de 16 pixels autour d'un élément |
jdb-margin-top | 1.0.0 | Ajoute une marge extérieure de 16 pixels au dessus d'un élément |
jdb-margin-right | 1.0.0 | Ajoute une marge extérieure de 16 pixels à droite d'un élément |
jdb-margin-bottom | 1.0.0 | Ajoute une marge extérieure de 16 pixels en dessous d'un élément |
jdb-margin-left | 1.0.0 | Ajoute une marge extérieure de 16 pixels à gauche d'un élément |
jdb-margin-auto | 1.0.0 | Conteneur pour un contenu responsive centré sur la largeur |
jdb-section | 1.0.0 | Ajoute une marge extérieure de 16 pixels au dessus et en dessous d'un élément |
jdb-group | 1.0.0 | Conteneur pour grouper les éléments des éléments. Ajoute une marge supérieure et inférieure de 24px. |
Classe | Version | Définition |
---|---|---|
jdb-pointer | 1.0.0 | Met le curseur de l'élément sur "pointeur" . |
jdb-nocursor | 1.0.0 | Met le curseur de l'élément sur "interdit" . |