Table des matières

Le Multicolonne

 

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

O Télécharger Bootstrap

A partir de l'adresse http://getbootstrap.com/, télécharger le Bootstrap précompilé pour obtenir :

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 3 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 :

  • inférieurs à 768 pixels (smartphones).
  • supérieurs à 768 pixels (tablettes).
  • supérieurs à 992 pixels ( taille moyenne).
  • supérieurs à 1200 pixels (taille ).

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).

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

 

Avez-vous atteint les objectifs ?
Vous devez savoir constuire une pagination simple avec Bootstrap pour un premier niveau. Pour un niveau avancé, vous devez maitriser le design adaptatif à l'aide de Bootstrap.
Testez-vous

Quelle pagination va être produite par ? :

Exercices :

http://www3.hbc.com/