En 2011, Twitter a introduit le framework Bootstrap. Depuis lors, ce framework CSS a connu deux réécritures majeures, la plus récente (Bootstrap 3) étant sortie en 2013. Bootstrap 3 a transformé la bibliothèque CSS en implémentant une approche mobile qui a laissé le framework complètement réactif.
À partir de 2022, Bootstrap est à la version cinq et est l’un des frameworks frontaux les plus populaires. Il possède une longue liste de composants prédéfinis et une impressionnante collection de plugins JavaScript. Dans cet article, vous apprendrez à utiliser Bootstrap et à tirer le meilleur parti de ses fonctionnalités.
Installation de Bootstrap dans votre projet
Il y a trois façons de utiliser Bootstrap dans votre projet. Vous pouvez télécharger et héberger les fichiers CSS et JavaScript, les installer dans votre projet à l’aide de npm, ou copier et coller les liens cdn appropriés dans votre projet.
Avec l’approche cdn, vous devez vous rappeler de placer le lien Bootstrap avant tout autre lien CSS dans la balise head de votre fichier HTML.
Certains composants Bootstrap ont des activités fonctionnelles, telles que le basculement et le positionnement des boutons qui nécessitent l’importation de script JavaScript et Popper. Ainsi, si vous avez l’intention d’utiliser des composants fonctionnels, vous devrez également ajouter la balise de script à votre fichier HTML.
La dernière chose dont vous avez besoin pour commencer à utiliser Bootstrap est le balise de la fenêtre d’affichage.
La balise Meta Viewport
<meta name="viewport" content="width=device-width, initial-scale=1">
Étant donné que Bootstrap est une technologie mobile d’abord, le balise de la fenêtre d’affichage aidera à la conception réactive. Un moyen simple d’utiliser bootstrap dans votre projet consiste simplement à copier Modèle de démarrage de Bootstrap.
Créer un site Web avec Bootstrap
Lorsque vous créez un nouveau site Web, l’une des premières choses que vous devez prendre en compte est la mise en page. Après cela, vous pouvez passer à d’autres composants comme les boutons et la typographie.
Bootstrap possède une collection de composants structurels que vous pouvez utiliser pour organiser des éléments sur une page Web. Ces structures de mise en page comprennent :
- Conteneurs
- Grille
- Colonnes
- Gouttières
- Points d’arrêt
En utilisant une version légèrement modifiée du modèle de démarrage Bootstrap, vous pouvez commencer à décrire la structure de votre page Web et ajouter de nouveaux composants.
Le fichier index.html
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"><!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<title>Bootstrap</title>
</head>
<body>
<!-- Separate Popper and Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
</body>
</html>
La classe de conteneur Bootstrap
Le bootstrap récipient classe remplit, contient et aligne les éléments de votre page Web. Si vous envisagez d’utiliser Bootstrap grille par défautalors vous devrez également utiliser Bootstrap récipient classer. Il existe trois types de récipient Des classes; récipient, conteneur-fluideet conteneur-{point d’arrêt}. La classe de conteneur est le conteneur par défaut ; il est réactif et a une largeur fixe à chacun des six points d’arrêt Bootstraps.
Les six points d’arrêt par défaut de Bootstrap incluent :
- Super petit: Moins de 576px.
- Petit: Supérieur ou égal à 576 pixels.
- Moyen: Supérieur ou égal à 768 pixels.
- Grande: Supérieur ou égal à 992px.
- X-Grand : Supérieur ou égal à 1200px.
- XX-Large : Plus grand ou égal à 1400px.
Pour utiliser Bootstrap récipient dans votre projet, vous pouvez simplement ajouter la classe de conteneur souhaitée à l’externe div sur votre page Web.
Utiliser le conteneur de Bootstrap
<div class="container">
<!-- place website elements here --></div>
L’insertion du code ci-dessus dans le corps de votre fichier HTML existant rendra votre page Web réactive et créera également un rembourrage de chaque côté de votre page Web.
Le système de grille Bootstrap
La grille de Bootstrap utilise un système à douze colonnes qui repose sur le ligne et col classes de grille, ainsi que la classe de conteneur. Chaque ligne comporte douze colonnes et tout élément peut s’étendre sur une ou plusieurs de ces colonnes. La classe de colonne indiquera le nombre de colonnes qu’un élément doit occuper. Par exemple, un élément utilisant le col-2 classe s’étendra sur deux colonnes, un élément utilisant le col-3 classe s’étendra sur trois colonnes, et ainsi de suite.
Le système de grille Bootstrap est basé sur le module flexbox. Si seulement deux colonnes occupent une ligne, elles diviseront l’espace également entre elles. le gouttière class est l’un des éléments structurels de Bootstrap, et il contrôle l’espacement entre chaque colonne dans le système de grille. Chaque la grille colonne a 12 pixels de rembourrage de chaque côté.
Utilisation du système de grille de Bootstrap
<nav class="row">
<!-- navbar -->
<h2>Navigation Bar</h2>
</nav>
<div class="row" id="webpage-body">
<article class="col" id="main-content">
<!-- main content on a webpage-->
<h1> Article </h1>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorem porro non quae
obcaecati illo laboriosam a, voluptate molestias eum velit, distinctio impedit
ratione facere numquam, optio eligendi delectus cumque quos.
</p>
</article>
<aside class="col-sm-4">
<!-- sidebar -->
<h3> Related Article </h3>
<h3> Related Article </h3>
<h3> Related Article </h3>
<h3> Related Article </h3>
</aside>
</div>
<footer class="row">
<!-- footer -->
<h2>Footer</h2>
</footer>
L’insertion du code ci-dessus dans le conteneur div créera un système de grille Bootstrap de trois lignes et deux colonnes. La première rangée en haut contiendra la barre de navigation, la troisième rangée en bas contiendra le pied de page du site Web et la deuxième rangée au milieu contiendra le contenu de la page Web. La deuxième ligne comporte deux colonnes : l’article principal et un aparté.
Créer un fichier CSS local et ajouter une bordure à chaque section de la grille vous permettra de le voir plus clairement.
Le fichier style.css
.row{
border: 2px blue solid;
}
.col, .col-sm-4{
border: 2px red solid;
}
Le lien vers le fichier CSS ci-dessus créera la sortie suivante dans votre navigateur :
Une différence évidente dans l’image ci-dessus est la taille des colonnes. Habituellement, deux colonnes (ou plus) consécutives occupent le même espace, sauf indication contraire explicite. le col-sm-4 class dans le code HTML ci-dessus garantit que la deuxième colonne ne s’étend que sur quatre des douze colonnes de la ligne. le nm dans le col-sm-4 class représente le petit point d’arrêt, ainsi, la section de côté n’occupera que quatre colonnes à partir du petit point d’arrêt et au-dessus.
Composants d’amorçage
Une fois que vous avez décidé de la mise en page de votre page Web, l’étape suivante consiste à ajouter des éléments de construction de site Web, que Bootstrap appelle des composants. La liste des composants de Bootstrap comprend :
- Barre de navigation
- Boutons
- Groupe de boutons
- Groupe de liste
- Cartes
- S’effondrer
- Listes déroulantes
La classe Bootstrap Navbar
Chaque barre de navigation Bootstrap nécessite le barre de navigation classer. Ils nécessitent également l’utilisation de balise
— to www.makeuseof.com
