Support de cours

Bootstrap 5
F R É DÉR IC N A DA R A DJANE
L A G R A NDE CL A S S E
0 9 / 03/2022
1.Introduction
 Présentation
o Développé en 2010 par Mark Otto et Jacob Thornton

o Premier nom "Twitter Blueprint"

o Aout 2011 : Twitter place Bootstrap sous licence open source

o Février 2021 : 10ème projet plus populaire sur GitHub

 Présentation
o Framework css

o Framework : ensemble de librairies regroupé dans un but précis et possédant des règles
internes que doivent suivre les utilisateurs.

o Pour faire simple : Bootstrap est un ensemble de fichiers CSS et JavaScript fonctionnant
ensemble et qu’on va pouvoir utiliser pour créer des design complexes de manière relativement
simple.
 Présentation
o Version actuelle : Bootstrap 5 (version 5.1.3)

o Surtout utilisé pour faire du responsive design très rapidement.

o Accessible via le CDN (Content Delivery Network)

o Rien à télécharger, rien à installer : Juste un lien à entrer dans votre document HTML
2.Fonctionnement
 Fonctionnement
CDN
o Rendez-vous sur l'adresse suivante :
https://getbootstrap.com/docs/5.1/getting-started/
Crée une page html et ajoutez la ligne de commande ci-après :
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
rel="stylesheet" integrity="sha384-
1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous">
o Pour faire appel aux fonctionnalités de bootstrap il suffit d'appeler une class reconnu par
bootstrap dans votre élément html pour que cela fonctionne.
 Fonctionnement
La class img-fluid
Pour rendre une image qui s'adapte automatiquement à la taille de l'écran (responsive)
Exemple :
HTML:
<img src="https://wallpaperaccess.com/full/1369012.jpg" alt="4K image">

Vous voyez que l'image dépasse de la page. Ajoutez maintenant la class img-fluid.
HTML:
<img src="https://wallpaperaccess.com/full/1369012.jpg" class="img-fluid" alt="4K image">
 Fonctionnement
La class img-thumbnail
Qui permet de mettre une bordure blanche et des bordures arrondis
Exemple :
HTML:
<img src="https://wallpaperaccess.com/full/1369012.jpg" class="img-thumbnail" alt="4K
image">
3.Organiser les
éléments
 Organiser les éléments
Le container
Les conteneurs sont un élément de base du Bootstrap qui contient, rembourre et aligne votre
contenu dans un appareil ou une fenêtre donnée.
Exemple :
HTML :
<div class="container">
<!-- Content here -->
</div>
 Organiser les éléments
Le container
Les conteneurs sont un élément de base du Bootstrap qui contient, rembourre et aligne votre
contenu dans un appareil ou une fenêtre donnée.
https://getbootstrap.com/docs/5.0/layout/containers/
Exemple :
HTML :
<div class="container">
<!-- Content here -->
</div>
 Organiser les éléments
La Grid
Les grids sont largement simplifier avec bootstrap. Les lignes sont disposés en "row" et chaque
colonne est nommée "col-sm"
Exemple :
HTML :
 Organiser les éléments
Les flexs
Gérez rapidement la disposition, l'alignement et la taille des colonnes de la grille, la navigation,
et bien plus encore grâce à une suite complète d'utilitaires flexbox
Exemple :
HTML :
<div class="d-flex">
<div>Flex item 1</div>
<div>Flex item 2</div>
<div>Flex item 3</div>
</div>
 Organiser les éléments
Les flexs
Pour améliorer l'espacement on peut ajouter la class p-2 sur les items
Exemple :
HTML :
<div class="d-flex">
<div class="p-2">Flex item 1</div>
<div class="p-2">Flex item 2</div>
<div class="p-2">Flex item 3</div>
</div>
 Organiser les éléments
Les flexs – Justify-content
Comme pour le css il est possible d'organiser les flex avec les justify-content
Exemple :
HTML :
<div class="d-flex justify-content-start">...</div>
<div class="d-flex justify-content-end">...</div>
<div class="d-flex justify-content-center">...</div>
<div class="d-flex justify-content-between">...</div>
<div class="d-flex justify-content-around">...</div>
<div class="d-flex justify-content-evenly">...</div>
 Organiser les éléments
Exercice
Réalisez 3 divs :
o avec la class img-thumbnail, la taille maximum des divs sera 400px.
Les 3 divs serons disposé en flex space around
 Organiser les éléments
Exercice
Réalisez un hero avec bootstrap :
Image qui prends la totalité de la largeur de l'écran
Un texte qui souhaites la bienvenue sur le site.
 Organiser les éléments
Ajouter notre propre style
o Bien sûr, nous pouvons ajouter notre propre style à la page, en crée un id.

o Ajoutons un background-color : rgba(50, 115, 220, 0.3) au container

o Ajoutons une bordure sur chaque items du flex

4.Design des éléments
 Design des éléments
Textes et images
L'alignement : il est possible de changer l'alignement du texte (un peu comme text-align en css)
avec bootstrap

<p class="text-start">Start aligned text on all viewport sizes.</p>

<p class="text-center">Center aligned text on all viewport sizes.</p>
<p class="text-end">End aligned text on all viewport sizes.</p>
 Design des éléments
Textes et images
On peut mettre un texte en majuscule ou en minuscule directement

<p class="text-lowercase">Lowercased text.</p>

<p class="text-uppercase">Uppercased text.</p>
 Design des éléments
Exercice
Reprendre le précédant exo et mettre le texte au centre et en majuscule
 Design des éléments
Table
Il est possible de faire des tables avec bootstrap,
 Design des éléments
Table
Entete :
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
</tr>
</thead>
 Design des éléments
Table
Corps :
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
</tr>
</tbody>
</table>
 Design des éléments
Table
Changer la couleur :
<!-- On tables -->
<table class="table-primary">...</table>
<table class="table-secondary">...</table>
<table class="table-success">...</table>
<table class="table-danger">...</table>
<table class="table-warning">...</table>
<table class="table-info">...</table>
<table class="table-light">...</table>
<table class="table-dark">...</table>
 Design des éléments
Formulaire
Avec bootstrap vous pouvez faire des formulaires design de façon très simplifié :
<form>
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
<div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
</div>
<div class="mb-3 form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Check me out</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
 Design des éléments
Form-control
Tout ce passe dans la class form-control. Le framework bootstrap vous permet d'avoir une
panoplie de style à votre disposition pour faire tout type de formulaire
Par exemple le champs email:
<div class="mb-3">
<label for="exampleFormControlInput1" class="form-label">Email address</label>
<input type="email" class="form-control" id="exampleFormControlInput1"
placeholder="name@example.com">
<div id="emailHelp" class="form-text">We'll never share your email with anyone else</div>
</div>
 Design des éléments
Form-control
Tout ce passe dans la class form-control. Le framework bootstrap vous permet d'avoir une
panoplie de style à votre disposition pour faire tout type de formulaire
Par exemple le champs textarea:
<div class="mb-3">
<label for="exampleFormControlTextarea1" class="form-label">Example textarea</label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
</div>
 Design des éléments
Form-control
<div class="mb-3 row">
<label for="staticEmail" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input type="text" readonly class="form-control-plaintext" id="staticEmail" value="email@example.com">
</div>
</div>
<div class="mb-3 row">
<label for="inputPassword" class="col-sm-2 col-form-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword">
</div>
</div>
 Design des éléments
Form-control
Faire un formulaire en demandant le nom, prénom, le mot de passe, la confirmation du mot de
passe et un textarea.
 Design des éléments
Input-group
Au lieu des labels nous pouvons utiliser des input-group qui mettent le texte du label en entete
ou à la fin de l'input
 Design des éléments
Input-group
<label for="basic-url" class="form-label">Your vanity URL</label>
<div class="input-group mb-3">
<span class="input-group-text" id="basic-addon3">https://example.com/users/</span>
<input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
</div>
 Design des éléments
Input-group
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Recipient's username" aria-
label="Recipient's username" aria-describedby="basic-addon2">
<span class="input-group-text" id="basic-addon2">@example.com</span>
</div>
 Design des éléments
Les boutons
Les boutons basic en html sont très primitif et ne sont pas très tendances. C'est pour cela que
bootstrap à crée des boutons.
<div class="btn-group" role="group" aria-label="Basic example">
<button type="button" class="btn btn-primary">Left</button>
<button type="button" class="btn btn-primary">Middle</button>
<button type="button" class="btn btn-primary">Right</button>
</div>
 Design des éléments
Les boutons
Les boutons outline changent lors du survole :

<div class="btn-group" role="group" aria-label="Basic outlined example">

<button type="button" class="btn btn-outline-primary">Left</button>
<button type="button" class="btn btn-outline-primary">Middle</button>
<button type="button" class="btn btn-outline-primary">Right</button>
</div>
 Design des éléments
Les boutons radio
Il est possible de crée des boutons de type "radio"

<div class="btn-group" role="group">

<input type="radio" class="btn-check" name="btnradio" id="btnradio1" autocomplete="off"
checked>
<label class="btn btn-outline-primary" for="btnradio1">Radio 1</label>
<input type="radio" class="btn-check" name="btnradio" id="btnradio2" autocomplete="off">
<label class="btn btn-outline-primary" for="btnradio2">Radio 2</label>
</div>
 Design des éléments
Les boutons block
Il est possible de crée des boutons qui prennent tout le long du container. Pour cela on applique
la class d-grid. C'est un peu l'équivalent du "width : 100%" en css

<div class="d-grid">
<button class="btn btn-primary" type="button">Button</button>
</div>
5.Les grilles
(LE RETOUR)
 Les grilles
Dispositions
La disposition des grilles est fixe. Ce qui permet donc d'organiser du contenue assez simplement.
Lorsque l'on veux que deux div soit côte à côte. La façon la plus simple est d'utiliser les grids.
<div class="row">
<div class="col">
1 of 2
</div>
<div class="col">
2 of 2
</div>
</div>
 Les grilles
Dispositions – Breakpoints
Les breakpoints sont des largeurs définit par bootstrap qui permettent de "découper" la page
HTML en plusieurs colonne.
Par exemple, col-sm-8 prendra forcément la taille de 2 colonnes. Un peu comme les fragments.
Mais de façon plus simple. La même chose pour col-sm-4.
Un exemple suit la slide suivante
 Les grilles
Dispositions – Breakpoints
<div class="container">
<div class="row">
<div class="col-sm-8">col-sm-8</div>
<div class="col-sm-4">col-sm-4</div>
</div>
<div class="row">
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
</div>
</div>
 Les grilles
Dispositions – row-cols
Comme pour les grilles css, on peut limiter le nombre de colonne.
Pour cela il suffit de rentrer après row-cols le nombre de colonnes maximum souhaité.
Par exemple ici avec une dispo sur 2 colonnes :
<div class="row row-cols-2">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
6.JavaScript et
Bootstrap
 JavaScript et Bootstrap
Présentation
De la même façon que le css, bootstap apporte son lot de simplification pour javascript.
Bootstrap possède également des plug-in jQuery.

jQuery, est un framework javascript qui permet d'écrire des évènements Javascript plus
simplement et plus rapidement. Exactement comme ce que fait bootstrap avec le css.
 JavaScript et Bootstrap
Intégration CDN
De la même façon que pour le css ont doit importer le fichier javascript pour que cela
fonctionne.
2 solutions s'offrent à nous soit via le CDN
CDN : (bundle)
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-
beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-
b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0"
crossorigin="anonymous"></script>
En téléchargeant : (bundle) :
<script src="bootstrap-5.0.0-beta2-dist/js/bootstrap.bundle.js"></script>
7.Les composants de
base
 Les composants de base
Les navbars
Lors des cours d'HTML nous avons crée des barres de navigation à la main. Soit avec des flex ou
avec des grids. La avec bootstrap vous allez avoir une barre de navigation déjà toute faites, et la
modifier à souhait.
 Les composants de base
Les navbars
Pour réaliser une barre de navigation avec un logo a gauche et un texte rien de plus simple
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="/docs/5.0/assets/brand/bootstrap-logo.svg" alt="" width="30" height="24"
class="d-inline-block align-top">
Bootstrap
</a>
</div>
</nav>
 Les composants de base
Dropdown
Pour faire un dropdown il faut d'abord déclarer en plus de class nav-item la class dropdown
Puis un dropdown-toggle avec le nom qu'aura le lien enfin on mets le menu
 Les composants de base
Dropdown
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" role="button"
data-bs-toggle="dropdown">
Dropdown link
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item">Action</a></li>
<li><a class="dropdown-item">Another action</a></li>
</ul>
</li>
 Les navbars
Exercice
Crée une barre de navigation pour la marque Logitech avec les éléments suivants :
o Nom de la marque en tant que "logo"
o Un menu déroulant Produits :
o Clavier souris
o Hauts parleurs
o Casques

oLien vers une page contact.html

oBonus : Barre de recherche
 Les composants de base
Les messages d'alertes
En JavaScript on a vue que l'on pouvait afficher ou cacher une div au clique. De ce fait bootstrap
à mis en place une des div qu'ils appellent alerts.
https://getbootstrap.com/docs/5.1/components/alerts/

<div class="alert alert-primary" role="alert">

A simple primary alert—check it out!
</div>
 Les composants de base
Les barres de progression
Bootstrap va vous permettre de mettre en place une barre de progression (ou de chargement)
assez simplement sur votre site web
https://getbootstrap.com/docs/5.1/components/progress/

<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 75%" aria-valuenow="75" aria-
valuemin="0" aria-valuemax="100"></div>
</div>
 Les composants de base
Les cards
Les cards sont depuis l'arrivé de bootstrap 4 le composant phare.
https://getbootstrap.com/docs/5.1/components/card/

<div class="card" style="width: 18rem;">

<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of
the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
8. Les animations simple
 Les animations simple
L'accordéon
L'accordéon est très utilisés dans les pages web pour afficher une partie puis une autre au
clique.
https://getbootstrap.com/docs/5.1/components/accordion/
<div class="accordion" id="accordionExample">
<div class="accordion-item">
….
</div>
</div>
 Les animations simple
Carrousel
Le carrousel (aussi appelé slider) est très utilisés dans les pages web pour afficher des images,
ou faire des défiler des photos assez simplement.
https://getbootstrap.com/docs/5.1/components/carousel/
<div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="..." class="d-block w-100" alt="...">
</div>
…..
</div>
</div>
 Les animations simple
Les modals
En JS, nous avons vue les pop-ups alert qui sont réalité très peu utilisé, au profit des modals.
https://getbootstrap.com/docs/5.1/components/modal/

<div class="modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
 Les animations simple
Les onglets
Les onglets sont juste des barres de navigation que bootstrap à "remodelé" pour qu'il soit utilisable
dans le corps de la page.
https://getbootstrap.com/docs/5.1/components/navs-tabs/
<ul class="nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
 Les animations simple
Exercice
Faites un accordéon avec 3 niveaux dans lequel il y aura un bouton qui affiche une modal
 Les animations simple
Exercice
Faire un bouton pour afficher une modal.
La modal contiendra un accordéon à 4 niveaux.
Dans le premier niveau il y aura :
4 Cards mis en grid
Dans le deuxième niveau il y aura :
Un carousel avec 4 images.
Dans le troisième niveau il y aura :
Un paragraphe de texte (Lorem)
Dans le quatrieme niveau il y aura :
2 paragraphes de texte (Lorem)
9.Les icones
 Les icones
Intégration CDN
Bootstrap possède sa propre librairie d'icone que vous pouvez ajouté à votre site assez
simplement.
https://icons.getbootstrap.com/#install
Copier le lien CDN :
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-
icons@1.4.0/font/bootstrap-icons.css">

Bien sûr rien ne vous empêche d'utiliser d'autre librairie en complément

(https://fontawesome.com/, https://materializecss.com/icons.html, …)
 Les icones
Fonctionnement
Pour le fonctionnement, on mets dans la class le nom de l'élément que l'on veux.
<i class="bi-alarm"></i>

On peut facilement changer la couleur de l'icone avec la propriété css, color.

<i class="bi-alarm" style="color: red;"></i>

(Le style inline est bien sûr non recommandé mais utilisé ici pour simplifié la compréhension)
 Les icones
Exercice
Crée une modal qui m'affiche un formulaire.
A la place du nom et prénom de l'utilisateur, ça sera remplacer par un logo utilisateur.
Et une icone pour l'email
10. Les thèmes
bootstrap
 Les thèmes bootstrap
Présentation
Des thèmes payants (des thèmes gratuit sont disponible sur d'autres site) sont disponible via la
plateforme :
https://themes.getbootstrap.com/
Il vous permettra d'avoir un site déjà réalisé il manquera plus qu'a le remplacer avec vos
éléments
Attention quand même à l'endroit ou vous prenez les tout n'est pas gratuit et surtout certains
possèdes des copyrights
 Bootstrap
Le mot de la fin
Bien sur ce cours ne vous montres pas tout l'étendu de la puissance de Bootstrap. Actuellement,
la version 5 est encore en beta elle devrait être effective d'ici peut.
Beaucoup d'autre framework css existe (exemple Materialize, Semantic-UI, Foundation, Bulma),
mais le principe restera toujours le même, un lien du CDN et des class pour que le framework
sache quel composant vous voulez appeler.

Il me restes plus qu'a vous souhaiter bon courage pour implémenter tout cela dans vos projets
perso.
 Bootstrap
Exercice portfolio
Dans une page html faire :
• Une navbar (Nom/Prénom/ logo, accueil, Projets, contact)
• Un carrousel
• Grid card (6 cards)
Sur la page contact :
• Nom/Prénom/email/profession/TextArea pour pouvoir mettre un commentaire
• Formulaire de contact avec des icones dans les labels