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

Guide : Thèse, Antithèse, Synthèse – Exercices corrigés

La méthode Thèse, Antithèse, Synthèse (TAS) est un outil incontournable pour structurer une dissertation, particulièrement…

8 heures ago

Fiche Auteur : Émile Zola

1. Informations Générales Nom complet : Émile Édouard Charles Antoine Zola Date de naissance :…

9 heures ago

Fiche Auteur : Victor Hugo

1. Informations Générales Nom complet : Victor-Marie Hugo Date de naissance : 26 février 1802…

9 heures ago

Fiche Auteur : François Rabelais

1. Informations Générales Nom complet : François Rabelais Date de naissance : Vers 1483 ou…

9 heures ago

Modélisation Financière : Modèle Excel Automatisé pour la Prise de Décision

La modélisation financière est une pratique clé dans le domaine des finances et de la…

18 heures ago

Tableau de suivi des indicateurs automatisé dans Excel

Un tableau de suivi des indicateurs est un outil essentiel pour mesurer la performance, suivre…

19 heures ago

This website uses cookies.