Twitter Bootstrap 3 RC1 : les nouveautés

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

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 :

Panel :