bootstrap - thomas-bodin.comthomas-bodin.com/cours/iim/bootstrap.pdf · bootstrap est un frameworks...
TRANSCRIPT
Bootstrap
Version du 14 octobre 2017
“
http://thomas-bodin.com/cours/iim/bootstrap.pdf
http://thomas-bodin.com/cours/iim/exercices-bootstrap.zip
2
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
Planning
4
Getting Started
Components
CSS
Javascript
Bootstrap (1/4)
Getting started
5
1. Présentation
2. Téléchargement & installation
3. Exemples
4. Compatibilités
6
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
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
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
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
11
2. Téléchargement & installation
12
3. Exemples
13
4. Compatibilités
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
<!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
16
Bootstrap (2/4)
CSS
17
1. Système de grille
2. Typos
3. Formulaires
4. Boutons
5. Images
6. Helpers
7. Responsive utilities
18
19
1. Système de grille
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
21
22
2. Typos
Exercice 2 :
1. Centrer les titres de niveau 1 et 22. Passer tous les titres en majuscule
23
24
Exercice 3 :
1. Liste sans puce2. Liste sans puce et côte à côte pour faire un menu
25
26
27
3. Formulaires
28
4. Boutons
Exercice 4 :
1. Créer un petit formulaire2. Mettre un gros bouton bleu “Envoyer”
29
30
31
5. Images
Exercice 5 :
1. Rendre les logos et l’image responsive2. Arrondir l’image
32
33
34
6. Helpers
35
7. Responsive utilities
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
37
38
Bootstrap (3/4)
Components
39
1. Glyphicons
2. Dropdown
3. Nav
4. Breadcrumb
5. Pagination
6. Thumbnail
40
41
1. Glyphicons
Bibliothèque d’icônes similaires à fontawesome
42
2. Dropdown
Sous-menu
43
3. Nav
44
4. Breadcrumb
Hiérarchie de navigation
Exercice 7 :
1. Mettre en place une navigation RWD2. Créer un fil d’ariane :
Icone Maison > Ma page courante
45
46
47
48
5. Pagination
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
50
51
6. Thumbnail
Exercice 9 :
1. Créer une grille de 3 colonnes avec 2 thumbnailsa. Imageb. Titrec. Texted. Bouton “En savoir plus”
52
53
Bootstrap (4/4)
Javascript
54
1. Modal
2. Tab
3. Collapse
4. Carousel
55
56
1. Modale
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
58
59
2. Tab
Exercice 11 :
1. Tester les tabs pour une carte de restauranta. Entréesb. Platsc. Desserts
60
61
62
3. Collapse
Exercice 12 :
1. Faire un FAQ sur le restauranta. Horairesb. Présentation du chefc. Histoire du restaurantd. Avis clients
63
64
65
4. Carousel
Exercice 13 :
1. Mettre en place un carrousel du restaurant
66
67
