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

      mobile

    • Tablette :

      tablette

    • Ecran large :

      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 :

      form-largeur

      Nouveaux composants : List group et panel

       

      List group :

      Panel :

      titre du panel

      Contenu du panel