Guide du débutant sur l’utilisation de Bootstrap

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.

UTILISEZ LA VIDÉO DU JOUR

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

ou en attribuant le mot-clé “navigation” au Bootstrap rôle attribut dans le parent de la barre de navigation div. Pour rendre la barre de navigation réactive, vous devrez utiliser le réduire le plug-in JavaScript.

Le bootstrap barre de navigation classe utilise un aria-current attribut qui prend la valeur “page” pour indiquer la page actuelle, ou “true” pour indiquer la section actuelle d’une page Web. La valeur que vous attribuez dépendra de la structure de votre site Web (une seule page ou plusieurs pages). Vous devez également utiliser le classe active pour indiquer la page ou la section en cours.

Utilisation de la barre de navigation de Bootstrap

<nav class="row navbar navbar-dark bg-primary navbar-expand-lg">
<div class="container-fluid">
<div class="col">
<a class="navbar-brand" href="#">Website Logo</a> 
</div>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class=" col collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link " href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Blog</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</div>
</nav>

Remplacement de la navigation ligne du Bootstrap la grille avec le code ci-dessus créera la sortie suivante dans votre navigateur :

Il existe plusieurs autres classes importantes et attributs Bootstrap dans le code ci-dessus, tels que le marque de barre de navigation classe, qui cible la section logo de votre barre de navigation. le barre de navigation est également complètement réactif grâce à la réduire le plug-in JavaScript.

Barre de navigation réactive

Vous vous souviendrez peut-être que Bootstrap a six valeurs par défaut points d’arrêt et l’un de ces points d’arrêt est grand (lg). le barre de navigation-expand-lg classe dans le balise

ci-dessus se développe en une liste horizontale d’éléments de navigation au niveau du grand point d’arrêt et au-dessus, et cette liste revient à un bouton à tout point d’arrêt inférieur à grand.

Si vous souhaitez en savoir plus sur la création de sites Web réactifs, nous avons préparé un article décrivant comment faire cela avec les media queries en HTML et CSS.

Le composant de bouton Bootstrap

Le bootstrap bouton composant utilise le Balise et nécessite que vous définissiez taper attribut à “bouton”.

Bootstrap a plusieurs types de boutons. Pour créer le bouton le plus conventionnel, vous utiliseriez le btn classe, mais pour créer un bouton hamburger comme dans le code ci-dessus, vous utiliserez le bascule de la barre de navigation classer.

Quand devriez-vous utiliser Bootstrap ?

Bootstrap est connu comme l’un des frameworks CSS les plus populaires car il est un pionnier. Bien avant que la conception réactive ne soit si courante dans le développement de logiciels, Bootstrap s’est transformé en un framework entièrement réactif.

Au fil des ans, Bootstrap a continué à progresser et à s’améliorer, ce qui en fait le choix numéro un pour les grandes entreprises, telles que Twitter et Spotify. Cependant, ce ne sera pas toujours la meilleure option pour vos besoins de développement de logiciels. Par exemple, si vous créez une application React, il existe un système de conception appelé MUI qui est personnalisé pour les applications React.

Qu’est-ce que MUI et comment pouvez-vous l’utiliser dans vos projets ReactJS ?

Material-UI a un nouveau nom et vise à créer un nouveau système de conception alternatif à Material Design. Voici comment vous pouvez utiliser MUI dans les projets ReactJS.

A propos de l’auteur

Kadeisha Kean
(48 articles publiés)

Kadeisha Kean est un développeur de logiciels Full-Stack et un rédacteur technique/technologique. Elle a la capacité distincte de simplifier certains des concepts technologiques les plus complexes; produire du matériel facilement compréhensible par tout novice en technologie. Elle est passionnée par l’écriture, le développement de logiciels intéressants et le voyage à travers le monde (à travers des documentaires).

Plus de Kadeisha Kean

Abonnez-vous à notre newsletter

Rejoignez notre newsletter pour des conseils techniques, des critiques, des ebooks gratuits et des offres exclusives !

Cliquez ici pour vous abonner

— to www.makeuseof.com