Cours Boot

Framework Bootstrap
11
Raouia Fredj
Raouianour@gmail.com
Un framework, c’est quoi ?
« un ensemble de composants structurés qui sert à créer les

fondations et à organiser le code informatique pour faciliter le
travail des programmeurs, que ce soit en terme de
productivité ou de simplification de la maintenance »
22
De nombreux frameworks
Il existent de nombreux frameworks pour des

applications web centrés sur différents langages comme
PHP, Java, Python, Ruby…
33
Un framework CSS
Bootstrap est un framework CSS. Il vise à aider à
mettre en forme les pages web.
Il existe d’autres frameworks css comme par

exemple : Blueprint, 960 Grid System, inuit.css….
44
Pourquoi le framework Bootstrap ?
▪ developer des sites web
▪ très bonne connaissance des langages du web (HTML, CSS,

JavaScript), mais apprentissage long et difficile
▪ frameworks (cadriciels) pour faciliter cette tâche
▪ collections de briques de code bien structurées et prêtes a
▪ l'emploi permettant de faciliter le developpement et la
maintenance
3
▪ l'un des plus utilisés : Bootstrap http://getbootstrap.com/
• Twitter -> open source
▪ facilite l'utilisation des rêgles CSS pour concevoir des sites

attractifs et adaptatifs (Responsive Web Desing)
▪ grille d'affichage pour agencer les différentes bottes

d'affichage des sites et s'adaptant immediatement
aux écrans de diffusion (ordinateurs, tablettes,
smartphones)
Pourquoi le framework Bootstrap ?
• portability (cross-browser) : • temps d'apprentissage (learning
- presentation similaire quel que soit le navigateur curve) uniformisation
• homogeneity : • evolution rapide des versions
- ensemble de styles predefinis partages - risque d'obsolescence des pages
- elements complementaires (barres de navigation,
boutons...)
• simplicite :
changement du
- systeme de grille pour positionnement des elements systeme de grille
• adaptabilite (responsive) :
- par defaut l'affichage s'adapte a la taille de l'ecran
(mobile-first)
• facilite d'utilisation : Bootstrap 4

version actuelle
- connaissances de base en HTML et CSS (5/10/2018)
V-4.1.3
4
Utiliser un framework : avantages
• Cross-‐browser : une bonne alternative pour obtenir
facilement un rendu similaire sur les différents
navigateurs, spécialement les anciennes versions
• Gain de temps de développement
• Normalisation des présentations
• Un ensemble variés d’items facilement utilisables
• Facilite la gestion des différents tailles d’écran et des

media queries. 85
Inconvénients
• Une normalisation qui peut être jugée excessive et
appauvrissante
• Mettre en place une (petite) infrastructure / « installer » le

framework
• Il faut avoir pris le temps d’apprendre à utiliser le framework

en question
9
Bootstrap?
• Un outil facile à apprendre
• Entièrement configurable car codé avec LESS, un

dérivé de CSS
10
Le mot Bootstrap
« En anglais, les bootstraps qui sont généralement traduits
en français par "tirants de bottes", sont les boucles, en cuir
ou en tissu, crées sur le rebord des bottes et dans lesquels
on passe les doigts ou qu'on tire pour s'aider à les enfiler. »
Wikipedia, le 4 janvier 2013
11
Le mot Bootstrap
On peut imaginer un usage métaphorique du terme et
penser que l’intégration et l’habillage CSS/JS est compris par
Twitter comme le moyen de faire passer plus facilement
l’information, d’enfiler la chaussure.
12
Origine
• Bootstrap ou plutôt Twitter Bootstrap est un
framework CSS/JS sous licence Apache
développé par Twitter.
• C’est l’un des projets les plus populaires sur

GitHub.
13
Version
Nous intéressons à la version 3 ou la version 4

de Bootstrap qui est la dernière version sortie
au moment où est donné ce cours
14
Contenu du kit
Bootstrap contient tout un tas d’éléments HTML au design
sobre et professionnel comme des tableaux, des boutons, des
listes, des barres de chargement…
Bootstrap permet également de mettre en page facilement

les éléments HTML.
Bootstrap facilite la rétro compatibilité et l’uniformisation

des affichages sur les navigateurs.
15
Contenu du kit
Bootstrapt se compose de :
• Une mise en page avec une grille élastique de 12

colonnes
• Un reset CSS
• Une library opensource
• Une partie responsive design/media queries
• Des plugins Jquery de qualité
16
Reset CSS
« Les navigateurs n'adoptent pas tous les mêmes valeurs par
défaut pour les styles des éléments HTML. Cela peut générer
quelques surprises au rendu des pages WEB selon le
navigateur utilisé. Le reset consiste à mettre à zéro toutes les
valeurs pour ainsi uniformiser le rendu. Le reset de Bootstrap
est basé sur celui d'Eric Meyer, allégé et adapté. »
17
Navigateurs supportés
Officiellement, les dernières versions pour :
• Chrome (Mac, Windows, iOS, et Android)
• Safari (Mac and iOS)
• Firefox (Mac, Windows)
• Internet Explorer
• Opera (Mac, Windows)
Officieusement:
• Chromium et Chrome pour Linux
• Firefox pour Linux
• Internet Explorer 7
18
15
Voir : http://getbootstrap.com/getting-‐started/
Utiliser Bootstrap
Une documentation assez complète :

http://getbootstrap.com/
Garantie d’une évolution permanente à moyen terme.
Architecture configurable basée sur LESS.
19
Installation
1.Télécharger le dossier compressé sur GitHub :
https://github.com/twbs/bootstrap/releases/
download/v3.0.3/bootstrap-‐3.0.3-‐dist.zip
2.Mettre le dossier décompressé dans le dossier

de son application web.
20
Contenu du dossier
3 dossiers. Nous nous concentrons sur le dossier .css.
Boostrap.min.css est une alternative à bootstrap.css. Le fichier min, plus

optimisé réduit au maximum la taille du fichier mais limite en même temps
certaines fonctionnalités.
21
Installation 2
3. Rajouter un lien vers le fichier CSS que l’on a choisi (min ou

normal) de Bootstrap.
Par exemple, si vous rangez votre fichier dans un dossier lib :
<link href="site/lib/bootstrap/css/bootstrap.css" rel="stylesheet"

type="text/css">
22
Une installation facile
ça y est! Bootstrap est opérationnel. Il n’y a rien

d’autre à faire.
A présent, nous n’avons plus qu’à nous en servir.
23
Utiliser Bootstrap : free design
Bootstrap peut être utile à plusieurs niveaux comme nous

l’avons vu avec le reset css et le cross-‐browserspar exemple.
Tout le code qui sera généré dans le fichier HTML prendra

les propriétés du CSS de Bootstrap et profitera de ses
avantages.
Si je charge ma page web, après avoir mis le lien vers le

fichier CSS de Bootstrap, un premier changement est déjà
visible. 24
21
Comment utiliser Bootstrap: version locale telechargee
• 1re etape: telecharger une distribution
bootstrap^. 1.3-dist
$"[J> css ---------------- regies de styles pour
i !.....=®iqL bootstrap-grid, css composants bootstrap
] bootstrap-grid, css, map
i i.....^fijL bootstrap-grid. min. css
] bootstrap-grid. min. css. map
i bootstrap-reboot, css
] bootstrap-reboot, css, map
i i.....bootstrap-reboot, min. css
] bootstrap-reboot, min. css. map
i bootstrap,css •-------- classes (styles) de base
] bootstrap.css.map
i bootstrap.min.css
] bootstrap.min.css.map
js •----------------- code JavaScript des
/■■■§ bootstrap.bundle .js composants de bootstrap-4.l.3-dist.zip
] bootstrap.bundle .js.map Bootstrap
/■■■[ai bootstrap, bundle, min .js
] bootstrap, bundle, min .js. map
bootstrap.js ] bootstrap.js.map
bootstrap,min,js ] bootstrap.min .js.
map
5
(Minification) suppression
a espaces,
commentaires,
retours a la ligne
Acceleration du
Minification chargement
.css
bootstrap.css (170Ko) bootstrap.min.css (138Ko)
- HUMAN READABLE dt> MINIFIED
https://blog.stackpath.com/glossary/minification/
Robert Gibb
utilise en phase de developpement utilise quand le site est mis en ligne
- permet navigation dans le code et debogage
7
2eme etape: integrer les elements Bootstrap a une page HTML
index.html
<!DOCTYPE html> recopier dans votre site les
<html>
<head> les referencer elements de Bootstrap dont
<title>Exemple Bootstrap4</title> (liens relatifs) vous avez besoin
<meta charset="UTF-8">
depuis vos pages
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="thirdparties/bootstrap4/css/bootstrap.css" rel="stylesheet"

HTML
type="text/css"/> ______
©
L_______________________________________________
</head>
<body>
<div class="container">
<hl>Ma premiere page Bootstrap4</hl>
<p>
Ideoque fertur neminem aliquando ob haec vel
similia poenae addictum oblato de more elogio
revocari iussisse, quod inexorabiles quoque
principes factitarunt. et exitiale hoc vitium.,
&
Certains composants de
quod in aliis non numquam intepescit, in illo
aetatis progressu effervescebat, obstinatum eius Bootstrap necessitent
propositum accendente adulatorum cohorte. egalement referencer la librairie
javascript de Bootstrap, ainsi que
</p>
</div>
jQuery et Poppers sur lesquelles
elle s'appuie
<scr ipt src="thirdparties/poppers/popper.js" type="text/javascript"></sc ript> © ______"
jQuery (https://iauerv.com) et
<scr ipt src="thirdparties/jquery3/jquery-3.3.1.js" type="text/javascript "></script> Poppers (https://popper.is.org/) ne
<script src="thirdparties/bootstrap4/js/bootstrap.js" type="text/javascr ipt"X/script> sont pas integres au telechargement
de Bootstrap, il faudra les recuperer
</bod
y> </html> par ailleurs
2019 Philippe GENOUD - Universite Grenoble Alpes 8
(Composants necessitant Javascript)
https://getbootstrap.eom/docs/4.1/getting-started/introduction/
▼ Show components requiring JavaScript
• Alerts for dismissing

• Buttons for toggling states and checkbox/radio functionality
• Carousel for all slide behaviors, controls, and indicators
• Collapse for toggling visibility of content
• Dropdowns for displaying and positioning (also requires Popper.js)
• Modals for displaying, positioning, and scroll behavior
• Navbar for extending our Collapse plugin to implement responsive behavior
• Tooltips and popovers for displaying and positioning [also requires Popper.js)
• Scrollspy for scroll behavior and navigation updates
9
(qu'est-ce qu'un CDN ? https://web.dev/content-delivery-networks/
http://en.wikipedia.org/wiki/Content delivery network
Content delivery network

From Wikipedia, the free encyclopedia
A content delivery network or content distribution network (CDN) is a geographically

distributed network of proxy servers and their data centers. The goal is to distribute service
spatially relative to end-users to provide high availability and high performance. CDNs serve a large ■J $ i
portion of the Internet content today, including web objects (text, graphics and scripts),
downloadable objects (media files, software, documents), applications (e-commerce, portals), live *' &
15:1
streaming media, on-demand streaming media, and social media sites. (Left) Single server distribution
CDNs are a layer in the internet ecosystem. Content owners such as media companies and e- (Right) CDN scheme of distribution
commerce vendors pay CDN operators to deliver their content to their end users. In turn, a CDN
pays ISPs, carriers, and network operators for hosting its servers in their data centers.
O' % ^n V^lla.tr pann: ~id'",'\nt ip°« o' V !CP '9
Ffv -t: ~j' i*'eh
https://fr.wikipedia.org/wiki/Reseau de diffusion de contenu
- 6 MINUTETECH CHAT -
CDN BASICS
11
. qu'est-ce qu'un CDN ?
Schema de distribution classique
<link href="thirdparties/bootstrap4/css/bootstrap.css"
rel="stylesheet" type="text/css"/>
index.html
toutes les ressources lies a la page

sont chargees depuis le serveur ou
la page a ete deployee
charge du serveur
temps de reponse
12
qu'est-ce qu'un CDN ? )
distribuer la charge
• Schema de distribution a base de CDN
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
sur un reseau de
serveurs
les ressources statiques lies aux

tierces parties sont
telechargees depuis le CDN
diminue charge du serveur
ameliore temps de reponse
^ meilleure utilisation des caches
13
Comment utiliser Bootstrap: avec un CDN
• Une alternative: utiliser un CDN (Content Delivery Network)
<!DOCTYPE html>
<html>
<head>
<title>Exemple Bootstrap4</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"> }. ExempleBootstrap4
thirdparties
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap♦ min.css
bootstrap^
</head>
<body> bootstrap-grid
bootstrap -oot.css
<p> reoc
similia poenae addictum oblato de more elogio Les ressources statiques associees
revocari iussisse, quod inexorabiles quoque a Bootstrap sont chargees a partir
principes factitarunt. et exitiale hoc vitium., de differents CND
aetatis progressu effervescebat, obstinatum eius v jqLiery-3.3. l.js
propositum accendente adulatorum cohorte. poppers
a|_po£perj£_
</p>
</div>
index.htm
<script src="https://code.jquerv.com/iquery-3■3.1.slim.min.is1'></script>
<script src="https://cdnis.cloudflare.com/ajax/libs/popper.is/1.14.3/umd/popper.min.is"x/script> cscript
src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/is/bootstrap.min.is"X/script>
</body>
</html>
10
Clin k rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" 1
integrity="sha384- klFODw38ERdknLPMO" |
MCw98/SFnGE8f3T3GXwE0ngsV7Zt27NXFoaoApmYm81iuXoP
crossorigin=,,anonymousl >
attributs SRI (Subresource Integrity)

permet aux navigateurs de verifier que les fichiers qu'ils vont chercher (par
exemple, a partir d'un CDN) sont livres sans manipulation inattendue.
14
(attributs SRI)
\ algorithme de hashage valeur de hash fournie par boostrap et a utiliser
dans l'attribut integrity des balises link chargement d'une page avec des
a cryptographique ressources externes <link> ou
QO serveurs du CDN <script>
<link rel="stylesheet" href="https://stackpath.boo
integrity="sha384-MCw98/SFnGE8f3T3GXwEOngsV7
crossorigin="anonymous">
demande de la ressource au CDN
bootstrap.min.css le navigateur calcule une valeur de hash

en appliquant l'algorithme indique et la
Bootstrap deploie
compare avec la valeur de l'attribut
ses ressources sur
integrity
le CDN
les valeurs sont identiques, le

navigateur applique les styles ou
execute le script
les valeurs different la feuille de style

n'est pas appliquee ou le script n'est
pas execute et le navigateur signale une
erreur
Un utilisateur malveillant
modifie le fichier
15
<!DOCTYPE html>
<html>
<head>
<title>Exemple Bootstrap4</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"> }. ExempleBootstrap4
thirdparties
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap♦ min.css
bootstrap^
</head>
<body> bootstrap-grid
bootstrap -oot.css
<p> reoc
similia poenae addictum oblato de more elogio Les ressources statiques associees
revocari iussisse, quod inexorabiles quoque a Bootstrap sont chargees a partir
principes factitarunt. et exitiale hoc vitium., de differents CND
aetatis progressu effervescebat, obstinatum eius v jqLiery-3.3. l.js
propositum accendente adulatorum cohorte. poppers
a|_po£perj£_
</p>
</div>
index.htm
<script src="https://code.jquerv.com/iquery-3■3.1.slim.min.is1'></script>
<script src="https://cdnis.cloudflare.com/ajax/libs/popper.is/1.14.3/umd/popper.min.is"x/script> cscript
src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/is/bootstrap.min.is"X/script>
</body>
</html>
10
Container principal
concerne Exemple Bootstrap4 X+ - □X
uniquement les mobiles index.html (utilisation de toute la largeur de e © -He://yP:/ENSEIGNEMENT/M2CCI/Applications Internet/' - w ☆ ± Q lll\□ IE
<JD0CTYPE html> l'ecran sans niveau de zoom)
<html>
<head>
Ma premiere page Bootstrap4
Ideoque fertur neminem aliquando ob haec vel similia poenae addictum oblato de more elogio
<title>Exemple Bootstrap4</title> revocari iussisse, quod inexorabiles quoque principes factitarunt. et exitiale hoc vitium, quod in aliis
<meta charset="UTF-8"> non numquam intepescit in illo aetatis progressu effervesce bat, obstinatum eius propositum
<meta name="viewport" content="width=device-width, initial-scale=1.0"> accendente adulatorum cohorte.
<link href=Mthirdparties/bootstrap4/css/bootstrap.css" rel=MstylesheetM Vypc- LCAL/CSS //■

class="containerM : un
</head> container de taille fixe avec marges
<body>
pdiv c l a s s = " c o n t a i n e r " — ” gauche et droites automatiques
<hl>Ma premiere page Bootstrap4</hl> 4 Bootstrap4 necessite un
<p>
element contenant
similia poenae addictum oblato de more elogio pour envelopper (wrap)
revocari iussisse, quod inexorabiles quoque le contenu du site. class="container-fluid" : un
principes factitarunt. et exitiale hoc vitium, quod
container qui occupe toute la largeur du
in aliis non numquam intepescit, in illo aetatis
progressu effervescebat, obstinatum eius propositum
viewport.
accendente adulatorum cohorte.
Exemple Bootstrap4
</div> f4— — — — — — — — “
Ma premiere page Bootstrap4
<script src="thirdparties/poppers/popper.js" type="text/javascript"X/s Ideoque fertur neminem aliquardo ob haec vel similia poenae addictum oblato de more elogio revocari iussisse, quod inexorabiles
quoque principes factitarunt. ef exitiale hoc vitium, quod in aliis non numquam intepescit, in illo aetatis progressu effervesce bat,
<script src="thirdparties/jquery3/jquery-3.3.1.js" type="text/javascrip
obstinatum eius propositum accendente adulatorum cohorte.
<script src="thirdparties/bootstrap4/js/bootstrap.js" type="text/javasc
</body>
</html>
Exemple de page : HTML
<!DOCTYPE>
<html>
<head>
<title>Mon site</title>
<meta charset='uP-‐8'/>
<link href="lib/bootstrap/css/bootstrap.css"
rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="css/
style.css" />
</head>
<body>
<h1>Exemple</h1>
<p>Hello world</p> 37
22
</body>
</html>
Exemple de page :
Avant Après
38
Le design bootstrap
Bootstrap permet d’obtenir immédiatement un rendu

professionnel très épuré. C’est l’une de ses premières
qualités, le framework peut vous éviter à devoir vous
casser la tête sur la partie design.
Toutefois il est possible de customiser ce design. Pour se

faire, il suffit d’ajouter un lien vers un autre fichier css,
custom.css par exemple.
39
Customiser sa feuille de style
Toutefois, il est possible de personnaliser certains éléments.
Si je souhaite par exemple, garder le design général de

Bootstrap mais en changeant uniquement la couleur des
liens, je peux simplement créer un fichier custom.css et y
ajouter :
a{color: red};
Le dernier fichier CSS chargé prend le pas sur le précédent.
40
Utiliser Bootstrap
Pour utiliser Bootstrap, il ne faut pas toucher au fichier CSS.
Tout se joue du côté du HTML. Il suffit de rajouter des

classes avec des noms définis par bootstrap.
Les éléments prennent ainsi les propriétés générés par le

CSS du framework.
41
Utiliser Bootstrap
Pour utiliser Bootstrap, il faut comprendre deux principes :
• Le principe des grilles
• Connaître le nom des items existants et connaître les

classes associées
42
Les grilles
Bootstrap permet de facilement mettre en place les blocs

sans que vous ayez à utiliser de float.
Il suffit de se servir d’une grille. La grille permet de

positionner ligne (row) par ligne les différents éléments
d’une page.
43
Les grilles
Une grille de Bootstrap se compose de douze colonnes. En
d’autres mots, on imagine qu’une page web est composée
de ces douze parties.
44
Systeme de grille de Bootstrap
• une des difficulties avec HTML + CSS est la matrise du placement des elements dans
une page
- difficulte attenuée par I'introduction des flexboxes et grilles avec CSS3
• Bootstrap propose son propre systeme de grille (grid)

- refonte complete avec Bootstrap 4
- simplification en tirant partie des dernieres nouveautes des CSS 3
• flexboxes
• grids
— un conteneur bootstrap est subdivise en une grille
- chaque ligne (row) comporte au plus 12 colonnes de largeur identique
col
18
- un conteneur bootstrap est subdivise en une grille
- possible sur une meme ligne de regrouper plusieurs colonnes pour obtenir des colonnes plus
larges (comme pour les tableaux HTML)
Il faut que la somme des largeur des colonnes d'une

col rangee corresponde a 12 colonnes elementaires
12 colonnes de largeur 1 6
colonnes de largeur 2 4 colonnes
de largeur 3, 5, 3 et 1 2 colonnes
de largeur 9 et 3
1 colonne de largeur 12
2 colonnes de largeur 6
19
- un conteneur bootstrap est subdivise en une grille
- possible sur une meme ligne de regrouper plusieurs colonnes pour obtenir des colonnes plus
larges (comme pur les tableaux HTML)
- hauteur des rangees (row)
• fixee par la hauteur de leur contenu
• une rangee prend la hauteur imposee par plus grand element qu'elle contient
row 12 colonnes de largeur 1
4 colonnes de largeur 3, 5, 3 et 1
20
• La grille est definie a I'aide de classes de styles CSS
— container ou container-fluid definit une grille

• container grille de largeur fixe, centree sur la page
• container-fluid grille occupe toute la largeur de l'ecran
- row definit une ligne <div class='container' >
<div class=,rrow' >
<div class=,rcol-x-y' >. *
- col-xx-yy definit une colonne de la ligne *</div> </div>
<div class="rrow >
• yy la largeur de la colonne (en nombre de colonnes <div class=,rcol-x-y'
>___</div>
elementaires: 1.. 12) <div class=,rcol-x-y'
• xx la largeur d'ecran au dessous de laquelle l'element >___</div>
s'empile avec ses freres (breakpoint) <div class=,rcol-x-y'
>___</div>
</div>
<div class="rrow" >
</div>
</div>
22
• points de rupture
Extra small Small Mledium Large Extra large

>1200p
<576px >576px >76Spx >992px
x
Max container width None (auto) 540px 720px 960px 1140px
Class prefix .col- .col-sm- .col-md- .col-lg- .col-xl-
# of columns 12
Gutter width 30px (15px on each side of a column)
Nestable Yes
Column ordering Yes
23
• exemple
<div class="container-fluid '>
<div class='row"> largeur >=
<div class='col-sm-1' <div >spanl</div>
class='col-sm-1' <div >spanl</div> 992px
class="col-sm-l' <div >spanl</div>
clas5="col-sm-l' >spanl</div> 1®re rangee 2®me rangee 3®me
II faut que <div class="col- >spanl</div> rangee 4®me rangee
la somme sm-l' <div class= >spanl</div>
des largeur "col-sm-1' <div class= >spanl</div>
colonnes
des "col-sm-1" <div >spanl</div>
d'une' rangee class='col-sm-1' <div >spanl</div>
class= "col-sm-1" <div >spanl</div>
768px <= largeur < 992px
corresponde a
class="col-sm-l" <div >spanl</div> 1®re rangee
12
class="col-sm-l" <div >spanl</div> | 2eme rangee
colonnes </div>
class= "col-sm-1'
elementaires <div class="row"> 3®me rangee 4®me rangee
<div class='col-lg-6' <div >span6</div>
class="col-lg-6' </div> >span6</div>
<div class="row">
<div class= 'col-md-4'
<div class='col-md-4' <div
>span4</div> 576px <= largeur < 768px
>span4</div>
class= "col-md-4" </div>
>span4</div> 1®re rangee
<div class="row">
<div class="col-sm-l" <div 2eme
class='col-sm-E' <div class= >spanl</div> rangee
"col-sm-B </div> >span8</div>
</div> >span3</div>
3eme
rangee
4®me rangee 24
• possibilité d'omettre la largeur pour des colonnes de taille identique
<div class="container-fluid">
<div class='row >
cdiv class= <div col-sm >spanl</div>
largeur >= 992px
class= <div 'col-sm >spanl</div> ere rangee
class= <div 'col-sm >spanl</div> em rangee
class= <div col-sm >spanl</div> e rangee
class= <div col-sm >spanl</div> em rangee
class= cdiv col-sm >spanl</div> e
class= <div col-sm >spanl</div> em
class= cdiv 'col-sm >spanl</div> e
class= <div 'col-sm >spanl</div> 768px <= largeur < 992px
class= <div col-sm >spanl</div>
class= <div col-sm >spanl</div> 1ere rangee
col-sm >spanl</div>
class= </div> | 2eme rangee
<div class="row 3eme rangee 4eme rangee
'>
cdiv class= <div
col-lg" >span6</div>
class= </div>
col-lg''>span6</div>
<div class='row
<div class= <div ' >
class= <div col-md" >span4</div> 576px <= largeur < 768px
class= </div> 'col-md" >span4</div> 1ere rangee
<div class='row col-md''>span4</div>
cdiv class= <div
class= cdiv ' > 2eme
class= </div> col-sm- 1" >spanl</div>
</div> 'col-sm-E" rangee
'col-sm->spanE'</div>
3"
3eme
>span3'</div>
rangee
25
4eme rangee
selon la largeur de la fenetre du navigateur des colonnes definies
comme de taille egale peuvent occuper plusieurs lignes.
auto-layout
columns
basees sur
flexboxes
26
• auto-layout pour colonnes sans point de rupture
<div class="containen-fluid">
<div class="row">
<div class="col">spanl</div>
<div class="col">spanl</div> <div
class="col">spanl</div> <div
class="col' ' >spanl</div> <div
class="col">spanl</div> <div
class="col">spanl</div> J* <div
class="col >spanl</div> <div
colonnes de class="col >spanl</div> <div
largeur class="col">spanl</div> <div
identiques class="col'' >spanl</div> <div
class="col' ' >spanl</div> <div
quelle que class="col">spanl</div>
soit la taille
de la fenetre col">span6</div>
col">span6</div>
col">span4</div>
col">span4</div>
col">span4</div>
demo
class= row
<div class= col-sm-1">spanl</div>
<div class= col-sm-8">span8</div>
<div class= col-sm-3 >span3</div>
</div>
27
<div class="row">
<div class= "col-sm">spanl</div> <div
class="col-sm" >spanl</div> <div class="col-
sm">spanl</div> <div class="col-
sm">spanl</div> <div class="col-sm"
>spanl</div> <div class="col-sm">spanl</div>
<div class="col-sm">spanl</div> <div
class="col-sm">spanl</div> <div class="col-
sm">spanl</div> </div>
cdiv class="row">
<div class="col-lg">span6</div> <div
class="col-lg">span6</div> </div>
<div class="row">
<div class="col-md" >span4</div> <div
class="col-md">span4</div> <div class="col-
md">span4</div> </div>
<div class="row">
<div class="col-sm-l">spanl</div> <div
class="col-sm-E" >spanE</div> <div
class="col-sm-3">span3</div> </div> ◄-►
</div> 834 px
28
• possibilité de ne specifier la largeur que d'une colonne
<div class= "container-fluid">
<div class="row">
<div class="col">
1 (auto)
</div>
<div class="col-6" >
2 (col-6)
</div>
<div class="col">
B (auto)
</div>
</div>
<div class="row">
<div class="col">
1 (auto)
</div>
<div class="col-5">
2 (col-5)
< / di v >
<div class="col">
B (auto)
</div>
</div>
</div>
29
possibilité d'avoir des colonnes dont la taille est basée sur la largeur de leur
contenu (classes col-{breakpoint}-auto)
30
• possibilité d'imbriquer du contenu dans un element de grille ( .col-{breakpoint}.* )
<div class= "now">
<div class="col-sm-9">
Level 1: .col-sm-9
t ~ r ~ "nestedT To\-~~ — — — — — — — — — —
j<div class="row" >
<div class="col-8 col-sm-6'>
Level 2: .col-8 .col-sm-6
</div>
<div class='col-4 col-sm-6">
Level 2: .col-4 .col-sm-6 I </div>
'"■T7cTiv7 < / ;l i v >
<div class='col-sm-3">
Level 1: .col-sm-3 </div>
</div>
<div class="row">
<div class="col-sm-4">
.col-sm4 </div>
<div class='col-sm-8">
.col-sm4 </div>
</div>
</div>
31
Les grilles
Un élément peut donc prendre jusqu’à 12 colonnes de
largeur.
On peut facilement additionner deux éléments à partir du

moment où leur largeur fait moins de douze colonnes.
Ainsi si l’on met un élement nav de 4 colonnes avec une

division de 6 colonnes, il restera un espace vide de 2
colonnes.
Reste 2
4 colonnes 6 colonnes colonnes 59
30
vides
Les grilles
Par contre si je place une division de 10 colonnes avec une
autre de 6 colonnes, elles ne pourront tenir sur la même
ligne puisque le maximum est une largeur de douze
colonnes.
Reste 2
10 colonnes colonnes
vides
6 colonnes
Reste 6 colonnes vides
60
Les grilles : row
La grille est dynamique et prend automatiquement toute la
largeur de l’écran.
Pour créer une colonne et ensuite donner une taille aux

éléments à l’intérieur. Il faut commencer par créer une
ligne : raw.
<section class='row'>
<div>Exemple</div>
<div>Hello world</div>
</section>
Exemple 61
Hello world
Les grilles col-md-xx :
Ensuite je peux rajouter la largeur des éléments de cette
ligne grâce à col-md-xx de la valeur en nombre.
Par exemple
<div class='col-‐md-‐4'>Exemple</div>
<div class='col-‐md-‐8'>Helloworld</div>
</section>
62
Les grilles
Pour changer les largeurs des élements il suffit de

changer la valeur des col-‐mdse rappelant toujours la
règle des douze colonnes.
63
Les grilles : container
Pour que les grilles s’affichent correctement, il faut placer
les lignes dans un objet container.
<body class='container'>
<div id='div1' class='col-‐md-‐4'>Exemple</div>
<div id='div2' class='col-‐md-‐8'>Helloworld</div>
</section>
</body>
64
Les grilles
65
Les grilles : mise en page
Pour des mises en page complètes, il faut donc créer
successivement plusieurs colonnes.
Dans notre exemple, nous devons créer un premier row pour

différencier la partie de gauche de celle de droite.
66
Les grilles : mise en page
Ensuite il nous faut recréer trois lignes dans le
premier row de gauche, la première occupant 12
colonnes, la seconde avec deux blocs de 4 colonnes
chacun, la dernière un seul bloc de 4 colonnes…
67
Les grilles : offset
Pour créer des espaces vides entre deux éléments, il
suffit d’ajouter au dernier élément concerné :
col-md-offset-xx
Par exemple, pour créer deux éléments de largeur 4
avec un espace vide de 4 qui les sépare :
<body class='container'>
<div id='div1' class='col-‐md-
‐4'>Exemple</div>
<div id='div2’ class='col-md-4 col-
mdoffset-4'>Hello world</div>
68
39
</section>
</body>
Les grilles : offset
Col-md-4 Col-md-4
col-md-offset-4
69
40
Quelques items
Bootstrap permet de rajouter des éléments au design
soigné. Pour certains éléments le design s’applique
directement sans qu’il soit besoin de rajouter de class
particulière, c’est le cas pour :
• Blockquotes
• List
• Code
• …
Toutefois, le framework permet certaines options

avec l’usage de classe. 70
41
Blockquote
➢ Tout débutant en création de page web constate
que l'utilisation balise blockquote induit un retrait
du texte.
➢ La balise blockquote est faite pour mettre un
texte en retrait...
➢ La balise BLOCKQUOTE permet de mettre en
valeur un paragraphe (une citation par exemple)
en effectuant suivant les navigateurs différents
effets :
• un décalage par rapport à la marge courante du
document
• un retour à la ligne avant et après le bloc de texte
éventuellement différents autres styles 71
(italique,gras ...).
Blockquote
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing

elit. Integer posuere erat a ante.</p>
</blockquote>
72
42
Lists
•Unordered = <ul>
Juste des points
•Ordered = <ol>
Des nombres
•Unstyled = <ul class=« list-‐unstyled»>Sans

point ni nombre
• Inline = <ul class=« list-‐inline»>

Comme son nom l’indique, une liste qui sans
retour à la ligne 73
43
Exemple : unordered
74
Code & pre
<div>
<p>Hello world, voilà du code inline

<code>L'entrée is a room.</code></p>
<p>Encore du code, cette fois en bloc:</p>
<pre>Ici du code en block avec le design
de Bootstrap.</pre>
</div>
75
Code & pre
76
Tableaux
Bootstrap Tableau de base:
➢ Un tableau Bootstrap de base a un rembourrage léger

et seulement des séparations horizontales. La
classe .table est utilisée pour ajouter un style de
base à une table.
77
Tableaux
5 types de tableau
• Normal
• Striped rows
• Bordered
• Hover-‐rows
• Condensed table
78
Tableaux : normal
79
Tableaux : stripped rows/ rayé
Class=« table table-‐striped»
Propriété : une ligne sur deux est grisée
80
Tableaux : bordered
Class=« table table-‐bordered» Propriété :
chaque cellule a une bordure
81
Tableaux : hover rows
Class=« table table-‐condensed»
Propriété : un tableau plus resserré.
82
Tableaux : bordered
Class=« table table-‐bordered» Propriété :
chaque cellule a une bordure
83
Les boutons
•Les boutons peuvent être trouvés sous une forme ou
une autre dans chaque application Web.
•Les Boutons bootstrap sont considérés comme un

élément de conception distinct du cadre technique.
Techniquement, un "submit" n’apparaît qu’une seule fois
dans un formulaire, ce qui déclenche presque toujours
une demande POST.
•Si, Cependant, vous devez accéder au serveur via une

requête GET, un hyperlien est utilisé.
•Dans la conception conditions Bootstrap fournit 84

maintenant les deux au même niveau.
Les boutons
Les différents types de boutons
• Les boutons peuvent être créés avec <a>,<button>, ou <input>.

• Dans bootstrap,Il existe quatre types de boutons:
• Les liens,
• Les boutons,
• Les inputs,
• Les dropdown.
85
Les boutons
•Bootstrap 4 comprend plusieurs styles de boutons
prédéfinis, chacun servant son propre but sémantique,
avec quelques extras ajoutés pour plus de contrôle.
•L’aspect par défaut est un gris avec le texte blanc.
•Les boutons sont disponibles en sept variantes avec les
expressions sémantiques suivantes
• Primary: soulève la fonction principale, effet visuel de couleur bleue
amplifié
• Secondary: Standard, gris, fonction générale
• Success: succès, action verte, positive
• Info: Information, azur, clarifié soulignant critique ou spécial actes
• Warning: Avertissement, action orange, critique ou complexe, doit être
pris avec prudence
• Danger: Danger, action rouge, dangereuse ou irréversible, négatif
• Link: permet de formater un bouton sous forme de lien, souvent appelé 86
réduction.
<button type="button" class="btn btn-primary">Primary</button> <button type="button"
class="btn btn-secondary">Secondaire</button> <button type="button" class="btn btn-
success">Succes</button> <button type="button" class="btn btn-info">Info</button> <button
type="button" class="btn btn-warning">Warning</button> <button type="button" class="btn btn-
danger">Danger</button>
•Ce qui nous donne la figure suivante.
87
Les boutons
Bootstrap propose de nombreux style de bouton :
Pour créer un simple bouton avec le style par défaut :
<bu>on type="bu>on" class="btn btn-‐default">

Default
</bu>on>
88
Les boutons
 <div class="container"> <div class="row bloc"> <a href="#" class="btn"
role="button">Un lien</a> <button class="btn" type="submit">Bouton</button> <input type="button"
class="btn" value="Input"/> <div class="dropdown"> <button class="btn btn-default dropdown-toggle"
type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown <span class="caret"></span> </button> <ul class="dropdown-menu" aria-
labelledby="dropdownMenu1"> <li><a href="#">Action1</a></li> <li><a href="#">Action 2</a></li> <li><a
href="#">Action 3</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated
link</a></li> </ul> </div> </div>
89
Les boutons
On peut ajuster la dimension du bouton comme

suit :
•btn-lg : pour les grands boutons
•btn-sm : pour les moyens boutons
•btn-sm : pour les petits boutons.
•btn-xs : Bootstrap 4 a abandonné le .btn-xs pour
les petits boutons supplémentaires.
•btn-block : pour ceux qui couvrent toute la largeur
d’un parent .
90
Les boutons
91
Les boutons
92
93
Les formulaires de base Bootstrap
➢ Formulaire de mise en
forme Bootstrap fournit les types de mise en
page suivants:
• Formulaire vertical (par défaut)
• Formulaire en ligne
• Formulaire horizontal
94
➢ La structure de base des formulaires est fournie avec Bootstrap, les

contrôles de formulaire individuels reçoivent automatiquement un
style global.
➢ Pour créer un formulaire de base, procédez comme suit:
✓ Ajoutez un formulaire de rôle à l’élément parent <form>.
✓ Enveloppez les étiquettes et les contrôles dans un <div> avec la
classe .form-group. Ceci est nécessaire pour un espacement
optimal.Dans le cas contraire vous pouvez utiliser la
classe: <fieldset>
✓ Ajoutez une classe de .form-control à tous les éléments
95
textuels <input>, <textarea> et <select>.
<form role="form"> <div class="form-group">
<label for="name">Nom</label>
<input type="text" class="form-control" id="name" placeholder="Saisir votre nom">
<label for="name">Prénom</label>
<input type="text" class="form-control" id="rename" placeholder="Saisir votre prénom"> </div>
<div class="form-group">
<label for="inputfile">Télécharger un fichier</label>
<input type="file" id="inputfile"> <p class="help-block">Exemple de texte d'aide .</p> </div>
<div class="checkbox">
<label> <input type="checkbox">Le CheckBox</label> </div>

96
<button type="submit" class="btn btn-default">Soumettre</button>
</form>
Ce qui nous donne la figure suivante.
97
Les Spinners Bootstrap
➢ Les "spinners" Bootstrap peuvent être utilisés pour afficher l’état de

chargement dans vos projets.
➢ Bootstrap Spinner est utilisé pour afficher l’état de chargement (loading
state) d’une application ou de tout autre processus.
➢ Les "spinners" Bootstrap sont construits uniquement avec HTML et
CSS, ce qui signifie que vous n’avez pas besoin de JavaScript pour les
créer.
98
Bootstrap fournit différentes classes pour créer différents styles de
"spinner" pour afficher l’état de chargement des projets.
➢ .spinner-border
✓ Pour créer un "spinner" léger à bord en doit utiliser la classe .spinner-border.
✓ Syntaxe:
•<div class = "spinner-border" role = "status">
<span class = "sr-only"> Chargement </span>
</div>
99
➢ .spinner-grow
✓ Pour créer un "spinner" en croissance en doit utiliser la classe de

bootstrap .spinner-grow . Il s’affiche au fur et à mesure de sa croissance.
✓ Syntaxe:
<div class = "spinner-grow" role = "status">
<span class = "sr-only"> Chargement </span>
</div>
10
0
Exemple :
10
1
Les barres de navigation
Bootstrap met à notre disposition un ensemble de classes
qui vont nous permettre de créer des barres de navigation
complètes qui vont pouvoir intégrer différents éléments
comme un menu, un champ de recherche, un nom de
marque, etc.
10
2
Nous allons ensuite pouvoir ajouter différents composants à notre barre de
navigation comme un nom de marque, un menu, un champ de recherche, etc. Ces
composants vont être mis en forme grâce aux classes suivantes :
•La classe .navbar-nav pour le menu de navigation ;
•La classe .form-inline pour ajouter un champ de
formulaire (champ de recherche par exemple) ;
•La classe .navbar-text pour ajouter tout autre texte.
•La classe .navbar-brand pour le nom de la marque ;

10
3
10
4
Plus de css
De nombreux autres éléments sont disponibles avec

Bootstrap.
Notamment en ce qui concerne les formulaire, les images
(possibilié de créer des images rondes…).
10
5
Les components
En plus des items stylés par le css de Bootstrap, le

framework permet de faire appel à de nouveaux
éléments qui ne sont pas forcément disponibles
directement en HTML et qui peuvent s’avérer très
pratiques.
10
6
Les components
Voici quelques uns des éléments disponibles:

• dropdowns
• Bouton groups
• Nav
• navbar
• Breadcrumbs
• Page header
• Thumbnails
• Alerts
• …
10
7
Aller plus loin : bootstrap.js
En plus de ces éléments, Bootstrap permet
d’intégrer des effets et des objets plus complexes
grâce au Javascript et à bootstrap.js en seulement
quelques lignes de code.
De nombreux outils sont encore une fois

disponibles :
• Des boutons dynamiques (qui changent quand
on clique dessus)
• Des scrollSpy : c’est à dire des zones de
défilement associées à un header
• Des accordéons
• Des carousels 10
57
8
• …
Aller plus loin : Scrollspy
10
9
Aller plus loin : carousel
11
0
Aller plus loin : responsive design
Bootstrap permet de penser un développement

mobile et dispose de nombreuses options pour le
responsive design que nous n’avons pas pu
aborder lors de cette séance.
Encore une fois nous vous invitons à consulter la

documentation du site à ce sujet.
11
1
La documentation
Pour approfondir ce parcours, il est nécessaire de

consulter la documentation très claire qui est
disponible à l’adresse suivante :
11
2
11
3
La documentation
La documenation se divise en 5 grandes parties :

• Geeng started : qui vous donne les informations de base
pour commencer à utiliser le framework et une liste des
navigateurs compatibles.
• Css : la liste des éléments plus détaillée que dans notre
cours ainsi qu’une explication du système des grilles,
notamment pour le mobile.
• Components : la liste de tous les components
• Javascript : les objets et effets JS
• Customize : un formulaire pour créer son propre fichier
bootstrap selon ses besoins (pour utilisateur confirmé). 11
63
4
Bootstrap: references
le site officiel de Bootstrap (v4)

Bootstrap v3
http://getbootstrap.com/docs/3.3/
w3schools tutorials
https://www.w3schools.com/bootstrap4/default.asp
https://www.w3schools.com/bootstrap/default.asp /g\ Bootstrap 3
• Creez des sites web responsive avec Bootstrap 4

https://openclassrooms.com/fr/courses/6391096-creez-des-sites-web-responsive-avec-bootstrap-4
34

Cours Boot

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Cours Boot

Transféré par

Droits d'auteur :

Formats disponibles

Framework Bootstrap

« un ensemble de composants structurés qui sert à créer les

Il existent de nombreux frameworks pour des

Il existe d’autres frameworks css comme par

▪ très bonne connaissance des langages du web (HTML, CSS,

▪ facilite l'utilisation des rêgles CSS pour concevoir des sites

▪ grille d'affichage pour agencer les différentes bottes

• facilite d'utilisation : Bootstrap 4

• Gain de temps de développement

• Normalisation des présentations

• Un ensemble variés d’items facilement utilisables

• Facilite la gestion des diﬀérents tailles d’écran et des

• Mettre en place une (petite) infrastructure / « installer » le

• Il faut avoir pris le temps d’apprendre à utiliser le framework

• Entièrement conﬁgurable car codé avec LESS, un

Wikipedia, le 4 janvier 2013

• C’est l’un des projets les plus populaires sur

Nous intéressons à la version 3 ou la version 4

Bootstrap permet également de mettre en page facilement

Bootstrap facilite la rétro compatibilité et l’uniformisation

• Une mise en page avec une grille élastique de 12

Une documentation assez complète :

Garantie d’une évolution permanente à moyen terme.

Architecture conﬁgurable basée sur LESS.

2.Mettre le dossier décompressé dans le dossier

Boostrap.min.css est une alternative à bootstrap.css. Le ﬁchier min, plus

3. Rajouter un lien vers le ﬁchier CSS que l’on a choisi (min ou

Par exemple, si vous rangez votre ﬁchier dans un dossier lib :

<link href="site/lib/bootstrap/css/bootstrap.css" rel="stylesheet"

ça y est! Bootstrap est opérationnel. Il n’y a rien

A présent, nous n’avons plus qu’à nous en servir.

Bootstrap peut être utile à plusieurs niveaux comme nous

Tout le code qui sera généré dans le ﬁchier HTML prendra

Si je charge ma page web, après avoir mis le lien vers le

utilise en phase de developpement utilise quand le site est mis en ligne

- permet navigation dans le code et debogage

<link href="thirdparties/bootstrap4/css/bootstrap.css" rel="stylesheet"

• Alerts for dismissing

http://en.wikipedia.org/wiki/Content delivery network

Content delivery network

A content delivery network or content distribution network (CDN) is a geographically

https://fr.wikipedia.org/wiki/Reseau de diffusion de contenu

toutes les ressources lies a la page

les ressources statiques lies aux

attributs SRI (Subresource Integrity)

demande de la ressource au CDN

bootstrap.min.css le navigateur calcule une valeur de hash

les valeurs sont identiques, le

les valeurs different la feuille de style

<link href=Mthirdparties/bootstrap4/css/bootstrap.css" rel=MstylesheetM Vypc- LCAL/CSS //■

Bootstrap permet d’obtenir immédiatement un rendu

Toutefois il est possible de customiser ce design. Pour se

Toutefois, il est possible de personnaliser certains éléments.

Si je souhaite par exemple, garder le design général de

Le dernier ﬁchier CSS chargé prend le pas sur le précédent.

Pour utiliser Bootstrap, il ne faut pas toucher au ﬁchier CSS.

Tout se joue du côté du HTML. Il suﬃt de rajouter des

Les éléments prennent ainsi les propriétés générés par le

Pour utiliser Bootstrap, il faut comprendre deux principes :

• Le principe des grilles

• Connaître le nom des items existants et connaître les

Bootstrap permet de facilement mettre en place les blocs

Il suﬃt de se servir d’une grille. La grille permet de

• Bootstrap propose son propre systeme de grille (grid)