Création des pages web
CM 4 : Bootstrap
Bootstrap
› Est un framework CSS.
› Le but est d’automatiser des tâches récurrentes et
d’économiser du temps en adaptant des solutions
standard.
› Il prédéfinit des styles CSS qui peuvent être utilisés
directement sur votre page.
› On présentera la version 4.
5
Pourquoi Bootstrap
› Permet d'économiser le temps: on se concentre sur le développement et
pas sur l'IU.
› Design réactif: Bootstrap permet de créer des designs réactifs – les
pages WEB apparaissent correctement sur des tailles d'écran différents.
› Apparence consistante: tous les composants de Bootstrap partagent les
mêmes modèles et styles.
› Facile à utiliser: toute personne connaissant HTML et CSS peut utiliser
Bootstrap.
› Compatibilité: Bootstrap est compatible avec tous les navigateurs
récents.
› Open Source.
Éléments d'interface utilisateur
› Listes
› Tableaux
› Formulaires
› Boutons
› Icones
› Navigation
› Pagination
› Labels, badges, barres de progression
› Dialogues
Obtenir Bootstrap
› [Link]
› Version complète et minimale
› Répertoires: css/ fonts/ js/
› Possibilité d'utiliser le CDN:
<link rel="stylesheet" href="[Link]
integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
› Pour VSCode on suggère de rajouter une extension
Bootstrap 4, par ex. « Bootstrap 4, Font awesome 4, Font
Awesome 5 Free & Pro snippets »
sha384-uWxY/CJNBR+1zjPWmfnSnVxwRheevXITnMqoEIeG1LJrdI0GlVs/9cVSyPYXdcSF
Structure d'une page Bootstrap
<!doctype html>
<html lang="en">
<head>
<!-- Metas requis -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="[Link]
integrity="sha384-uWxY/CJNBR+1zjPWmfnSnVxwRheevXITnMqoEIeG1LJrdI0GlVs/9cVSyPYXdcSF" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<h1>Bonjour!</h1>
HTML avec classes Bootstrap
<!-- JavaScript optionnel pour les interactions-->
<script src="[Link]
integrity="sha384-kQtW33rZJAHjgefvhyyzcGF3C5TFyBQBA13V1RKPf4uH+bwyzQxZ6CmMZHmNBEfJ" crossorigin="anonymous">
</script>
</body>
</html>
La grille
› Les éléments sont placés sur une grille.
› La grille de Bootstrap a 12 colonnes.
› La largeur de la colonne est relative et dépend de la taille
de l’écran (testez les différentes tailles dans le navigateur
dans le mode responsive – Ctrl-Shift-m).
› Elle est faite avec flexbox.
Utiliser la grille
<div class="container">
<div class="row">
<div class="col-3">Gauche</div>
<div class="col-9">Droite</div>
</div>
</div>
Gauche Droite
col-3 indique que la largeur de la colonne est 3 cases de la grille
Sans numéro: largeur automatique
Tailles d’écran
XS SM MD LG XL
Très petit Petit (tablette) Moyen (portable) Grand Très grand
Largeur < 576 px >= 576 px >= 768 px >= 992 px >= 1200 px
maximale
Classe col-* col-sm-* col-md-* col-lg-* col-xl-*
On peut utiliser plusieurs classes afin de spécifier la taille de l’élément par
rapport aux tailles d’écran
Utiliser la grille (tailles d’écran différentes)
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-2">Gauche</div>
<div class="col-md-9 col-sm-4">Droite</div>
</div>
</div>
Gauche Droite
Gauche Droite
Containeur
› Par défaut Bootstrap laisse de la place autour du
containeur.
› En utilisant container-fluid à la place de container on
prend toute la place.
› Il existe des versions container-* (par ex. container-md)
qui ont un comportement mixte: container jusqu’à la taille
et container-fluid au-dessous de la taille.
Manipulation de la grille
› Sauter les colonnes: offset-lg-*
› Ordonner les colonnes: order-* order-first order-last
› Imbriquer les colonnes
12 colonnes
5 colonnes
5 colonnes
6 colonnes 6 colonnes
2 6 colonnes
cols
12 colonnes
Imbrication
<div class="container">
<div class="row">
<div class="col-md-12">12 colonnes</div>
12 colonnes
</div>
5 colonnes
<div class="row"> 5 colonnes
<div class="col-md-5">5 colonnes</div> 6 colonnes 6 colonnes
<div class="col-md-5 offset-md-2">5 colonnes 2 6 colonnes
cols
<div class="row">
<div class="col-md-6">6 colonnes</div> 12 colonnes
<div class="col-md-6">6 colonnes</div>
</div>
<div class="row">
<div class="col-md-2">2 colonnes</div>
<div class="col-md-6 offset-md-4">6 colonnes</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">12 colonnes</div>
</div>
</div>
Colonnes automatiques
<div class="container">
<div class="row">
<div class="col">1</div>
<div class="col-6">2</div>
<div class="col">3</div>
</div>
<div class="row">
<div class="col">1</div>
<div class="col-5">2</div>
<div class="col">3</div>
</div>
</div>
Retour à la ligne
<div class="container"> <div class="container">
<div class="row row-cols-2"> <div class="row row-cols-3">
<div class="col">Colonne 1</div> <div class="col">Colonne 1</div>
<div class="col">Colonne 2</div> <div class="col">Colonne 2</div>
<div class="col">Colonne 3</div> <div class="col">Colonne 3</div>
<div class="col">Colonne 4</div> <div class="col">Colonne 4</div>
</div> </div>
</div> </div>
Alignement
› Alignement horizontal avec justify-content-*
› Alignement vertical avec align-items-*
› Utilisation des paramètres de flexbox.
<div class="row justify-content-center">
<div class="col-4">1</div>
<div class="col-4">2</div>
</div>
<div class="row justify-content-around">
<div class="col-4">1</div>
<div class="col-4">2</div>
</div>
Visibilité
› Invisible pour >=md: d-md-none
› Visible pour >=md: d-md-block
› Visible à partir de md en invisible au-dessous:
<div class="col-4 d-none d-md-block">1</div>
Marge et padding
› Vous avez des classes prédéfinies pour rajouter de la
marge et du padding:
› Syntaxe: {propriété}{coté}-{taille}
› Propriété: m/p
› Coté: t/b/l/r/x/y
› Taille: 0/1/2/3/4/5/auto
› Exemple: marge 2 et padding-top 1:
<div class="m-2 pt-1">1</div>
› Fonctionne aussi avec une taille d’écran:
<div class="mt-sm-1">1</div>
Couleurs
› Il existe 10 couleurs prédéfinies qui peuvent être utilisées pour
la couleur du texte, fond d’écran ou bordure.
<div class="bg-light text-danger">border</div>
Bordure
› Il est possible de rajouter une bordure en utilisant la
classe border.
<div class="p-3 m-1 bg-light border-primary border">border</div>
› Le style de la bordure peut être également changé.
Texte
› Il y a des styles définis pour tous les éléments HTML.
› Si on utilise des éléments sémantiques, le rendu est
comme attendu.
› Voir la documentation pour plus de détails:
[Link]
Tableaux
› Rajouter la classe table au tableau.
› Style: table-striped, table-bordered, table-hover, table-
dark
› Style de l’entête: thead-light, thead-dark
› Classes couleurs supplémentaires: table-{code couleur}
› Défilement horizontal en petite taille: table-responsive
<table class="table table-bordered table-striped">
<thead class="thead-dark">
<tr><th>No</th><th>Nom</th></tr>
</thead>
<tbody>
<tr><td>1</td><td>Ain</td></tr>
…