Table des matièresBootstrap 4.0

Bootstrap est un framework constitué de codes HTML ,  CSS, des formulaires, boutons, outils de navigation et autres éléments interactifs, ainsi que des extensions JavaScript en option.

C'est l'un des projets les plus populaires sur la plate-forme de gestion de développement GitHub.

Entrons dans le vif du Sujet

I Téléchargement et compilation

1 - Téléchargement

On trouve sur http://v4-alpha.getbootstrap.com/getting-started/download/ la dernière version encore en alpha de Bootstrap. Il s'agit d'un SCSS pour la partie style. Téléchargez-la et compilez-la.

2 - QuickStart

Afin de démarrer plus rapidement l'étude de Bootstrap dans sa dernière version 4.0.0 , nous pourrons placer directement un appel de la feuille de style complète de bootstrap

<link rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css">

II Starter template

Voici le template de démarrage proposé par http://v4-alpha.getbootstrap.com/. Il permet d'assurer les développements les plus standardisés :

<!DOCTYPE html>
<html lang="fr">
  <head>
    <!-- Required meta tags always come first -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="x-ua-compatible" content="ie=edge">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css">
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- jQuery first, then Bootstrap JS. -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js"></script>
  </body>
</html>

Voir dans le navigateur

Exemple
bootstrap/
├── css/
│ ├── bootstrap.css
│ ├── bootstrap.min.css
│ ├── bootstrap-theme.css
│ └── bootstrap-theme.min.css
├── js/
│ ├── bootstrap.js
│ └── bootstrap.min.js
└── fonts/
│ ├── glyphicons-halflings-regular.eot
│ ├── glyphicons-halflings-regular.svg
│ ├── glyphicons-halflings-regular.ttf
│ └── glyphicons-halflings-regular.woff

La version 4 de Bootstrap est conçue pour le Responsive Web Design. Les pages concues avec sa grille pourront s’adapter aux différents type d’écran : écran d’ordinateur, tablette et smartphone.

I Container

Pour utiliser Bootstrap , un élément de classe "container" doit envelopper tous les éléments de la page

Use .container for a responsive fixed width .

Exemple
<div class="container">    ...  </div>

<div class="container-fluid">    ...  </div>

On utilisera aussi la classe " .container-fluid" pour occuper toute la largeur de l'écran.

Bootstrap défini un padding gauche et droite de 15px pour cette classe container

Exemple
.container { 
  padding-right: 15px; 
  padding-left: 15px; 
  margin-right: auto; 
  margin-left: auto; 
}

ATTENTION, Bootstrap utilise la propriété CSS3 : box-sizing: border-box;. Elle implique que les dimensions (width et height) des boites comprendront le content+padding+border.

II Type d'écran

Bootstrap distingue 4 types d’écrans :

Le fichier bootstrap.min.css (ou bootstrap.css) contient les médias queries @media permettant ces distinctions :

Des requêtes de média fixent la largeur du "container" :

Note

Pour les tablettes :

@media (min-width: 768px) {     .container {       max-width: 750px;     }   }  

Pour les écrans moyens :

@media (min-width: 992px) {     .container {       max-width: 970px;     }   }  

Pour les grands écrans :

@media (min-width: 1200px) {     .container {       max-width: 1170px;     }   }

III Les classes dédiées

La grille adaptative de Bootstrap utilise des classes dédiées définies dans bootstrap.min.css (ou bootstrap.css).

Exemple, grille adaptative : http://www.mirrorlink.com/

Note
.col-xs-*
pour les smartphones, définies par défaut
.col-sm-*
pour les tablettes, définies sous la règle média @media (min-width: 768px) {...}
.col-md-*
pour les écrans de largeur moyenne, définies sous la règle média @media (min-width: 992px) {...}
.col-lg-*
pour les grands écrans, définies sous la règle média @media (min-width: 1200px) {...}
* est un nombre de 1 à 12

IV Un découpage en 12 colonnes

Contrairement au framework Blueprint, ce découpage est relatif (pour le design responsive)
Note
.col-xs-1{
	width:8.33333333%
}
.col-sm-1{
	width:8.33333333%
}
.col-md-1{
	width:8.33333333%
}
On vérifiera le calcul 1/12 =0,083333333...

Cette colonne élémentaire est l'unité de la grille : une partition de l'écran correspond à un nombre entier de colonnes élémentaires. Par exemple pour partager en parties égales:

Note
.col-xs-12{width:100%}
.col-xs-11{width:91.66666667%}
.col-xs-10{width:83.33333333%}
.col-xs-9{width:75%}
.col-xs-8{width:66.66666667%}
.col-xs-7{width:58.33333333%}
.col-xs-6{width:50%}
.col-xs-5{width:41.66666667%}
.col-xs-4{width:33.33333333%}
.col-xs-3{width:25%}
.col-xs-2{width:16.66666667%}
.col-xs-1{width:8.33333333%}

V Faire varier la largeur suivant la taille de l'écran

Comment ? en proposant des partages différents suivant l'écran xs/sm/md/lg

Testez cette page en faisant varier la largeur de la fenêtre

VI La gouttière de 15px+15px

Toutes les colonnes et le "container" prévoient un padding gauche et un padding droit de 15px

Note
.col-md-6{
		position:relative;
		min-height:1px;
		padding-left:15px;
		padding-right:15px
}

.container { 
  padding-right: 15px; 
  padding-left: 15px; 
  margin-right: auto; 
  margin-left: auto; 
}

Ces padding s'additionnent, afin de maintenir les largeurs Bootstrap utilise l'attribut "box-sizing: border-box;" : lorsque cet attribut est invoqué la largeur width est calculée comme content+padding+border (par défaut seulement content)

VII Ligne : la classe .row

Afin d'organiser la pagination, les éléments de classe "row" permettent de créer un alignement

Les marges négatives de la classe .row compensent les paddings des classes .col-*-*

Cette compensation permet d'enchasser les .col-

Note
<div class="container">
		<div class="row">
				<div class="col-sm-8">
            			<div class="row">
								<div class="col-sm-4 bleu">.col-sm-4</div>
								<div class="col-sm-4 rouge">.col-sm-4</div>
								<div class="col-sm-4 bleu">.col-sm-4</div> 
						</div>
						<div class="row">                                                                           				<div class="col-sm-6 jaune">.col-sm-6</div>
										<div class="col-sm-6 vert">.col-sm-6</div>
						</div>
				</div>
				<div class="col-sm-4 jaune">Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Aenean eleifend imperdiet orci vitae tristique. 
				</div>
			</div>
		</div>
</div>                                

VIII col-*-push-*, col-*-pull-*, col-*-offset-*

Exemple
.col-md-push-3
permet de placer à 3 colonnes
.col-md-push-3{
	left:25%
}
.col-md-offset-3
permet de translater de 3 colonnes
.col-md-offset-3{
	margin-left:25%
}

Tester l'illustration suivante en changeant la largeur de la fenêtre

XX Webographie

http://blog.netapsys.fr/introduction-a-bootstrap-sass/

https://github.com/twbs/bootstrap-sass

https://openclassrooms.com/courses/prenez-en-main-bootstrap/mise-en-route-8

Testez-vous
Voici un premier élément à formater suivant boostrap enoncé.

A vous de placer les classes de la grille bootstrap : row, col-*-* pour obtenir l'aluure ci-dessous

 


On souhaite webdesigner le formulaire suivant :

Légende

Voici le formulaire finalisé

Ce formulaire utilise les classes de formulaire de Boostrap suivante :

  • class="form-horizontal"
  • class="form-group"
  • class="control-label"
  • class="btn btn-default"

La grille utilise les colonnages : col-lg-6, row, col-lg-2, col-lg-10, pull-right

A vous d'ajouter les balises div nécessaires pour porter ces classes. Voici quelques indications :

Formulaire_corrige.html