Cours Bootstrap

Framework bootstrap

Prof.: Hassan IBNOEL FATA 1

Cours Bootstrap

SOMMAIRE

Prof.: Hassan IBNOEL FATA 2

Cours Bootstrap

1- Installation :

2- Containers :
<div class="container">
<!-- Content here -->
</div>

.container-fluid pour un conteneur de largeur complète, couvrant toute la

largeur de la fenêtre.

Exemple :

<div class="container-fluid">
...
</div>

3- Comment ça fonctionne
Le système de grille de Bootstrap utilise une série de conteneurs, de lignes et de
colonnes pour mettre en forme et aligner le contenu. Il est construit
avec flexbox et est entièrement réactif.

4- Options de grille
Petit Moyenne Grand Extra large
Très petit ≥576px ≥768px ≥992px ≥1200px
<576px
Largeur maximale Aucun (auto) 540px 720px 960px 1140px
du conteneur
Préfixe de classe .col- .col-sm- .col-md- .col-lg- .col-xl-

# de colonnes 12

Exemple :
<div class="container">

Prof.: Hassan IBNOEL FATA 3

Cours Bootstrap

<div class="row">
<div class="col-12 col-md-8">.col-12 .col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

<div class="row">
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

<div class="row">
<div class="col-6">.col-6</div>
<div class="col-6">.col-6</div>
</div>
</div>

Remarque :
La propriété offset-type-nombre permet de sauter nombre colonne

5- Les tables :
En raison de l'utilisation généralisée des tables à travers des widgets tiers tels
que des calendriers et des sélecteurs de date, nous avons conçu nos tables pour
être opt-in . Ajoutez simplement la classe de base .table à n’importe
laquelle <table>

Listes des classes :

classes Description
.table
table-dark Inverser les couleurs
thead-dark Inverser les couleurs du header
<thead class="thead-dark">
thead-light Mettre le header en effet light

Lignes rayées
table-striped

Table bordée
table-bordered

Table sans bordure

table-borderless

Rangées Hoverable
table-hover

Petite table
table-sm

Prof.: Hassan IBNOEL FATA 4

Cours Bootstrap

Table responsive
table-responsive

Les backgrounds :
Couleur
primary

success

warning

danger

info

6- Images
Listes des classes :
Classes Description
img-fluid Les images dans Bootstrap sont réactives avec .img-
fluid. max-width: 100%;et height: auto;sont appliqués à
l'image
rounded Appliquer border-radius

Exemple :

7- Les figures
Chaque fois que vous devez afficher un élément de contenu, comme une image
avec une légende facultative, utilisez un <figure>.
Utilisez les inclus .figure, .figure-img et les .figure-caption classes de fournir
des styles de base pour le HTML5 <figure>et les <figcaption>éléments. Les
images en chiffres n'ont pas de taille explicite, assurez-vous donc d'ajouter
la .img-fluid classe à votre contenu <img>pour le rendre responsive.
Exemple :
<figure class="figure">
<img src="..." class="figure-img img-fluid rounded" alt="...">
<figcaption class="figure-caption">texte description.</figcaption>
</figure>

Prof.: Hassan IBNOEL FATA 5

Cours Bootstrap

8- Les alertes
Pour la création des alertes en utilise la classe alert

alert-info

alert

Alert-success

Alert-danger

Alert-warning

Alert-info

Exemple :

9- Badges :

Les badges sont mis à l'échelle pour correspondre à la taille de l'élément

parent immédiat en utilisant la taille et les em unités de police relatives.

<span class="badge badge-primary">Primary</span>

<span class="badge badge-secondary">Secondary</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-danger">Danger</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-info">Info</span>
<span class="badge badge-light">Light</span>
<span class="badge badge-dark">Dark</span>

La classe badge-pill permet d’arrondir la composante badge

Exemple :
<button type="button" class="btn btn-primary">
Messages <span class="badge badge-light">9</span>
</button>

Prof.: Hassan IBNOEL FATA 6

Cours Bootstrap

10- breadcrumb
Indiquez l'emplacement de la page en cours dans une hiérarchie de navigation
qui ajoute automatiquement des séparateurs via CSS.

Exemple :

<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item active" aria-
current="page">Accueil</li>
</ol>
</nav>

<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#"> Accueil </a></li>
<li class="breadcrumb-item active" aria-
current="page">Services </li>
</ol>
</nav>

<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#"> Accueil </a></li>
<li class="breadcrumb-item"><a href="#"> Services </a></li>
<li class="breadcrumb-item active" aria-
current="page">Data</li>
</ol>
</nav>

11- Boutons

Prof.: Hassan IBNOEL FATA 7

Cours Bootstrap

Bootstrap comprend plusieurs styles de boutons prédéfinis, chacun servant son

propre but sémantique, avec quelques extras ajoutés pour plus de contrôles :

<button type="button" class="btn btn-primary">Primary</button>

<button type="button" class="btn
secondary">Secondary</button>
<button type="button" class="btn
<button type="button" class="btn
<button type="button" class="btn
<button type="button" class="btn
<button type="button" class="btn
<button type="button" class="btn
btn-
btn-success">Success</button>
btn-danger">Danger</button>
btn-warning">Warning</button>
btn-info">Info</button>
btn-light">Light</button>
btn-dark">Dark</button>

<button type="button" class="btn btn-link">Link</button>

Exemple 2 :

<button type="button" class="btn btn-outline-primary">Primary</button>

<button type="button" class="btn
secondary">Secondary</button>
<button type="button" class="btn
success">Success</button>
<button type="button" class="btn
<button type="button" class="btn
warning">Warning</button>
<button type="button" class="btn
<button type="button" class="btn
<button type="button" class="btn
btn-outline-
btn-outline-
btn-outline-danger">Danger</button>
btn-outline-
btn-outline-info">Info</button>
btn-outline-light">Light</button>
btn-outline-dark">Dark</button>

Remarque :
Pour modifier la taille d’un bouton, en utilise la classe :btn-taille (xl , md , xs)

Groupe de boutons
Exemple :

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

<button type="button" class="btn btn-secondary">Geuche</button>
<button type="button" class="btn btn-secondary">Milieu</button>
<button type="button" class="btn btn-secondary">Droite</button>
</div>

Prof.: Hassan IBNOEL FATA 8

Cours Bootstrap

12- Cartes :
Une carte est un conteneur de contenu flexible et extensible. Il comprend des options
pour les en-têtes et les pieds de page, une grande variété de contenu, des couleurs
d’arrière-plan contextuelles et de puissantes options d’affichage

Syntaxe :
<div class="card">
<div class="card-header">
Entete
</div>
<div class="card-body">
<h5 class="card-title">Titre</h5>
<p class="card-text">Texte</p>
</div>
<div class="card-footer">
pied
</div>
</div>

13- La classe : card-group

<div class="card-group">
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
</div>

14- Carrousel :
Le carrousel est un diaporama permettant de parcourir une série de contenus, construits avec
des transformations CSS 3D :
Exemple :

Prof.: Hassan IBNOEL FATA 9

Cours Bootstrap

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/bootstrap.min.css">

<script src="js/jquery.js" ></script>

<script src="js/bootstrap.min.js" ></script>

</head>
<body>
<div class="container">

<div id="bs4-slide-carousel" class="carousel slide" data-

ride="carousel" >
<ol class="carousel-indicators">
<li data-target="#carouselExampleCaptions" data-slide-
to="0" class="active"></li>
<li data-target="#carouselExampleCaptions" data-slide-
to="1"></li>
<li data-target="#carouselExampleCaptions" data-slide-
to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="images/image3.jpg" class="d-block w-100"
alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>First slide label</h5>
<p>Nulla vitae elit libero, a pharetra augue mollis
interdum.</p>
</div>
</div>
<div class="carousel-item">
<img src="images/image1.jpg" class="d-block w-100"
alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Second slide label</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing
elit.</p>
</div>
</div>
<div class="carousel-item">
<img src="images/image2.jpg" class="d-block w-100"
alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Third slide label</h5>
<p>Praesent commodo cursus magna, vel scelerisque nisl
consectetur.</p>

Prof.: Hassan IBNOEL FATA 10

Cours Bootstrap

</div>
</div>
</div>

</div>
</div>
<script>
$('#bs4-slide-carousel').carousel({
interval: 1000
})
</script>
</body>
</html>

15- Des listes déroulantes

Les menus déroulants sont des superpositions contextuelles basculables permettant
d’afficher des listes de liens et plus encore.

<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<meta name="viewport" content="width=device-width, initial-
scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jquery.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="dropdown">
<button type="button" class="btn btn-primary dropdown-
toggle" data-toggle="dropdown">
Dropdown button
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
</div>
</div>
</div>
</body>
</html>

Prof.: Hassan IBNOEL FATA 11