Tous les cours gratuit

Categories: tutoriel Bootstrap

Tutoriel Bootstrap 4: Initiation à l’usage des couleurs

Bienvenue dans ce nouveau tutoriel  tutoriel Bootstrap

Dans ce tuto Bottstrap 4, nous allons découvrir l’usage des couleurs 🙂

Bootstrap

Bootstrap est un framework de développement web gratuit et open source. Il est conçu pour faciliter le processus de développement Web de sites Web réactifs et mobiles en fournissant une collection de syntaxe pour les modèles de conception.

En d’autres termes, le framework Bootstrap aide les développeurs Web à créer des sites Web plus rapidement car ils n’ont pas à se soucier des commandes et des fonctions de base. Il se compose de scripts basés sur HTML, CSS et JS pour diverses fonctions et composants liés à la conception Web.

C’est parti !

Bootstrap 4 a un certain nombre de classes de texte qui, selon leurs noms, donnent des couleurs conceptuelles et associées au texte et aux autres éléments de la page.
Par exemple, nous avons la classe text-success, qui signifie texte réussi, et sa couleur est verte, qui fait référence au signe et au concept de succès.
Différentes classes pour les couleurs de texte dans Bootstrap 4 sont : .text-muted, .text-primary, .text-success, .text-info, .text-warning, .text-danger, .text-secondary, .text -while, .text-dark, .text-light et enfin la classe .text-body (qui sera la couleur par défaut du corps de la page, qui est généralement noir).
Dans l’exemple de code pratique ci-dessous, nous avons montré comment utiliser ces classes pour déterminer la couleur du texte dans Bootstrap 4 et leur sortie :

Bootstrap

Vous pouvez également utiliser la classe de texte pour la couleur du texte dans Bootstrap 4 dans les liens. Ces classes leur donnent généralement une couleur plus foncée lorsque la souris passe sur le texte.
Dans l’exemple de code ci-dessous, nous avons montré l’utilisation pratique des classes de texte de couleur dans Bootstrap 4 pour les liens et leur sortie :

Bootstrap

Vous pouvez également augmenter et diminuer la résolution des textes en ajoutant le nombre 50 aux classes de couleur blanc et noir. A cet effet, les classes .text-black-50 et .text-white-50 sont utilisées comme suit :

Définir la couleur d’arrière-plan dans Bootstrap 4

Semblable aux classes de texte de la section précédente, nous avons des classes de texte spéciales dans Bootstrap 4 qui définissent des couleurs spéciales comme arrière-plan du texte et d’autres éléments.
Ces classes sont : .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark et enfin .bg-light.
Astuce : Notez que les classes de couleur d’arrière-plan dans Bootstrap 4 ne déterminent pas la couleur du texte à l’intérieur de l’élément. Par conséquent, il est généralement nécessaire de les utiliser avec des classes de texte (text-*).

Dans l’exemple de code pratique ci-dessous, nous avons montré comment utiliser les classes de texte de couleur d’arrière-plan et leur sortie dans Bootstrap 4 :

Bootstrap

Autres articles

Balises ARIA avec Bootstrap : Une Combinaison...
Les balises ARIA (Accessible Rich Internet Applications) jouent un rôle...
Read more
Tutoriel Bootstrap 4: Comment travailler avec le...
Bienvenue dans ce nouveau tutoriel  tutoriel Bootstrap Le framework Bootstrap 4...
Read more
Tutoriel Bootstrap 4 : Comment travailler avec...
Bienvenue dans ce nouveau tutoriel  tutoriel Bootstrap Le framework Bootstrap 4...
Read more
AZ

Share
Published by
AZ

Recent Posts

La Gestion des Congés dans Excel : Exemple et Modèle

La gestion des congés est un élément essentiel de la gestion des ressources humaines. Elle…

1 heure ago

Suivi de Portefeuille Boursier dans Excel : Modèle Automatisé

Gérer efficacement un portefeuille boursier est essentiel pour atteindre ses objectifs financiers tout en minimisant…

2 heures ago

Lettre Offre Commerciale Professionnelle : 10 Modèles

L’offre commerciale est un élément essentiel dans le développement de toute relation d’affaires. Bien conçue,…

7 heures ago

Comment personnaliser une proposition commerciale ?

Pour qu'une proposition commerciale soit percutante et engageante, elle doit être personnalisée en fonction des…

7 heures ago

Exemples de Proposition Commerciale – Modèle Standard à Suivre

Le contexte d'une proposition commerciale professionnelle est la base qui permet d’établir la pertinence de…

16 heures ago

Réponse Positive à une Proposition d’Embauche : Exemples

Recevoir une proposition d’embauche est toujours un moment gratifiant. C’est l’aboutissement d’un processus souvent long…

16 heures ago

This website uses cookies.