3. 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
7. 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
8. 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
9. 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
10. 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
14. 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
15. <!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
20. 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
36. 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
57. 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
68. 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