Bootstrap 3

Bootstrap 3
Version du 19 novembre 2017

“
https://fr.slideshare.net/ThomasBodin3/presentations
http://thomas-bodin.com/cours/bootstrap/exercice.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ésentation
Inté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

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

1. Système de grille
2. Typos
3. Formulaires
4. Boutons
5. Images
6. Helpers
7. Responsive utilities
18

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écalages
a. 5 - (2) - 5 (sur toute la largeur de l’écran)
b. (1) - 11 (dans un container)
20

Exercice 2 :
1. Centrer les titres de niveau 1 et 2
2. Passer tous les titres en majuscule
23

Exercice 3 :
1. Liste sans puce
2. Liste sans puce et côte à côte pour faire un menu
25

Exercice 4 :
1. Créer un petit formulaire
2. Mettre un gros bouton bleu “Envoyer”
29

Exercice 5 :
1. Rendre les images responsive
2. Arrondir l’image “Léonard de Vinci”
32

Exercice 6 :
Rendre le site responsive
1. Sur tablette :
a. Cacher la barre de connexion
b. Cacher le menu
2. Sur mobile :
a. Cacher la barre de connexion
b. Cacher le menu
c. Cacher image dans le pied de page
d. Mettre les contenus textes les uns en dessous
des autres
e. Mettre les éléments du pied de page les uns en
dessous des autres
36

1. Glyphicons
2. Nav
3. Breadcrumb
4. Pagination
5. Thumbnail
40

41
1. Glyphicons
Bibliothèque d’icônes
similaires à fontawesome

43
4. Breadcrumb
Hiérarchie de navigation

Exercice 7 :
1. Mettre en place une navigation RWD
2. Créer un fil d’ariane :
Icone Maison > Ma page courante
44

Exercice 8 :
1. Faire la page de blog du site
2. Créer une pagination avec première page active
3. Le bouton précédent doit être désactivé
49

Exercice 9 :
1. Créer une grille de 3 colonnes avec 2 thumbnails
a. Image
b. Titre
c. Texte
d. Bouton “En savoir plus”
52

1. Modal
2. Tab
3. Collapse
4. Carousel
55

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

Exercice 11 :
1. Tester les tabs pour une carte de restaurant
a. Entrées
b. Plats
c. Desserts
60

Exercice 12 :
1. Faire un FAQ sur le restaurant
a. Horaires
b. Présentation du chef
c. Histoire du restaurant
d. Avis clients
63

Exercice 13 :
1. Mettre en place un carrousel du restaurant
66

Cas pratique
Reproduire la fan page Facebook en se servant uniquement
de Bootstrap.
NE FAIRE AUCUN CSS PERSO
Le but n’est pas de manipuler le CSS mais de manipuler
Bootstrap, nous verrons comment mettre les bonnes
couleurs, les bons espaces avec le SASS.
68

70
Merci !
@ThomasBodinFr
hi@thomas-bodin.com

Bootstrap 3

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

Similaire à Bootstrap 3

Similaire à Bootstrap 3 (20)

Dernier

Dernier (12)

Bootstrap 3