Bootstrap Abdali

Framework Bootstrap
Module Programmation web

SIR 2023/2024
Lorsque vous télécharger Bootstrap, cela se présente sous cette forme :
Un dossier js pour l'animation / interactivité.

Un dossier fonts pour les polices / icones.
Un dossier css pour la mise en forme.
Le mot clé "dist" indique qu'il s'agit d'une distribution. Ce

terme est utilisé régulièrement en Informatique
Apprendre Bootstrap et le système de grille 12
colonnes !
• Bootstrap repose sur un système de grille à 12 colonnes. C'est l'un de ses fondements et on ne
peut pas prétendre maitriser Bootstrap sans connaitre ce concept de base.
• Nous allons avoir besoin de faire des tests pour l'expliquer. Je vous propose donc qu'à la racine de
notre installation Bootstrap, nous allons créer un fichier nommé grille.html.
• Voici la base à conserver tout le long de notre tuto :
Col-md2 veut dire 2 emplacements
D'autres tailles d'emplacements sont possibles : col-xs-* ou col-sm-* ou col-md-* ou col-lg-*.
Question : « Je ne comprends pas, c'est le chiffre 1 ou les lettres md qui gère la taille de l'emplacement ? »
Très bonne question, le nombre d'emplacements est géré par le chiffre tandis que la taille d'un emplacement et son elasticité
sont gérées par les lettres :
?
xs, sm, md ou lg.
1. xs = extra small screens (mobile - écran petit)
2. sm = small screens (tablette - écran réduit)
3. md = medium screens (ordinateur portable - écran moyen)
4. lg = large screens (ordinateur de bureau - grand écran)
Pour le comprendre, voici un tableau récapitulatif avec les 4 tailles majeures d'écrans et de résolutions :
Exemple
Quelques explications :
1ère ligne
La classe .row permet de créer une nouvelle ligne.
La classe .col-md-10 permet de créer un nouvel espace qui prend 10 places (sur les 12 possibles).
La classe .col-md-offset-1 permet de créer une marge à gauche d'1 place.
Nous avons donc une zone s'étalant sur 10 emplacements centrés avec 1 emplacement à gauche et 1 à droite de marge (ce qui fait bien 12 au total).
Nous utilisons md pour dire middle, mais nous aurions également pu utiliser xs pour quelque chose de plus petit. Tout ça se trouve dans la doc!
La classe .bordureRouge permet de simplement de voir apparaitre notre zone à l'écran entourée de rouge.
2ème ligne
Ensuite, nous ré-utilisons la classe .row pour créer une nouvelle ligne en dessous.
La classe .col-md-6 permet de créer un nouvel espace qui prend 6 places (sur les 12 possibles).
La classe .col-md-offset-3 permet de créer une marge à gauche de 3 places.
Nous avons donc une zone s'étalant sur 6 emplacements centrés avec 3 emplacements à gauche et 3 à droite de marge (ce qui fait bien 12 au total).
La classe .bordureVerte permet de simplement de voir apparaitre notre zone à l'écran entouré de vert.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="jumbotron text-center">

<h1>My First Bootstrap Page</h1>
<p>Resize this responsive page to see the effect!</p>
</div>
<div class="container">
<div class="row">
<div class="col-sm-4">
<h3>Column 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
<h3>Column 2</h3>
</div>
<h3>Column 3</h3>
</div>
</div>
</div>
</body>
</html>
Conteneurs
Bootstrap nécessite un élément conteneur pour envelopper le contenu
du site.
Les conteneurs sont utilisés pour remplir le contenu qu'ils contiennent,

et il existe deux classes de conteneurs disponibles :
La classe .container fournit un conteneur de largeur fixe réactif

La classe .container-fluid fournit un conteneur pleine largeur, couvrant
toute la largeur de la fenêtre
Conteneur fixe
Utilisez la classe .container pour créer un conteneur réactif de

largeur fixe.
Notez que sa largeur (max-width) changera selon les différentes

tailles d'écran :
Conteneur , Boder et coloration
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
<div class="container p-3 my-3 border">

<p>This container has a border and some extra padding and margins.</p>
</div>
<div class="container p-3 my-3 bg-dark text-white">

<p>This container has a dark background color and a white text, and some extra padding and
margins.</p>
</div>
<div class="container p-3 my-3 bg-primary text-white">

<p>This container has a blue background color and a white text, and some extra padding and
margins.</p>
</div>
</body>
</html>
Essayer ce codage et redimensionner la
fenêtre pour voir l’effet
Système de grille Bootstrap 4
Le système de grille de Bootstrap est construit avec flexbox et permet jusqu'à 12 colonnes sur la page.
Si vous ne souhaitez pas utiliser les 12 colonnes individuellement, vous pouvez les regrouper pour créer
des colonnes plus larges :
Classes de grille
Le système de grille Bootstrap 4 comporte cinq classes :
.col- (très petits appareils - largeur d'écran inférieure à 576px)

.col-sm- (petits appareils - largeur d'écran égale ou supérieure à 576px)
.col-md- (appareils moyens - largeur d'écran égale ou supérieure à 768px)
.col-lg- (grands appareils - largeur d'écran égale ou supérieure à 992px)
.col-xl- (appareils xlarge - largeur d'écran égale ou supérieure à 1200px)
Les classes ci-dessus peuvent être combinées pour créer des mises en page plus dynamiques et flexibles.
Astuce : chaque classe augmente, donc si vous souhaitez définir les mêmes largeurs pour sm et md, il vous
suffit de spécifier sm.
Exemple de 3 colonnes
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div class="container-fluid">
<h1>Three equal width columns</h1>
<p>Note: Try to add a new div with class="col" inside the row class - this will create four equal-width
columns.</p>
<div class="row">
<div class="col" style="background-color:lavender;">.col</div>
<div class="col" style="background-color:orange;">.col</div>
<div class="col" style="background-color:lavender;">.col</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div class="container-fluid">
<h1>Responsive Columns</h1>
<p>Resize the browser window to see the effect.</p>
<p>The columns will automatically stack on top of each other when the screen is less than 576px
wide.</p>
<div class="row">
<div class="col-sm-3" style="background-color:lavender;">.col-sm-3</div>
<div class="col-sm-3" style="background-color:lavenderblush;">.col-sm-3</div>
</div>
</div>
</body>
</html>
<div class="row">
</div>
Bootstrap 4 Colors
Couleurs du texte
Bootstrap 4 a des classes contextuelles qui peuvent être utilisées pour fournir une
"signification à travers les couleurs".
Les classes pour les couleurs du texte sont :

.text-muted,
.text-primary,
.text-success,
.text-info,
.text-warning,
.text-danger,
.text-secondary,
.text-white,
.text- dark,
.text-body (couleur du corps par défaut/souvent noir)
et .text-light :
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></
script>
</head>
<body>
<h2>Contextual Colors</h2>
<p>Use the contextual classes to provide "meaning through colors":</p>
<p class="text-muted">This text is muted.</p>
<p class="text-primary">This text is important.</p>
<p class="text-success">This text indicates success.</p>
<p class="text-info">This text represents some information.</p>
<p class="text-warning">This text represents a warning.</p>
<p class="text-danger">This text represents danger.</p>
<p class="text-secondary">Secondary text.</p>
<p class="text-dark">This text is dark grey.</p>
<p class="text-body">Default body color (often black).</p>
<p class="text-light">This text is light grey (on white background).</p>
<p class="text-white">This text is white (on white background).</p>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
script>
</head>
<body>
<h2>Button Styles</h2>
<button type="button" class="btn">Basic</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-link">Link</button>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
script>
</head>
<body>
<h2>Contextual Backgrounds</h2>
<p>Use the contextual background classes to provide "meaning through colors".</p>
<p>Note that you can also add a .text-* class if you want a different text color:</p>
<p class="bg-primary text-white">This text is important.</p>
<p class="bg-success text-white">This text indicates success.</p>
<p class="bg-info text-white">This text represents some information.</p>
<p class="bg-warning text-white">This text represents a warning.</p>
<p class="bg-danger text-white">This text represents danger.</p>
<p class="bg-secondary text-white">Secondary background color.</p>
<p class="bg-dark text-white">Dark grey background color.</p>
<p class="bg-light text-dark">Light grey background color.</p>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h2>Basic Table</h2>
<p>The .table class adds basic styling (light padding and horizontal dividers) to a table:</p>
<table class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary@example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july@example.com</td>
</tr>
</tbody>
</table>
</div>
</body>
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h2>Striped Rows</h2>
<p>The .table-striped class adds zebra-stripes to a table:</p>
<table class="table table-striped">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h2>Black/Dark Table</h2>
<p>The .table-dark class adds a black background to the table:</p>
<table class="table table-dark">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h2>Hoverable Dark Table</h2>
<p>The .table-hover class adds a hover effect (grey background color) on table rows:</p>
<table class="table table-dark table-hover">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
script>
</head>
<body>
<h2>Rounded Corners</h2>
<p>The .rounded class adds rounded corners to an image:</p>
<img src="cinqueterre.jpg" class="rounded" alt="Cinque Terre" width="304" height="236">
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"
></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></
script>
</head>
<body>
<h2>Circle</h2>
<p>The .rounded-circle class shapes the image to a circle:</p>
<img src="cinqueterre.jpg" class="rounded-circle" alt="Cinque Terre"
width="304" height="236">
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></
script>
</head>
<body>
<h2>Aligning images</h2>
<p>Use the float classes to float the image to the left or to the right:</p>
<img src="paris.jpg" class="float-left" alt="Paris" width="304" height="236">
<img src="paris.jpg" class="float-right" alt="Paris" width="304" height="236">
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
script>
</head>
<body>
<h2>Centered Image</h2>
<p>Center an image by adding the utility classes .mx-auto (margin:auto) and .d-block
(display:block) to the image:</p>
<img src="paris.jpg" class="mx-auto d-block" style="width:50%">
</div>
</body>
</html>

Bootstrap Abdali

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Bootstrap Abdali

Transféré par

Droits d'auteur :

Formats disponibles

Framework Bootstrap

Module Programmation web

Un dossier js pour l'animation / interactivité.

Le mot clé "dist" indique qu'il s'agit d'une distribution. Ce

<div class="jumbotron text-center">

Les conteneurs sont utilisés pour remplir le contenu qu'ils contiennent,

La classe .container fournit un conteneur de largeur fixe réactif

Utilisez la classe .container pour créer un conteneur réactif de

Notez que sa largeur (max-width) changera selon les différentes

<div class="container p-3 my-3 border">

<div class="container p-3 my-3 bg-dark text-white">

<div class="container p-3 my-3 bg-primary text-white">

Le système de grille Bootstrap 4 comporte cinq classes :

.col- (très petits appareils - largeur d'écran inférieure à 576px)

Les classes pour les couleurs du texte sont :

Vous aimerez peut-être aussi