C'est une refonte majeure du célèbre framework Bootstrap avec cette version 3. Ce n'est pas encore la version finale, mais cette rc nous révèle la nouvelle logique du framework.
A noter un fichier css est plus léger : 12,8 ko (minifié et gzippé).
Approche mobile first
Bootstrap a été complètement repensé avec l'approche mobile first : on part du mobile et on enrichit pour les écrans plus large. Tous les css sont compilés dans un seul fichier (plus de fichier responsive.css)
Support des navigateurs
Bootstrap 3 n'est plus compatible avec internet explorer 7 et firefox 3x.
Pour ie8, il faut ajouter respond.js pour le support des média queries, et de nombreuses propriétés css3 ne sont pas compatibles (ombre, arrondis...)
Glyphicons
Bootstrap 3 utilise une font pour les icônes (font-face), plus de png. Un dépot spécifique est dédié à cette icon font : http://glyphicons.getbootstrap.com/
La grille
La grille a été complètement repensée et améliorée :
grille fluide et plus sémantique layout plus dynamique avec des classes pour écran moyen (small screen) et des classes pour écran large (large screen)
.col-X pour les mobile
.col-sm-X pour les écrans inférieur à 768px
.col-lg-X pour les écrans supérieur à 768px
Exemple :
<div class="row">
<div class="col-12 col-sm-8 col-lg-8">.col-12 .col-lg-8</div>
<div class="col-6 col-sm-4 col-lg-4">.col-6 .col-lg-4</div>
</div>
<div class="row">
<div class="col-6 col-sm-4 col-lg-4">.col-6 .col-lg-4</div>
<div class="col-6 col-sm-4 col-lg-4">.col-6 .col-lg-4</div>
<div class="col-6 col-sm-4 col-lg-4">.col-6 .col-lg-4</div>
</div>
<div class="row">
<div class="col-6 col-sm-12 col-lg-6">.col-6 .col-sm-12 .col-lg-6</div>
<div class="col-6 col-sm-12 col-lg-6">.col-6 .col-sm-12 .col-lg-6</div>
</div>Le code ci-dessous produira les layouts suivants
- Mobile :
- Tablette :
- Ecran large :
Push et pull pour changer l'ordre des colonnes, exemple :
<div class="row show-grid">
<div class="col-lg-9 col-push-3">9</div>
<div class="col-lg-3 col-pull-9">3</div>
</div>Mixins less pour du code plus sémantique, ex :
.wrapper {
.make-row();
}
.content-main {
.make-column(8);
}
.content-secondary {
.make-column(3);
.make-column-offset(1);
}<div class="wrapper">
<div class="content-main">...</div>
<div class="content-secondary">...</div>
</div>Formulaire
Tous les éléments avec la class .form-control ont une largeur de 100%. C'est un changement par rapport à la version 2 où par défaut les éléments du formulaire avaient une largeur fixe.
Pour les formulaires en mode horizontal (.form-horizontal), les groupes (label + input par exemple) doivent suivre la logique des grilles, ex :
<form class="form-horizontal">
<div class="form-group">
<label for="inputEmail" class="col-lg-2 control-label">Email</label>
<div class="col-lg-10">
<input type="text" class="form-control" id="inputEmail" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputPassword" class="col-lg-2 control-label">Password</label>
<div class="col-lg-10">
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
<button type="submit" class="btn btn-default">Sign in</button>
</div>
</div>
</form>La largeur des select ou input peut être contrôlée :
Nouveaux composants : List group et panel
List group :
Cras justo odioDapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibulum at eros
Panel :
titre du panel
Contenu du panel