La grille
Une grille est découpée en rangées (appelées row, parce que tout est en anglais) et colonnes (col).
La grille par défault comporte 12 colonnes.
-
Les colonnes sont divisées en pourcentage de la largeur de la fenêtre
-
Les lignes ont la hauteur de leur contenu (une rangée prend donc la hauteur du plus gros élément qu’elle contient)
Les différentes classes
col-xs-* : pour les smarphones < 768 px
col-sm-* : pour les tablettes >= 768 px
col-md-* : pour les petits desktops/laptops >= 992 px
col-lg-* : pour les grands desktops >= 1200 px
|
Note
|
xs pour x-small, sm pour small, md pour medium et lg pour large.
NOTE: Si j’utilise les classes pour grand écran avec les classecol-lg-*, je me retrouverai avec un empilage dès que je passe en dessous de 1200 pixels.
|
Les containers
La classe container contient et centre la grille sur une largeur fixe, qui s’adapte en fonction de la largeur de l’écran.
La classe container-fluid permet à la grille d’occuper toute la largeur.<
Quelques exemples de mise en page
Elements de base
Listes
<ul class="list-unstyled">, supprime les puces
<ul class="list-inline">, liste en ligne (ex pour un menu)
Tableaux
<table class="table table-bordered table-striped table-condensed">
Colorer le fond des lignes des tableaux avec les `classesinfo`, `success`, `danger`, `warning` et `active`
Formulaires
J’aimerais que les contrôles occupent toute la largeur disponible.
Il faut utiliser la classe form-control pour obtenir cet effet
Exemple:
<form class="col-lg-6 well">
<legend>Légende</legend>
<div class="form-group">
<label for="text">Text</label>
<input type="text" id="text" class="form-control">
</div>
<div class="form-group">
<label for="textarea">Textarea</label>
<textarea id="textarea" class="form-control"></textarea>
</div>
<div class="form-group">
<label for="select">Select</label>
<select class="form-control" id="select">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
</div>
<button>Envoyer</button>
</form>classe form-group : permet d’aérer le formulaire
classe well : apporte une stylisation supplémentaire
classe form-horizontal : applicable à un <form></form>
classes input-group et input-group-addon servent à accoler une information à un formulaire.
Exemple:
<form class="form-inline">
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">€</span>
<input type="text" class="form-control" value="100">
</div>
</div>
<div class="form-group">
<div class="input-group">
<input type="text" class="form-control" style="text-align:right" value="100,50">
<span class="input-group-addon">€</span>
</div>
</div>
</form>