bootstrap - thomas-bodin.comthomas-bodin.com/cours/iim/bootstrap.pdf · bootstrap est un frameworks...
TRANSCRIPT
![Page 1: Bootstrap - thomas-bodin.comthomas-bodin.com/cours/iim/bootstrap.pdf · Bootstrap est un frameworks CSS spécialisé, comme son nom l'indique, dans le CSS ! C'est-à-dire qu'il nous](https://reader030.vdocuments.mx/reader030/viewer/2022021609/5c6ede9b09d3f2461d8b7ab7/html5/thumbnails/1.jpg)
Bootstrap
Version du 14 octobre 2017
![Page 2: Bootstrap - thomas-bodin.comthomas-bodin.com/cours/iim/bootstrap.pdf · Bootstrap est un frameworks CSS spécialisé, comme son nom l'indique, dans le CSS ! C'est-à-dire qu'il nous](https://reader030.vdocuments.mx/reader030/viewer/2022021609/5c6ede9b09d3f2461d8b7ab7/html5/thumbnails/2.jpg)
“
http://thomas-bodin.com/cours/iim/bootstrap.pdf
http://thomas-bodin.com/cours/iim/exercices-bootstrap.zip
2
![Page 3: Bootstrap - thomas-bodin.comthomas-bodin.com/cours/iim/bootstrap.pdf · Bootstrap est un frameworks CSS spécialisé, comme son nom l'indique, dans le CSS ! C'est-à-dire qu'il nous](https://reader030.vdocuments.mx/reader030/viewer/2022021609/5c6ede9b09d3f2461d8b7ab7/html5/thumbnails/3.jpg)
Hello!Je m’appelle Thomas et je suis co-fondateur d’Hidden.market,
une startup dans le domaine du recrutement IT !
Retrouvez moi sur Twitter @ThomasBodinFr
3
![Page 4: Bootstrap - thomas-bodin.comthomas-bodin.com/cours/iim/bootstrap.pdf · Bootstrap est un frameworks CSS spécialisé, comme son nom l'indique, dans le CSS ! C'est-à-dire qu'il nous](https://reader030.vdocuments.mx/reader030/viewer/2022021609/5c6ede9b09d3f2461d8b7ab7/html5/thumbnails/4.jpg)
Planning
4
Getting Started
Components
CSS
Javascript
![Page 5: Bootstrap - thomas-bodin.comthomas-bodin.com/cours/iim/bootstrap.pdf · Bootstrap est un frameworks CSS spécialisé, comme son nom l'indique, dans le CSS ! C'est-à-dire qu'il nous](https://reader030.vdocuments.mx/reader030/viewer/2022021609/5c6ede9b09d3f2461d8b7ab7/html5/thumbnails/5.jpg)
Bootstrap (1/4)
Getting started
5
![Page 6: Bootstrap - thomas-bodin.comthomas-bodin.com/cours/iim/bootstrap.pdf · Bootstrap est un frameworks CSS spécialisé, comme son nom l'indique, dans le CSS ! C'est-à-dire qu'il nous](https://reader030.vdocuments.mx/reader030/viewer/2022021609/5c6ede9b09d3f2461d8b7ab7/html5/thumbnails/6.jpg)
1. Présentation
2. Téléchargement & installation
3. Exemples
4. Compatibilités
6
![Page 7: Bootstrap - thomas-bodin.comthomas-bodin.com/cours/iim/bootstrap.pdf · Bootstrap est un frameworks CSS spécialisé, comme son nom l'indique, dans le CSS ! C'est-à-dire qu'il nous](https://reader030.vdocuments.mx/reader030/viewer/2022021609/5c6ede9b09d3f2461d8b7ab7/html5/thumbnails/7.jpg)
1. Présentation
Un framework ?
Un framework est un ensemble de composants structurés qui sert à créer les bases et à organiser le code informatique pour faciliter le travail des programmeurs, que ce soit en terme de productivité ou de simplification de la maintenance. Il en existe beaucoup pour les applications web qui ciblent de nombreux langages : Java, Python, Ruby, PHP…
Bootstrap est un frameworks CSS spécialisé, comme son nom l'indique, dans le CSS ! C'est-à-dire qu'il nous aide à mettre en forme les pages web : organisation, aspect, animation…
Bootstrap est un framework CSS, mais pas seulement, puisqu'il embarque également des composants HTML et JavaScript.
7
![Page 8: Bootstrap - thomas-bodin.comthomas-bodin.com/cours/iim/bootstrap.pdf · Bootstrap est un frameworks CSS spécialisé, comme son nom l'indique, dans le CSS ! C'est-à-dire qu'il nous](https://reader030.vdocuments.mx/reader030/viewer/2022021609/5c6ede9b09d3f2461d8b7ab7/html5/thumbnails/8.jpg)
1. PrésentationIntérêts de Bootstrap
▫ Cross-browser, c'est à dire que la présentation est similaire quel que soit le navigateur utilisé
▫ Gagner du temps de développement parce qu'il nous propose les fondations de la présentation
▫ Propose une grille pour faciliter le positionnement des éléments
▫ Eléments complémentaires : boutons esthétiques, barres de navigation, etc…
▫ Responsive Web Design
8
![Page 9: Bootstrap - thomas-bodin.comthomas-bodin.com/cours/iim/bootstrap.pdf · Bootstrap est un frameworks CSS spécialisé, comme son nom l'indique, dans le CSS ! C'est-à-dire qu'il nous](https://reader030.vdocuments.mx/reader030/viewer/2022021609/5c6ede9b09d3f2461d8b7ab7/html5/thumbnails/9.jpg)
1. Présentation
Inconvénients de Bootstrap
▫ Pour l’utiliser efficacement il faut bien le connaître, ce qui implique un temps d'apprentissage
▫ La normalisation de la présentation peut devenir lassante en lissant les effets visuels
9
![Page 10: Bootstrap - thomas-bodin.comthomas-bodin.com/cours/iim/bootstrap.pdf · Bootstrap est un frameworks CSS spécialisé, comme son nom l'indique, dans le CSS ! C'est-à-dire qu'il nous](https://reader030.vdocuments.mx/reader030/viewer/2022021609/5c6ede9b09d3f2461d8b7ab7/html5/thumbnails/10.jpg)
1. Présentation
Origines
Le projet Bootstrap a été créé au départ par Mark Otto et Jacob Thornton pour répondre à des besoins internes de développement de Twitter au niveau de l'uniformisation de l'aspect des pages web. Il s'agissait juste de stylisation CSS, mais le framework s'est ensuite enrichi de composants Javascript.
Il a ensuite été publié en 2011 en devenant rapidement populaire parce qu'il est venu se positionner dans un espace vacant du développement. Son système de grille de 12 colonnes est devenu une référence.
Le framework en est actuellement à la version 3. La version 4 est actuellement en phase de finalisation.
10
![Page 11: Bootstrap - thomas-bodin.comthomas-bodin.com/cours/iim/bootstrap.pdf · Bootstrap est un frameworks CSS spécialisé, comme son nom l'indique, dans le CSS ! C'est-à-dire qu'il nous](https://reader030.vdocuments.mx/reader030/viewer/2022021609/5c6ede9b09d3f2461d8b7ab7/html5/thumbnails/11.jpg)
11
2. Téléchargement & installation
![Page 12: Bootstrap - thomas-bodin.comthomas-bodin.com/cours/iim/bootstrap.pdf · Bootstrap est un frameworks CSS spécialisé, comme son nom l'indique, dans le CSS ! C'est-à-dire qu'il nous](https://reader030.vdocuments.mx/reader030/viewer/2022021609/5c6ede9b09d3f2461d8b7ab7/html5/thumbnails/12.jpg)
12
3. Exemples
![Page 13: Bootstrap - thomas-bodin.comthomas-bodin.com/cours/iim/bootstrap.pdf · Bootstrap est un frameworks CSS spécialisé, comme son nom l'indique, dans le CSS ! C'est-à-dire qu'il nous](https://reader030.vdocuments.mx/reader030/viewer/2022021609/5c6ede9b09d3f2461d8b7ab7/html5/thumbnails/13.jpg)
13
4. Compatibilités
![Page 14: Bootstrap - thomas-bodin.comthomas-bodin.com/cours/iim/bootstrap.pdf · Bootstrap est un frameworks CSS spécialisé, comme son nom l'indique, dans le CSS ! C'est-à-dire qu'il nous](https://reader030.vdocuments.mx/reader030/viewer/2022021609/5c6ede9b09d3f2461d8b7ab7/html5/thumbnails/14.jpg)
Mise en place de l'environnement :
1) Créer un dossier “Bootstrap” sur votre ordinateur
2) Vous mettrez dans ce dossier des sous-dossiers pour
chaque exercice de ce cours
3) Ouvrez le dossier “Bootstrap” dans votre éditeur
4) Créer un fichier index.html dans le dossier “Bootstrap”
5) Installer Bootstrap
6) Appliquer sur votre body la class “text-center”
14
![Page 15: Bootstrap - thomas-bodin.comthomas-bodin.com/cours/iim/bootstrap.pdf · Bootstrap est un frameworks CSS spécialisé, comme son nom l'indique, dans le CSS ! C'est-à-dire qu'il nous](https://reader030.vdocuments.mx/reader030/viewer/2022021609/5c6ede9b09d3f2461d8b7ab7/html5/thumbnails/15.jpg)
<!doctype html><html lang="fr"> <head> <meta charset="utf-8"> <title>Bootstrap </title> <meta name="description" content="Cours Bootstrap"> </head> <body> <h1>Mon 1er titre</h1> <p>Lorem ipsum <span>dolor sit amet</span>, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h2>Mon 2e titre</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<a href="#">Mon lien</a>
</body></html>
15
![Page 16: Bootstrap - thomas-bodin.comthomas-bodin.com/cours/iim/bootstrap.pdf · Bootstrap est un frameworks CSS spécialisé, comme son nom l'indique, dans le CSS ! C'est-à-dire qu'il nous](https://reader030.vdocuments.mx/reader030/viewer/2022021609/5c6ede9b09d3f2461d8b7ab7/html5/thumbnails/16.jpg)
16
![Page 17: Bootstrap - thomas-bodin.comthomas-bodin.com/cours/iim/bootstrap.pdf · Bootstrap est un frameworks CSS spécialisé, comme son nom l'indique, dans le CSS ! C'est-à-dire qu'il nous](https://reader030.vdocuments.mx/reader030/viewer/2022021609/5c6ede9b09d3f2461d8b7ab7/html5/thumbnails/17.jpg)
Bootstrap (2/4)
CSS
17
![Page 18: Bootstrap - thomas-bodin.comthomas-bodin.com/cours/iim/bootstrap.pdf · Bootstrap est un frameworks CSS spécialisé, comme son nom l'indique, dans le CSS ! C'est-à-dire qu'il nous](https://reader030.vdocuments.mx/reader030/viewer/2022021609/5c6ede9b09d3f2461d8b7ab7/html5/thumbnails/18.jpg)
1. Système de grille
2. Typos
3. Formulaires
4. Boutons
5. Images
6. Helpers
7. Responsive utilities
18
![Page 19: Bootstrap - thomas-bodin.comthomas-bodin.com/cours/iim/bootstrap.pdf · Bootstrap est un frameworks CSS spécialisé, comme son nom l'indique, dans le CSS ! C'est-à-dire qu'il nous](https://reader030.vdocuments.mx/reader030/viewer/2022021609/5c6ede9b09d3f2461d8b7ab7/html5/thumbnails/19.jpg)
19
1. Système de grille
![Page 20: Bootstrap - thomas-bodin.comthomas-bodin.com/cours/iim/bootstrap.pdf · Bootstrap est un frameworks CSS spécialisé, comme son nom l'indique, dans le CSS ! C'est-à-dire qu'il nous](https://reader030.vdocuments.mx/reader030/viewer/2022021609/5c6ede9b09d3f2461d8b7ab7/html5/thumbnails/20.jpg)
Exercice 1 :
1. Créer un système de colonne responsive a. 4 colonnes (dans un container)b. 3 colonnes (dans un container)c. 2 colonnes (sur toute la largeur de l’écran)
2. Créer des colonnes avec des décalagesa. 5 - (2) - 5 (sur toute la largeur de l’écran)b. (1) - 11 (dans un container)
20
![Page 21: Bootstrap - thomas-bodin.comthomas-bodin.com/cours/iim/bootstrap.pdf · Bootstrap est un frameworks CSS spécialisé, comme son nom l'indique, dans le CSS ! C'est-à-dire qu'il nous](https://reader030.vdocuments.mx/reader030/viewer/2022021609/5c6ede9b09d3f2461d8b7ab7/html5/thumbnails/21.jpg)
21
![Page 22: Bootstrap - thomas-bodin.comthomas-bodin.com/cours/iim/bootstrap.pdf · Bootstrap est un frameworks CSS spécialisé, comme son nom l'indique, dans le CSS ! C'est-à-dire qu'il nous](https://reader030.vdocuments.mx/reader030/viewer/2022021609/5c6ede9b09d3f2461d8b7ab7/html5/thumbnails/22.jpg)
22
2. Typos
![Page 23: Bootstrap - thomas-bodin.comthomas-bodin.com/cours/iim/bootstrap.pdf · Bootstrap est un frameworks CSS spécialisé, comme son nom l'indique, dans le CSS ! C'est-à-dire qu'il nous](https://reader030.vdocuments.mx/reader030/viewer/2022021609/5c6ede9b09d3f2461d8b7ab7/html5/thumbnails/23.jpg)
Exercice 2 :
1. Centrer les titres de niveau 1 et 22. Passer tous les titres en majuscule
23
![Page 24: Bootstrap - thomas-bodin.comthomas-bodin.com/cours/iim/bootstrap.pdf · Bootstrap est un frameworks CSS spécialisé, comme son nom l'indique, dans le CSS ! C'est-à-dire qu'il nous](https://reader030.vdocuments.mx/reader030/viewer/2022021609/5c6ede9b09d3f2461d8b7ab7/html5/thumbnails/24.jpg)
24
![Page 25: Bootstrap - thomas-bodin.comthomas-bodin.com/cours/iim/bootstrap.pdf · Bootstrap est un frameworks CSS spécialisé, comme son nom l'indique, dans le CSS ! C'est-à-dire qu'il nous](https://reader030.vdocuments.mx/reader030/viewer/2022021609/5c6ede9b09d3f2461d8b7ab7/html5/thumbnails/25.jpg)
Exercice 3 :
1. Liste sans puce2. Liste sans puce et côte à côte pour faire un menu
25
![Page 26: Bootstrap - thomas-bodin.comthomas-bodin.com/cours/iim/bootstrap.pdf · Bootstrap est un frameworks CSS spécialisé, comme son nom l'indique, dans le CSS ! C'est-à-dire qu'il nous](https://reader030.vdocuments.mx/reader030/viewer/2022021609/5c6ede9b09d3f2461d8b7ab7/html5/thumbnails/26.jpg)
26
![Page 27: Bootstrap - thomas-bodin.comthomas-bodin.com/cours/iim/bootstrap.pdf · Bootstrap est un frameworks CSS spécialisé, comme son nom l'indique, dans le CSS ! C'est-à-dire qu'il nous](https://reader030.vdocuments.mx/reader030/viewer/2022021609/5c6ede9b09d3f2461d8b7ab7/html5/thumbnails/27.jpg)
27
3. Formulaires
![Page 28: Bootstrap - thomas-bodin.comthomas-bodin.com/cours/iim/bootstrap.pdf · Bootstrap est un frameworks CSS spécialisé, comme son nom l'indique, dans le CSS ! C'est-à-dire qu'il nous](https://reader030.vdocuments.mx/reader030/viewer/2022021609/5c6ede9b09d3f2461d8b7ab7/html5/thumbnails/28.jpg)
28
4. Boutons
![Page 29: Bootstrap - thomas-bodin.comthomas-bodin.com/cours/iim/bootstrap.pdf · Bootstrap est un frameworks CSS spécialisé, comme son nom l'indique, dans le CSS ! C'est-à-dire qu'il nous](https://reader030.vdocuments.mx/reader030/viewer/2022021609/5c6ede9b09d3f2461d8b7ab7/html5/thumbnails/29.jpg)
Exercice 4 :
1. Créer un petit formulaire2. Mettre un gros bouton bleu “Envoyer”
29
![Page 30: Bootstrap - thomas-bodin.comthomas-bodin.com/cours/iim/bootstrap.pdf · Bootstrap est un frameworks CSS spécialisé, comme son nom l'indique, dans le CSS ! C'est-à-dire qu'il nous](https://reader030.vdocuments.mx/reader030/viewer/2022021609/5c6ede9b09d3f2461d8b7ab7/html5/thumbnails/30.jpg)
30
![Page 31: Bootstrap - thomas-bodin.comthomas-bodin.com/cours/iim/bootstrap.pdf · Bootstrap est un frameworks CSS spécialisé, comme son nom l'indique, dans le CSS ! C'est-à-dire qu'il nous](https://reader030.vdocuments.mx/reader030/viewer/2022021609/5c6ede9b09d3f2461d8b7ab7/html5/thumbnails/31.jpg)
31
5. Images
![Page 32: Bootstrap - thomas-bodin.comthomas-bodin.com/cours/iim/bootstrap.pdf · Bootstrap est un frameworks CSS spécialisé, comme son nom l'indique, dans le CSS ! C'est-à-dire qu'il nous](https://reader030.vdocuments.mx/reader030/viewer/2022021609/5c6ede9b09d3f2461d8b7ab7/html5/thumbnails/32.jpg)
Exercice 5 :
1. Rendre les logos et l’image responsive2. Arrondir l’image
32
![Page 33: Bootstrap - thomas-bodin.comthomas-bodin.com/cours/iim/bootstrap.pdf · Bootstrap est un frameworks CSS spécialisé, comme son nom l'indique, dans le CSS ! C'est-à-dire qu'il nous](https://reader030.vdocuments.mx/reader030/viewer/2022021609/5c6ede9b09d3f2461d8b7ab7/html5/thumbnails/33.jpg)
33
![Page 34: Bootstrap - thomas-bodin.comthomas-bodin.com/cours/iim/bootstrap.pdf · Bootstrap est un frameworks CSS spécialisé, comme son nom l'indique, dans le CSS ! C'est-à-dire qu'il nous](https://reader030.vdocuments.mx/reader030/viewer/2022021609/5c6ede9b09d3f2461d8b7ab7/html5/thumbnails/34.jpg)
34
6. Helpers
![Page 35: Bootstrap - thomas-bodin.comthomas-bodin.com/cours/iim/bootstrap.pdf · Bootstrap est un frameworks CSS spécialisé, comme son nom l'indique, dans le CSS ! C'est-à-dire qu'il nous](https://reader030.vdocuments.mx/reader030/viewer/2022021609/5c6ede9b09d3f2461d8b7ab7/html5/thumbnails/35.jpg)
35
7. Responsive utilities
![Page 36: Bootstrap - thomas-bodin.comthomas-bodin.com/cours/iim/bootstrap.pdf · Bootstrap est un frameworks CSS spécialisé, comme son nom l'indique, dans le CSS ! C'est-à-dire qu'il nous](https://reader030.vdocuments.mx/reader030/viewer/2022021609/5c6ede9b09d3f2461d8b7ab7/html5/thumbnails/36.jpg)
Exercice 6 :
Rendre le site responsive1. Sur tablette :
a. Cacher la barre de connexionb. Cacher le menu
2. Sur mobile :a. Cacher la barre de connexionb. Cacher le menuc. Cacher image dans le pied de paged. Mettre les contenus textes les uns en dessous
des autrese. Mettre les éléments du pied de page les uns en
dessous des autres
36
![Page 37: Bootstrap - thomas-bodin.comthomas-bodin.com/cours/iim/bootstrap.pdf · Bootstrap est un frameworks CSS spécialisé, comme son nom l'indique, dans le CSS ! C'est-à-dire qu'il nous](https://reader030.vdocuments.mx/reader030/viewer/2022021609/5c6ede9b09d3f2461d8b7ab7/html5/thumbnails/37.jpg)
37
![Page 38: Bootstrap - thomas-bodin.comthomas-bodin.com/cours/iim/bootstrap.pdf · Bootstrap est un frameworks CSS spécialisé, comme son nom l'indique, dans le CSS ! C'est-à-dire qu'il nous](https://reader030.vdocuments.mx/reader030/viewer/2022021609/5c6ede9b09d3f2461d8b7ab7/html5/thumbnails/38.jpg)
38
![Page 39: Bootstrap - thomas-bodin.comthomas-bodin.com/cours/iim/bootstrap.pdf · Bootstrap est un frameworks CSS spécialisé, comme son nom l'indique, dans le CSS ! C'est-à-dire qu'il nous](https://reader030.vdocuments.mx/reader030/viewer/2022021609/5c6ede9b09d3f2461d8b7ab7/html5/thumbnails/39.jpg)
Bootstrap (3/4)
Components
39
![Page 40: Bootstrap - thomas-bodin.comthomas-bodin.com/cours/iim/bootstrap.pdf · Bootstrap est un frameworks CSS spécialisé, comme son nom l'indique, dans le CSS ! C'est-à-dire qu'il nous](https://reader030.vdocuments.mx/reader030/viewer/2022021609/5c6ede9b09d3f2461d8b7ab7/html5/thumbnails/40.jpg)
1. Glyphicons
2. Dropdown
3. Nav
4. Breadcrumb
5. Pagination
6. Thumbnail
40
![Page 41: Bootstrap - thomas-bodin.comthomas-bodin.com/cours/iim/bootstrap.pdf · Bootstrap est un frameworks CSS spécialisé, comme son nom l'indique, dans le CSS ! C'est-à-dire qu'il nous](https://reader030.vdocuments.mx/reader030/viewer/2022021609/5c6ede9b09d3f2461d8b7ab7/html5/thumbnails/41.jpg)
41
1. Glyphicons
Bibliothèque d’icônes similaires à fontawesome
![Page 42: Bootstrap - thomas-bodin.comthomas-bodin.com/cours/iim/bootstrap.pdf · Bootstrap est un frameworks CSS spécialisé, comme son nom l'indique, dans le CSS ! C'est-à-dire qu'il nous](https://reader030.vdocuments.mx/reader030/viewer/2022021609/5c6ede9b09d3f2461d8b7ab7/html5/thumbnails/42.jpg)
42
2. Dropdown
Sous-menu
![Page 43: Bootstrap - thomas-bodin.comthomas-bodin.com/cours/iim/bootstrap.pdf · Bootstrap est un frameworks CSS spécialisé, comme son nom l'indique, dans le CSS ! C'est-à-dire qu'il nous](https://reader030.vdocuments.mx/reader030/viewer/2022021609/5c6ede9b09d3f2461d8b7ab7/html5/thumbnails/43.jpg)
43
3. Nav
![Page 44: Bootstrap - thomas-bodin.comthomas-bodin.com/cours/iim/bootstrap.pdf · Bootstrap est un frameworks CSS spécialisé, comme son nom l'indique, dans le CSS ! C'est-à-dire qu'il nous](https://reader030.vdocuments.mx/reader030/viewer/2022021609/5c6ede9b09d3f2461d8b7ab7/html5/thumbnails/44.jpg)
44
4. Breadcrumb
Hiérarchie de navigation
![Page 45: Bootstrap - thomas-bodin.comthomas-bodin.com/cours/iim/bootstrap.pdf · Bootstrap est un frameworks CSS spécialisé, comme son nom l'indique, dans le CSS ! C'est-à-dire qu'il nous](https://reader030.vdocuments.mx/reader030/viewer/2022021609/5c6ede9b09d3f2461d8b7ab7/html5/thumbnails/45.jpg)
Exercice 7 :
1. Mettre en place une navigation RWD2. Créer un fil d’ariane :
Icone Maison > Ma page courante
45
![Page 46: Bootstrap - thomas-bodin.comthomas-bodin.com/cours/iim/bootstrap.pdf · Bootstrap est un frameworks CSS spécialisé, comme son nom l'indique, dans le CSS ! C'est-à-dire qu'il nous](https://reader030.vdocuments.mx/reader030/viewer/2022021609/5c6ede9b09d3f2461d8b7ab7/html5/thumbnails/46.jpg)
46
![Page 47: Bootstrap - thomas-bodin.comthomas-bodin.com/cours/iim/bootstrap.pdf · Bootstrap est un frameworks CSS spécialisé, comme son nom l'indique, dans le CSS ! C'est-à-dire qu'il nous](https://reader030.vdocuments.mx/reader030/viewer/2022021609/5c6ede9b09d3f2461d8b7ab7/html5/thumbnails/47.jpg)
47
![Page 48: Bootstrap - thomas-bodin.comthomas-bodin.com/cours/iim/bootstrap.pdf · Bootstrap est un frameworks CSS spécialisé, comme son nom l'indique, dans le CSS ! C'est-à-dire qu'il nous](https://reader030.vdocuments.mx/reader030/viewer/2022021609/5c6ede9b09d3f2461d8b7ab7/html5/thumbnails/48.jpg)
48
5. Pagination
![Page 49: Bootstrap - thomas-bodin.comthomas-bodin.com/cours/iim/bootstrap.pdf · Bootstrap est un frameworks CSS spécialisé, comme son nom l'indique, dans le CSS ! C'est-à-dire qu'il nous](https://reader030.vdocuments.mx/reader030/viewer/2022021609/5c6ede9b09d3f2461d8b7ab7/html5/thumbnails/49.jpg)
Exercice 8 :
1. Faire la page de blog du site2. Créer une pagination avec première page active3. Le bouton précédent doit être désactivé
49
![Page 50: Bootstrap - thomas-bodin.comthomas-bodin.com/cours/iim/bootstrap.pdf · Bootstrap est un frameworks CSS spécialisé, comme son nom l'indique, dans le CSS ! C'est-à-dire qu'il nous](https://reader030.vdocuments.mx/reader030/viewer/2022021609/5c6ede9b09d3f2461d8b7ab7/html5/thumbnails/50.jpg)
50
![Page 51: Bootstrap - thomas-bodin.comthomas-bodin.com/cours/iim/bootstrap.pdf · Bootstrap est un frameworks CSS spécialisé, comme son nom l'indique, dans le CSS ! C'est-à-dire qu'il nous](https://reader030.vdocuments.mx/reader030/viewer/2022021609/5c6ede9b09d3f2461d8b7ab7/html5/thumbnails/51.jpg)
51
6. Thumbnail
![Page 52: Bootstrap - thomas-bodin.comthomas-bodin.com/cours/iim/bootstrap.pdf · Bootstrap est un frameworks CSS spécialisé, comme son nom l'indique, dans le CSS ! C'est-à-dire qu'il nous](https://reader030.vdocuments.mx/reader030/viewer/2022021609/5c6ede9b09d3f2461d8b7ab7/html5/thumbnails/52.jpg)
Exercice 9 :
1. Créer une grille de 3 colonnes avec 2 thumbnailsa. Imageb. Titrec. Texted. Bouton “En savoir plus”
52
![Page 53: Bootstrap - thomas-bodin.comthomas-bodin.com/cours/iim/bootstrap.pdf · Bootstrap est un frameworks CSS spécialisé, comme son nom l'indique, dans le CSS ! C'est-à-dire qu'il nous](https://reader030.vdocuments.mx/reader030/viewer/2022021609/5c6ede9b09d3f2461d8b7ab7/html5/thumbnails/53.jpg)
53
![Page 54: Bootstrap - thomas-bodin.comthomas-bodin.com/cours/iim/bootstrap.pdf · Bootstrap est un frameworks CSS spécialisé, comme son nom l'indique, dans le CSS ! C'est-à-dire qu'il nous](https://reader030.vdocuments.mx/reader030/viewer/2022021609/5c6ede9b09d3f2461d8b7ab7/html5/thumbnails/54.jpg)
Bootstrap (4/4)
Javascript
54
![Page 55: Bootstrap - thomas-bodin.comthomas-bodin.com/cours/iim/bootstrap.pdf · Bootstrap est un frameworks CSS spécialisé, comme son nom l'indique, dans le CSS ! C'est-à-dire qu'il nous](https://reader030.vdocuments.mx/reader030/viewer/2022021609/5c6ede9b09d3f2461d8b7ab7/html5/thumbnails/55.jpg)
1. Modal
2. Tab
3. Collapse
4. Carousel
55
![Page 56: Bootstrap - thomas-bodin.comthomas-bodin.com/cours/iim/bootstrap.pdf · Bootstrap est un frameworks CSS spécialisé, comme son nom l'indique, dans le CSS ! C'est-à-dire qu'il nous](https://reader030.vdocuments.mx/reader030/viewer/2022021609/5c6ede9b09d3f2461d8b7ab7/html5/thumbnails/56.jpg)
56
1. Modale
![Page 57: Bootstrap - thomas-bodin.comthomas-bodin.com/cours/iim/bootstrap.pdf · Bootstrap est un frameworks CSS spécialisé, comme son nom l'indique, dans le CSS ! C'est-à-dire qu'il nous](https://reader030.vdocuments.mx/reader030/viewer/2022021609/5c6ede9b09d3f2461d8b7ab7/html5/thumbnails/57.jpg)
Exercice 10 :
1. Mettre en place une modale sur une image d’un plat de nourriture pour la voir en plus grand
2. Mettre en place une modale qui apparaît dès qu’on arrive sur le site pour prévenir d’une promotion
57
![Page 58: Bootstrap - thomas-bodin.comthomas-bodin.com/cours/iim/bootstrap.pdf · Bootstrap est un frameworks CSS spécialisé, comme son nom l'indique, dans le CSS ! C'est-à-dire qu'il nous](https://reader030.vdocuments.mx/reader030/viewer/2022021609/5c6ede9b09d3f2461d8b7ab7/html5/thumbnails/58.jpg)
58
![Page 59: Bootstrap - thomas-bodin.comthomas-bodin.com/cours/iim/bootstrap.pdf · Bootstrap est un frameworks CSS spécialisé, comme son nom l'indique, dans le CSS ! C'est-à-dire qu'il nous](https://reader030.vdocuments.mx/reader030/viewer/2022021609/5c6ede9b09d3f2461d8b7ab7/html5/thumbnails/59.jpg)
59
2. Tab
![Page 60: Bootstrap - thomas-bodin.comthomas-bodin.com/cours/iim/bootstrap.pdf · Bootstrap est un frameworks CSS spécialisé, comme son nom l'indique, dans le CSS ! C'est-à-dire qu'il nous](https://reader030.vdocuments.mx/reader030/viewer/2022021609/5c6ede9b09d3f2461d8b7ab7/html5/thumbnails/60.jpg)
Exercice 11 :
1. Tester les tabs pour une carte de restauranta. Entréesb. Platsc. Desserts
60
![Page 61: Bootstrap - thomas-bodin.comthomas-bodin.com/cours/iim/bootstrap.pdf · Bootstrap est un frameworks CSS spécialisé, comme son nom l'indique, dans le CSS ! C'est-à-dire qu'il nous](https://reader030.vdocuments.mx/reader030/viewer/2022021609/5c6ede9b09d3f2461d8b7ab7/html5/thumbnails/61.jpg)
61
![Page 62: Bootstrap - thomas-bodin.comthomas-bodin.com/cours/iim/bootstrap.pdf · Bootstrap est un frameworks CSS spécialisé, comme son nom l'indique, dans le CSS ! C'est-à-dire qu'il nous](https://reader030.vdocuments.mx/reader030/viewer/2022021609/5c6ede9b09d3f2461d8b7ab7/html5/thumbnails/62.jpg)
62
3. Collapse
![Page 63: Bootstrap - thomas-bodin.comthomas-bodin.com/cours/iim/bootstrap.pdf · Bootstrap est un frameworks CSS spécialisé, comme son nom l'indique, dans le CSS ! C'est-à-dire qu'il nous](https://reader030.vdocuments.mx/reader030/viewer/2022021609/5c6ede9b09d3f2461d8b7ab7/html5/thumbnails/63.jpg)
Exercice 12 :
1. Faire un FAQ sur le restauranta. Horairesb. Présentation du chefc. Histoire du restaurantd. Avis clients
63
![Page 64: Bootstrap - thomas-bodin.comthomas-bodin.com/cours/iim/bootstrap.pdf · Bootstrap est un frameworks CSS spécialisé, comme son nom l'indique, dans le CSS ! C'est-à-dire qu'il nous](https://reader030.vdocuments.mx/reader030/viewer/2022021609/5c6ede9b09d3f2461d8b7ab7/html5/thumbnails/64.jpg)
64
![Page 65: Bootstrap - thomas-bodin.comthomas-bodin.com/cours/iim/bootstrap.pdf · Bootstrap est un frameworks CSS spécialisé, comme son nom l'indique, dans le CSS ! C'est-à-dire qu'il nous](https://reader030.vdocuments.mx/reader030/viewer/2022021609/5c6ede9b09d3f2461d8b7ab7/html5/thumbnails/65.jpg)
65
4. Carousel
![Page 66: Bootstrap - thomas-bodin.comthomas-bodin.com/cours/iim/bootstrap.pdf · Bootstrap est un frameworks CSS spécialisé, comme son nom l'indique, dans le CSS ! C'est-à-dire qu'il nous](https://reader030.vdocuments.mx/reader030/viewer/2022021609/5c6ede9b09d3f2461d8b7ab7/html5/thumbnails/66.jpg)
Exercice 13 :
1. Mettre en place un carrousel du restaurant
66
![Page 67: Bootstrap - thomas-bodin.comthomas-bodin.com/cours/iim/bootstrap.pdf · Bootstrap est un frameworks CSS spécialisé, comme son nom l'indique, dans le CSS ! C'est-à-dire qu'il nous](https://reader030.vdocuments.mx/reader030/viewer/2022021609/5c6ede9b09d3f2461d8b7ab7/html5/thumbnails/67.jpg)
67