Bienvenue dans la deuxième partie de ma série de styles où je passe en revue quelques bibliothèques/frameworks de styles populaires. Dans ce blog, nous passerons en revue Bootstrap. Bootstrap est un framework frontal open source puissant qui rend la création de sites Web plus rapide et plus facile en fournissant un système de grille intuitif, des composants d'interface utilisateur et une vaste gamme d'utilitaires.

Installation

Bien sûr, avant d'aborder certaines fonctionnalités, nous devons parler de la configuration de Bootstrap dans un projet. Au moment de la rédaction, la version actuelle de Bootstrap est la 5.3.3 et c'est ce que j'utiliserai pour tous les exemples.

Amorcer via CDN

Bootstrap peut être configuré très rapidement à l'aide d'un CDN ou d'un réseau de diffusion de contenu. Cette méthode ne nécessite aucune installation, ajoutez simplement les liens CSS et JavaScript de Bootstrap à votre fichier HTML et c'est parti pour les courses !
Vous placerez le lien CSS suivant dans la balise

Après cela, vous placerez le script suivant avant la balise de fermeture

Via le gestionnaire de paquets

Si vous travaillez sur un projet plus vaste ou si vous travaillez avec des outils frontend modernes, vous souhaiterez peut-être l'installer via le gestionnaire de projet. Heureusement pour nous, c'est aussi simple ! Dans votre terminal, écrivez simplement npm install bootstrap si vous utilisez npm, ou Yarn Add Bootstrap si vous utilisez Yarn. Après l'installation, vous souhaiterez importer respectueusement le CSS et le JavaScript de bootstrap dans vos principaux fichiers CSS et JS :

// Import Bootstrap CSS
import 'bootstrap/dist/css/bootstrap.min.css';

// Import Bootstrap JavaScript
import 'bootstrap/dist/js/bootstrap.bundle.min.js';

Le système de grille

L'une des fonctionnalités les plus puissantes de Bootstrap est son système de grille. Cela vous permet de créer des mises en page réactives qui s'adaptent automatiquement à différentes tailles d'écran.

Structure

La grille est basée sur une structure de 12 colonnes pour organiser le contenu. Sa structure de base peut ressembler à ceci :

  

    
Column 1
    
Column 2
    
Column 3
  

• Conteneur : le conteneur contient les colonnes et les lignes tout en les alignant
• Ligne : les lignes contiennent et regroupent les colonnes horizontalement
• Col : les colonnes sont l'endroit où votre contenu vivra, chaque ligne peut en avoir 12 

Tailles

Les colonnes peuvent également avoir leurs propres tailles ! Cela peut être utilisé pour fournir différentes mises en page. Ils sont notés en fonction du nombre de colonnes qu'ils occuperont sur la ligne.

  

    
100% Width
  
  

    
50% Width
    
50% Width
  
  

    
33.33% Width
    
33.33% Width
    
33.33% Width
  

Points d'arrêt

La grille Bootstraps est d'abord mobile, ce qui signifie qu'elle est conçue pour les appareils mobiles avant de s'adapter à des appareils plus grands. Pour cette raison, Bootstrap dispose de classes qui définissent le comportement des colonnes sur différentes tailles d'écran. Ce sont :

• xs : pour les écrans de moins de 576 px
• sm : pour les écrans de plus de 576 px
• md : pour les écrans de plus de 768 px
• lg : pour les écrans de plus de 992 px
• xl : pour les écrans de plus de 1 200 px

Par exemple:

  

    
Wide on medium and larger screens
    
Narrower on medium and larger screens
  

Dans cet exemple, la première colonne occupe toute la largeur sur les petits écrans, mais seulement huit unités de grille sur les écrans moyens ou grands. La seconde occupera la moitié de la largeur sur les petits écrans, et seulement quatre unités sur les écrans moyens ou plus grands.

Composants communs

Bootstrap nous offre une variété de composants prédéfinis qui aident à créer des sites Web attrayants et conviviaux avec un minimum de CSS personnalisé. Il y a beaucoup de composants, je vais donc passer en revue certains des plus courants avec lesquels vous êtes susceptible de travailler.

Typographie

Nous commencerons par parler de texte, puisque vos utilisateurs ont besoin de lire pour croire. Les classes de typographie facilitent la définition de styles de texte cohérents, des titres au corps du texte en passant par les listes. Par exemple, les différentes rubriques sont notées par leur classe d'affichage :

Heading 1
Heading 2
Heading 3
This is lead text, which stands out from regular paragraph text.
This is regular paragraph text.
This is small text, which stands out from regular paragraph text.

Vous pouvez également définir le texte d'un paragraphe avec des classes utilitaires pour modifier le corps du texte, comme indiqué ci-dessus.

Boutons

Chaque site Web ou application a besoin de boutons ! Bootstrap propose une variété de styles de boutons prêts à l'emploi. Leurs classes sont définies comme telles :

Primary Button
Secondary Button
Danger Button


Large Button
Small Button


Success Outline
Warning Outline

Barre de navigation

Le composant de barre de navigation de Bootstrap est livré avec des classes intégrées pour l'alignement, les listes déroulantes et bien plus encore !

Dans cet exemple, la barre de navigation se réduira sur des écrans plus petits.

Classes utilitaires

Bootstrap comprend également un large éventail de classes utilitaires pour accélérer le développement et réduire le besoin de CSS personnalisé. Avec seulement quelques noms de classe, vous pouvez ajuster l'espacement, l'alignement, les propriétés d'affichage et bien plus encore !

Espacement

L'espacement est extrêmement important dans le développement pour la lisibilité de l'utilisateur. Heureusement, Bootstrap nous donne des cours pour ajuster les marges et le remplissage des éléments. Ils suivent tous un format similaire : {property}{sides}-{size}.

• Propriété : m pour la marge, p pour le remplissage
• Côtés : t haut, b bas, l gauche, r droite, x gauche et droite, y haut et bas, ou vide pour tous les côtés
• Taille : 0, 1, 2, ... ou automatique

Par exemple:

Margin Top of 3
Padding of 5
Horizontally Centered with Auto Margin

Afficher

Les utilitaires d'affichage aident à contrôler la visibilité et la disposition des éléments. Ceux-ci peuvent être utilisés pour afficher, masquer ou modifier le comportement des éléments. Les classes d'affichage incluent :

• d-block : Afficher en tant qu'élément de bloc
• d-inline : Afficher en tant qu'élément en ligne
• d-none : Masquer l'élément
• d-flex : Activer Flexbox
• d-inline-block : Afficher sous forme de bloc en ligne

Bootstrap fournit également des versions réactives de ces classes qui s'appliquent aux points d'arrêt, telles que d-none d-md-block, cela masque un élément sur les petits écrans.

Visible on medium and larger screens
Centered with Flexbox

Utilitaires de texte

Bootstrap offre une grande quantité de personnalisation du texte avec des classes telles que :

Alignement du texte

• text-start : aligne le texte à gauche
• text-end : aligne le texte à droite
• text-center : aligne le texte au centre

Habillage du texte

• text-nowrap : Empêcher le texte de passer à la ligne suivante
• text-truncate : Tronque le texte avec des points de suspension s'il est trop long

Couleur du texte

• text-primary : Texte avec couleur primaire (par défaut : bleu)
• text-success : Texte avec la couleur du succès (par défaut : vert)
• text-danger : Texte avec une couleur de danger (par défaut : rouge)

This text is centered and green
This text is right-aligned and blue

Conclusions

Bootstrap est un framework puissant et flexible qui permet aux développeurs de créer efficacement des sites Web réactifs. En maîtrisant ces concepts fondamentaux, vous serez en mesure de rationaliser votre flux de travail et de vous concentrer davantage sur la conception et les fonctionnalités de votre site plutôt que sur la gestion personnalisée des CSS et de la mise en page. Alors plongez ! Expérimentez avec certains exemples et créez une application étonnante !

Sources

Amorçage