<!Doctype html> <html> <head> <meta charset="utf-8" > <title>Mon Site avec Bootstrap</title> <link rel="stylesheet" href="css/bootstrap.css"> <link rel="stylesheet" href="css/style.css"> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> ... </body> </html>
.container{ border: 1px solid; } .bordureRouge{ border: 3px solid red; padding: 10px; } .bordureVerte{ border: 3px solid green; padding: 10px; } .bordureBleue{ border: 3px solid blue; padding: 10px; } .bordureJaune{ border: 3px solid yellow; padding: 10px; } .bordureOrange{ border: 3px solid orange; padding: 10px; }
style.css
que nous mettrons notre propre code, nous ne modifierons pas le fichier bootstrap.css, cela ne se fait pas dans les usages et d'autre part si l'on devait mettre à jour le fichier, cela ferait sauter nos modifications !.container
.
Une fois à l'intérieur de cette zone .container
nous disposons de 12 emplacements..col-md-1
<!Doctype html> <html> <head> <meta charset="utf-8" > <title>Mon Site avec Bootstrap</title> <link rel="stylesheet" href="css/bootstrap.css"> <link rel="stylesheet" href="css/style.css"> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <div class="container"> <div class="row"> <div class="col-md-1"> ... </div> </div> </div> </body> </html>
<!Doctype html> <html> <head> <meta charset="utf-8" > <title>Mon Site avec Bootstrap</title> <link rel="stylesheet" href="css/bootstrap.css"> <link rel="stylesheet" href="css/style.css"> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <div class="container"> <div class="row"> <div class="col-md-1 bordureRouge"> ... </div> </div> </div> </body> </html>
.container
prédéfinie dans la feuille de style bootstrap.css
(à laquelle nous sommes reliés) permet d'englober le reste de notre code et de le centrer sur la page web..row
prédéfinie dans la feuille de style bootstrap.css
(à laquelle nous sommes reliés) permet de prendre une ligne dans notre grille :<!Doctype html> <html> <head> <meta charset="utf-8" > <title>Mon Site avec Bootstrap</title> <link rel="stylesheet" href="css/bootstrap.css"> <link rel="stylesheet" href="css/style.css"> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <div class="container"> <div class="row"> <div class="col-md-2 bordureRouge"> ... </div> </div> </div> </body> </html>
col-md-2
correspond donc à 2 emplacements<!Doctype html> <html> <head> <meta charset="utf-8" > <title>Mon Site avec Bootstrap</title> <link rel="stylesheet" href="css/bootstrap.css"> <link rel="stylesheet" href="css/style.css"> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <div class="container"> <div class="row"> <div class="col-md-10 col-md-offset-1 bordureRouge"> ... </div> <div> <div class="row"> <div class="col-md-6 col-md-offset-3 bordureVerte">...</div> </div> </div> </body> </html>
.row
permet de créer une nouvelle ligne..col-md-10
permet de créer un nouvel espace qui prend 10 places (sur les 12 possibles)..col-md-offset-1
permet de créer une marge à gauche d'1 place..bordureRouge
permet de simplement de voir apparaitre notre zone à l'écran entourée de rouge..row
pour créer une nouvelle ligne en dessous..col-md-6
permet de créer un nouvel espace qui prend 6 places (sur les 12 possibles)..col-md-offset-3
permet de créer une marge à gauche de 3 places..bordureVerte
permet de simplement de voir apparaitre notre zone à l'écran entouré de vert.<!Doctype html> <html> <head> <meta charset="utf-8" > <title>Mon Site avec Bootstrap</title> <link rel="stylesheet" href="css/bootstrap.css"> <link rel="stylesheet" href="css/style.css"> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <div class="container"> <div class="row"> <!-- exemple - ligne 1 --> <div class="col-md-10 col-md-offset-1 bordureRouge"></div> </div> <div class="row"> <!-- exemple - ligne 2 --> <div class="col-md-6 col-md-offset-3 bordureVerte"></div> </div> <div class="row"> <!-- exercice - ligne 3 --> <div class="col-md-2 col-md-offset-5 bordureBleue"></div> </div> <div class="row"> <!-- exercice - ligne 4 --> <div class="col-md-3 bordureRouge"></div> <div class="col-md-3 bordureVerte"></div> <div class="col-md-3 bordureJaune"></div> <div class="col-md-3 bordureOrange"></div> </div> <div class="row"> <!-- exercice - ligne 5 --> <div class="col-md-12 bordureBleue"></div> </div> <div class="row"> <!-- exercice - ligne 6 --> <div class="col-md-5 col-md-offset-2 bordureRouge"></div> <div class="col-md-3 col-md-offset-2 bordureVerte"></div> </div> </div> </body> </html>
.row
permet de créer une nouvelle ligne..col-md-2
permet de créer un nouvel espace qui prend 2 places (sur les 12 possibles)..col-md-offset-5
permet de créer une marge à gauche de 5 places..bordureBleue
permet de simplement de voir apparaitre notre zone à l'écran entourée de bleu..row
permet de créer une nouvelle ligne..col-md-3
permet de créer un nouvel espace qui prend 3 places (sur les 12 possibles)..row
permet de créer une nouvelle ligne..col-md-12
permet de créer un nouvel espace qui prend 12 places (sur les 12 possibles)..bordureBleue
permet de simplement de voir apparaitre notre zone à l'écran entourée de bleu..row
permet de créer une nouvelle ligne..col-md-5
permet de créer un nouvel espace qui prend 5 places (sur les 12 possibles)..col-md-3
permet de créer un nouvel espace qui prend 3 places (sur les 12 possibles)..col-md-offset-2
permet de créer une marge à gauche de 2 places.float: left;
pour mettre 2 zones côte à côte dans bootstrap ! C'est plus simple et aussi plus souple.<div class="row">
..offset
.<!Doctype html> <html> <head> <meta charset="utf-8" > <title>Mon Site avec Bootstrap</title> <link rel="stylesheet" href="css/bootstrap.css"> <link rel="stylesheet" href="css/style.css"> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <div class="container"> <div class="row"> <div class="col-xs-1 bordureRouge"> ... </div> </div> </div> </body> </html>
col-xs-*
ou col-sm-*
ou col-md-*
ou col-lg-*
.Écran | Écran minimum | Écran réduit | Écran moyen | Grand Écran |
---|---|---|---|---|
Illustration | ![]() |
![]() |
![]() |
![]() |
Type | SmartPhone | Tablette | Ordinateur Portable | Ordinateur de bureau |
Classe CSS Bootstrap |
col-xs-* | col-sm-* | col-md-* | col-lg-* |
Résolution d'écran | < 768 px | >= 768 px < 992 px |
>= 992 px < 1200 px |
>= 1200 px |
col-xs-*
, col-lg-*
et les autres possibilités ? et comment je m'y retrouve ? »col-xs-*
.Zone col-xs-* sur SmartPhone |
Zone col-lg-* sur SmartPhone |
![]() |
![]() |
col-lg-*
, il est certain que les zones auraient fini par s'empiler l'une en dessous de l'autre lors de l'affichage sur un petit écran.col-xs-*
: les 2 zones resteront côte a côte sur un petit écrancol-lg-*
: les 2 zones s'empileront l'une en dessous de l'autre sur un petit écran.<!Doctype html> <html> <head> <meta charset="utf-8" > <title>Mon Site avec Bootstrap</title> <link rel="stylesheet" href="css/bootstrap.css"> <link rel="stylesheet" href="css/style.css"> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <div class="container"> <div class="row"> <div class="col-xs-6 bordureRouge"> ... </div> <div class="col-xs-6 bordureVerte"> ... </div> </div> <div class="row"> <div class="col-lg-6 bordureBleue"> ... </div> <div class="col-lg-6 bordureOrange"> ... </div> </div> </div> </body> </html>
col-xs-*
, col-sm-*
, col-md-*
, col-lg-*
Tableau des pourcentage % par nombre d'emplacement. | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
emplacement | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 |
taille en largeur (width) |
8,33% | 16,66% | 25% | 33,33 % | 41,66 % | 50 % | 58,33 % | 66,66 % | 75 % | 83,33 % | 91,66 % | 100 % |
<!Doctype html> <html> <head> <meta charset="utf-8" > <title>Mon Site avec Bootstrap</title> <link rel="stylesheet" href="css/bootstrap.css"> <link rel="stylesheet" href="css/style.css"> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <div class="container"> <div class="row"> <div class="col-xs-1 bordureRouge"> ... </div> <div class="col-sm-1 bordureVerte"> ... </div> <div class="col-md-1 bordureBleue"> ... </div> <div class="col-lg-1 bordureOrange"> ... </div> </div> </div> </body> </html>
.container
permet d'englober la page (ainsi que le reste du code) et de le centrer sur la page, dans une taille fixe qui s'adapte en fonction de la résolution d'écran..container-fluid
permet d'englober la page (ainsi que le reste du code) sur toute la largeur de la page.Écran | Écran minimum | Écran réduit | Écran moyen | Grand Écran |
---|---|---|---|---|
Illustration | ![]() |
![]() |
![]() |
![]() |
Type | SmartPhone | Tablette | Ordinateur Portable | Ordinateur de bureau |
Résolution d'écran | < 768 px | >= 768 px < 992 px |
>= 992 px < 1200 px |
>= 1200 px |
Classe CSS .container | 100 % de la taille restante | 750 px | 970 px | 1170 px |
Classe CSS .container-fluid | 100 % | 100 % | 100 % | 100 % |
.container-fluid
:<!Doctype html> <html> <head> <meta charset="utf-8" > <title>Mon Site avec Bootstrap</title> <link rel="stylesheet" href="css/bootstrap.css"> <link rel="stylesheet" href="css/style.css"> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <div class="container-fluid"> <div class="row"> <div class="col-xs-6 bordureRouge"> ... </div> <div class="col-xs-6 bordureVerte"> ... </div> </div> <div class="row"> <div class="col-lg-6 bordureBleue"> ... </div> <div class="col-lg-6 bordureOrange"> ... </div> </div> </div> </body> </html>
.container-fluid
, les emplacements prennent toute la largeur de la page web.<!Doctype html> <html> <head> <meta charset="utf-8" > <title>Mon Site avec Bootstrap</title> <link rel="stylesheet" href="css/bootstrap.css"> <link rel="stylesheet" href="css/style.css"> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <div class="container"> <div class="row"> <div class="col-xs-6 col-sm-4 bordureRouge"> Colonne 1 </div> <div class="col-xs-6 col-sm-8 bordureVerte"> Colonne 2 </div> </div> </div> </body> </html>
visible-*
hidden-*
<!Doctype html> <html> <head> <meta charset="utf-8" > <title>Mon Site avec Bootstrap</title> <link rel="stylesheet" href="css/bootstrap.css"> <link rel="stylesheet" href="css/style.css"> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <div class="container"> <div class="row"> <div class="col-xs-6 col-sm-5 col-md-5 col-lg-4 bordureRouge"> Zone Gauche </div> <div class="col-xs-6 col-sm-5 col-md-5 col-lg-4 bordureVerte"> Zone Milieu </div> <div class="hidden-xs col-sm-2 col-md-2 col-lg-4 bordureOrange"> Zone Droite </div> </div> </div> </body> </html>
hidden-xs
donc 0 place (-2).col-lg-push-*
col-lg-pull-*
<!Doctype html> <html> <head> <meta charset="utf-8" > <title>Mon Site avec Bootstrap</title> <link rel="stylesheet" href="css/bootstrap.css"> <link rel="stylesheet" href="css/style.css"> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <div class="container"> <div class="row"> <div class="col-md-9 col-md-push-3 bordureRouge">.col-md-9 .col-md-push-3</div> <div class="col-md-3 col-md-pull-9 bordureVerte">.col-md-3 .col-md-pull-9</div> </div> </div> </body> </html>
img-responsive
qui permet aux images de suivre la taille de leur conteneur parent.<!Doctype html> <html> <head> <meta charset="utf-8" > <title>Mon Site avec Bootstrap</title> <link rel="stylesheet" href="css/bootstrap.css"> <link rel="stylesheet" href="css/style.css"> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <div class="container"> <div class="row"> <div class="col-md-5 bordureRouge"> <img src="monimage.jpg" class="img-responsive"> </div> </div> </div> </body> </html>
.img-responsive, .thumbnail > img, .thumbnail a > img, .carousel-inner > .item > img, .carousel-inner > .item > a > img { display: block; max-width: 100%; height: auto; }En appliquant cette classe, cela permet donc à chaque image de se recadrer (redimensionner) automatiquement à une taille de 100% du conteneur dans lesquel elles seront contenues.
img-responsive
.
<!Doctype html> <html> <head> <meta charset="utf-8" > <title>Mon Site avec Bootstrap</title> <link rel="stylesheet" href="css/bootstrap.css"> <link rel="stylesheet" href="css/style.css"> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <div class="container"> <div class="row"> <!-- exercice - ligne 6 --> <div class="col-md-6 col-md-offset-2 bordureRouge"></div> <div class="col-md-3 col-md-offset-2 bordureVerte"></div> </div> </div> </body> </html>
<div class="row">
, qu'est-ce qui ne fonctionne pas ?<!Doctype html> <html> <head> <meta charset="utf-8" > <title>Mon Site avec Bootstrap</title> <link rel="stylesheet" href="css/bootstrap.css"> <link rel="stylesheet" href="css/grille-page-web.css"> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <div class="container"> <div class="row"> <header class="col-md-12 bordureRouge"> <div class="col-md-2 bordureRouge header-1"> header - 1 </div> <div class="col-md-6 col-md-offset-1 bordureRouge header-2"> header - 2 </div> <div class="col-md-2 col-md-offset-1 bordureRouge header-3"> header - 3 </div> </header> </div> <div class="row"> <nav class="col-md-12 bordureOrange nav"> nav </nav> </div> <div class="row"> <section class="col-md-12 bordureBleue"> <div class="col-md-2 bordureBleue section-1"> section - 1 </div> <div class="col-md-6 col-md-offset-1 bordureBleue section-2"> section - 2 </div> <div class="col-md-2 col-md-offset-1 bordureBleue section-3"> section - 3 </div> </section> </div> <div class="row"> <footer class="col-md-12 bordureVerte"> <div class="col-md-2 bordureVerte footer-1"> footer - 1 </div> <div class="col-md-6 col-md-offset-1 bordureVerte footer-2"> footer - 2 </div> <div class="col-md-2 col-md-offset-1 bordureVerte footer-3"> footer - 3 </div> </footer> </div> </div> </body> </html>
.container{ border: 3px solid; } .bordureRouge{ border: 3px solid red; padding: 10px; } .bordureVerte{ border: 3px solid green; padding: 10px; } .bordureBleue{ border: 3px solid blue; padding: 10px; } .bordureJaune{ border: 3px solid yellow; padding: 10px; } .bordureOrange{ border: 3px solid orange; padding: 10px; } .header-1, .header-2, .header-3{ min-height: 100px; } .section-1, .section-2, .section-3{ min-height: 400px; }