Fil d'Ariane
Mis à jour le mercredi 12 juillet 2017
  • 10 heures
  • Moyenne

Ce cours est visible gratuitement en ligne.

Ce cours existe en eBook.

Vous pouvez obtenir un certificat de réussite à l'issue de ce cours.

Vous pouvez être accompagné et mentoré par un professeur particulier par visioconférence sur ce cours.

J'ai tout compris !

Configurer Bootstrap

Connectez-vous ou inscrivez-vous pour bénéficier de toutes les fonctionnalités de ce cours !

Utiliser directement ce que nous offre Bootstrap c'est bien, mais le modifier pour le rendre exactement adapté à nos besoins c'est encore mieux. Alors, si vous voulez bidouiller Bootstrap, ce chapitre est fait pour vous !

Configuration simplifiée

Une page d'exemple

Supposons que nous voulions créer un site avec une certaine présentation. Quelque chose de simple, parce que je veux juste vous montrer le principe de la configuration. Voici le code HTML de base :

<!DOCTYPE HTML>
<html>

  <head>
    <meta charset="utf-8">
    <link href="assets/css/bootstrap.min.css" rel="stylesheet">
  </head>

  <body>
    <div class="container">
      <header class="row col-sm-12">
        <div class="page-header">
          <h1>Mon beau site<img src="images/papillon.png" class="pull-right"></h1>
        </div>
      </header>
      <div class="row col-sm-12">
        <nav class="col-sm-2">          
          <ul class="nav nav-pills nav-stacked">
            <li class="active"> <a href="#"> <span class="glyphicon glyphicon-home"></span> Accueil </a> </li>
            <li> <a href="#"> <span class="glyphicon glyphicon-book"></span> Livres </a> </li>
            <li> <a href="#"> <span class="glyphicon glyphicon-facetime-video"></span> Films </a> </li>
            <li> <a href="#"> <span class="glyphicon glyphicon-headphones"></span> Musiques </a> </li>
          </ul>
        </nav>
        <section class="col-sm-10">
          <div class="panel panel-default">
            <div class="panel-heading">
              <h3 class="panel-title">Bienvenue sur mon site !</h3>
            </div>
            <div class="panel-body">
              <p>"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, 
eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas 
sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, 
qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore 
magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut 
aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, 
vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"</p>
              <p>"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, 
eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia 
voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro 
quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut 
labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit 
laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil 
molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"</p>
              <p>"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, 
eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia 
voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro 
quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut 
labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit 
laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam 
nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"</p>
            </div>
          </div>
        </section>
      </div>
      <footer class="row col-sm-12">
        <div class="panel panel-body">
          <p>Tous droits réservés par moi...</p>
        </div>
      </footer>
    </div>
  </body>

</html>

La page est organisée en 4 parties :

  1. bannière supérieure

  2. menu à gauche

  3. contenu à droite

  4. pied de page en bas

Bootstrap permet de réaliser cette mise en page avec facilité. La mise en forme effectuée par Bootstrap donne la figure suivante.

Une page d'exemple
Une page d'exemple

Tester

C'est déjà pas si mal avec aucune règle de style ajoutée ! Mais on va quand même améliorer la présentation  :

body {
  background-color:#bbb;
  color:#048;      
  font-size: 12px;
  line-height: 16px;
}
a { 
  color: #028; 
}
footer { 
  text-align:center; 
}
nav {
  background-color:#bcd;
  border-radius: 8px;
  padding: 0 !important;
  border: 1px solid #ddd;
}
section { 
  padding-right: 0 !important; 
}
.panel {
  background-color: #bcd;
  border-radius: 8px;
  padding-bottom: 5px;
}
h1 {
  text-shadow: 4px 4px 5px #777;
  color: #449;
}
.nav > li > a:hover, .nav > li > a:focus {
  background-color: #cde; 
}
.panel-default > .panel-heading, .nav-pills > li.active > a, .nav-pills > li.active > a:hover, .nav-pills > li.active > a:focus {
  color: #048;
  background-color: #abc;
  border-radius: 8px;
}

Ce qui nous donne la figure suivante.

La même page stylisée
La même page stylisée

Tester

Avec une réaction correcte quand on réduit l'affichage au-dessous de 768 pixels, comme le montre la figure suivante.

Effet de la réduction de l'affichage
Effet de la réduction de l'affichage

J'ai profité de l'occasion pour montrer comment créer facilement un menu vertical avec Bootstrap. Mais ce qui va nous intéresser concerne les styles. Parce que toute une partie de la stylisation est en fait une modification des paramétrages de base de Bootstrap. J'ai changé la couleur de fond, la couleur de premier plan, la couleur des liens, la taille des caractères… On peut se demander s'il n'est pas plus simple de modifier directement Bootstrap…

Configurer en ligne sur le site de Bootstrap

Les composants

Allez sur cette page. Vous trouvez un grand formulaire qui vous permet de mettre Bootstrap non seulement à votre sauce côté présentation, mais aussi de confectionner un fichier le plus léger possible. Vous sélectionnez les composants que vous utilisez. Pour la page d'exemple, cela ressemble à la figure suivante.

Composants sélectionnés pour la page d'exemple

Comme on n'utilise aucun plugin jQuery, on décoche tout avec le boutonToggle all(voir figure suivante).

Tous les composants jQuery désélectionnés

On ne tient pas compte pour le moment des variables LESS. Il n'y a plus qu'à cliquer sur le bouton situé tout en bas de la page pour obtenir un Bootstrap personnalisé (voir figure suivante).

Le bouton de création
Le bouton de création

On obtient les dossiers et fichiers représentés dans la figure suivante).

Les fichiers générés
Les fichiers générés

On a aussi droit à une séance de rattrapage avec un lien (voir figure suivante).

Les liens pour modifier la configuration
Les liens pour modifier la configuration

On remarque qu'un fichier config.json contient toute la configuration qu'on vient d'effectuer. C'est un net progrès par rapport aux précédentes versions de ce configurateur qui ne mémorisait rien du tout.

On se retrouve avec tout ce qu'il nous faut pour notre site. Si on regarde le poids des deux fichiers CSS, normal et minifié, on trouve 48 Ko et 39 Ko, alors que les versions complètes font 137 Ko et 113 Ko. La différence est loin d'être négligeable ! Il faut quand même vérifier que la page fonctionne encore correctement. On va enregistrer le fichier minifié avec un nouveau nom :

<link href="assets/css/bootstrap.min.v1_0.css" rel="stylesheet">

Tester

Les variables

Il est possible d'aller plus loin dans la personnalisation. Regardons les variables disponibles. Par exemple dans les variables du scaffolding, sur la même page de configuration, on trouve celle qui concerne la couleur de fond de la page@body-bg(voir figure suivante).

La variable @body-bg
La variable @body-bg

Par défaut, cette valeur est fixée à#fff, autrement dit la couleur blanche. Or pour ma page, il me faut la valeur#bbb. Je peux donc changer la valeur à ce niveau, je n'aurai ainsi plus besoin de fixer cette propriété dans ma feuille de style personnelle. Quelles autres variables sont intéressantes dans le cas de notre page ? Je trouve par exemple la variable@text-color(voir figure suivante).

La variable @text-color
La variable @text-color

Je peux la fixer à#048. On va en rester là pour cet exemple, et créer un nouveau fichier Bootstrap avec ce paramétrage. On compile le fichier, on le télécharge et on lui donne un nouveau nom :

<link href="assets/css/bootstrap.min.v1_1.css" rel="stylesheet">

Il faut aussi supprimer les styles devenus redondants :

body {
/*  background-color:#bbb;
  color:#048; */     
  font-size: 12px;
  line-height: 16px;
}
a { 
  color: #028; 
}
footer { 
  text-align:center; 
}
nav {
  background-color:#bcd;
  border-radius: 8px;
  padding: 0 !important;
  border: 1px solid #ddd;
}
section { 
  padding-right: 0 !important; 
}
.panel {
  background-color: #bcd;
  border-radius: 8px;
  padding-bottom: 5px;
}
h1 {
  text-shadow: 4px 4px 5px #777;
  color: #449;
}
.nav > li > a:hover, .nav > li > a:focus {
  background-color: #cde; 
}
.panel-default > .panel-heading, .nav-pills > li.active > a, .nav-pills > li.active > a:hover, .nav-pills > li.active > a:focus {
  color: #048;
  background-color: #abc;
  border-radius: 8px;
}

Tester

On obtient le même résultat. On peut évidemment se demander l'intérêt de procéder ainsi pour gagner juste quelques règles de style. C'est effectivement se donner bien du mal pour pas grand chose. En revanche, cette démarche peut devenir intéressante dans le cadre de la création d'un thème spécifique avec beaucoup de réglages de variables.

LESS, un langage de style dynamique

Bootstrap est totalement paramétrable parce qu'il est basé sur LESS. C'est un langage qui permet d'étendre les possibilités du CSS avec des variables, des opérations, des fonctions. La version 3.1 de Bootstrap a vu également l'arrivée très attendue d'un portage sur Sass, qui est un autre langage qui permet de gérer le CSS. Pour le moment, celui-ci se situe à part sur une page GitHub.

Faisons à présent un petit passage en revue des possibilités de LESS…

Les sources des fichiers LESS de Bootstrap

Vous pouvez trouver les sources LESS de Bootstrap dans le pack que vous téléchargez sur le site (voir figure suivante).

Le dossier des fichiers LESS de Bootstrap

Nous allons les prendre comme exemple pour illustrer les possibilités de LESS.

Des variables

Une des principales fonctionnalité de LESS est de permettre la création de variables et d'ainsi centraliser les valeurs et faciliter les modifications. Ouvrez le fichiervariables.lessqui définit la valeur de toutes les variables utilisées par Bootstrap. En voici un extrait :

...
// Buttons
// -------------------------

@btn-font-weight:                normal;

@btn-default-color:              #333;
@btn-default-bg:                 #fff;
@btn-default-border:             #ccc;
...

Une variable est déclarée avec une syntaxe simple : il suffit d'utiliser le caractère @ suivi du nom de la variable, par exemple on a ici la variable@btn-default-color. Une variable prend une valeur, ici la variable@btn-default-colora la valeur#333. On peut ensuite utiliser cette variable pour affecter la valeur correspondante. Ouvrez le fichierbuttons.lesset trouvez ces lignes :

.btn {
  ...
  &:focus {
    color: @btn-default-color;
    text-decoration: none;
  }

On voit qu'on utilise la variable@btn-default-colorpour affecter la valeur de la propriétécolorpour le focus des boutons. Remarquez au passage l'utilisation du signe&pour faciliter l'écriture du code. Pour la même classe.btn, on peut regrouper des sélecteurs dans un même bloc sans tout réécrire. On trouve la même variable utilisée un peu plus loin dans le code :

.btn-default {
  .button-variant(@btn-default-color; @btn-default-bg; @btn-default-border);
}

Il suffit donc de modifier la valeur de la variable pour que toutes ces affectations soient changées avec cette seule action.

Et si on regarde le résultat, on retrouve bien la couleur#333affectée à la couleur du bouton pour le focus :

.btn:focus {
  color: #333;
  text-decoration: none;
}

Cette factorisation est pratique si elle est bien organisée, ce qui est le cas avec Bootstrap qui centralise toutes les variables dans le même fichier. Rien n'empêche aussi d'affecter la valeur d'une variable à une autre variable comme ici :

@brand-primary:         #428bca;
   ...
@link-color:            @brand-primary;

Inclusion de fichier

Les possibilités de LESS sont loin de s'arrêter à la définition de variables. On peut inclure un fichier avec la commande@import. Par exemple, le fichierbootstrap.lessne fait que des inclusions :

...
// Core variables and mixins
@import "variables.less";
@import "mixins.less";

// Reset and dependencies
@import "normalize.less";
@import "print.less";
...

On peut importer des fichierslessoucss. S'il s'agit d'un fichierless, il est évidemment traité s'il comporte des commandes spéciales, alors que dans le cas d'un fichiercss, il est pris tel quel sans traitement particulier.

Les mixins

On peut aussi inclure une classe dans une autre classe (ce qui se nommemixinsdans le langage LESS), comme si elle était une propriété. On peut le voir ici dans le fichiergrid.less:

// Set the container width, and override it for fixed navbars in media queries
.container {
  .container-fixed();
  ...
}

On voit que la classe.container-fixedest utilisée comme une propriété. Examinons cette classe appelée qui se situe dans le fichiermixins/grid.less:

// Centered container element
.container-fixed(@gutter: @grid-gutter-width) {
  margin-right: auto;
  margin-left: auto;
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);
  &:extend(.clearfix all);
}

On y trouve un certain nombre de règles, essentiellement pour centrer l'élément et même un autre appel à une classe, iciclearfix. Vous avez remarqué sans doute la syntaxe particulière avec l'ajout de parenthèses comme s'il s'agissait d'une fonction. Cette analogie va plus loin, puisqu'on peut même transmettre des paramètres (on parle alors de mixin paramétré) à une classe incluse comme ici dans le fichierbutton-groups.less:

.btn-group.open .dropdown-toggle {
  .box-shadow(inset 0 3px 5px rgba(0,0,0,.125));
  ...
}

Voyons la classe appelée qui se situe encore dans le fichiermixins/vendor-prefixes.less:

// Drop shadows
.box-shadow(@shadow) {
  -webkit-box-shadow: @shadow; // iOS <4.3 & Android <4.1
          box-shadow: @shadow;
}

On voit que cette classe réalise un ombrage selon le paramètre transmis. Si on regarde le résultat, on a bien ce qui est demandé :

.btn-group.open .dropdown-toggle {
  -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
          box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}

Sélecteurs emboîtés

On peut inclure des sélecteurs dans une définition, comme ici dans le fichierdropdowns.less:

// Open state for the dropdown
// ---------------------------
.open {
  // Show the menu
  > .dropdown-menu {
    display: block;
  }

  // Remove the outline when :focus is triggered
  > a {
    outline: 0;
  }
}

Cela simplifie l'écriture et rend le code plus compact. Voici le résultat :

.open > .dropdown-menu {
  display: block;
}
.open > a {
  outline: 0;
}

On a vu plus haut que pour les pseudo-classes, on peut utiliser le signe&, comme par exemple ici dans le fichierpagination.less:

.pagination {
  ...
  > li > a,
  > li > span {
    &:hover,
    &:focus {
      color: @pagination-hover-color;
      background-color: @pagination-hover-bg;
      border-color: @pagination-hover-border;
    }
  }

On trouve ce résultat :

.pagination > li > a:hover,
.pagination > li > span:hover,
.pagination > li > a:focus,
.pagination > li > span:focus {
  background-color: #eeeeee;
}

Opérations

On peut aussi effectuer des opérations comme ici dans le fichierforms.less:

legend {
  display: block;
  width: 100%;
  padding: 0;
  margin-bottom: @line-height-computed;
  font-size: (@font-size-base * 1.5);
  line-height: inherit;
  color: @legend-color;
  border: 0;
  border-bottom: 1px solid @legend-border-color;
}

Avec le résultat :

legend {
  display: block;
  width: 100%;
  padding: 0;
  margin-bottom: 20px;
  font-size: 21px;
  line-height: inherit;
  color: #333;
  border: 0;
  border-bottom: 1px solid #e5e5e5;
}

Comme on a une dimension de base de 14 pixels, le résultat 14 * 1.5 donne bien 21 pixels.

Fonctions

LESS possède des fonctions bien pratiques, regardez ce code :

@brand-primary:         #428bca;
   ...
@link-color:            @brand-primary;
@link-hover-color:      darken(@link-color, 15%);

On utilise la fonction intégréedarken, qui assombrit la couleur du pourcentage indiqué. Ici la valeur de la couleur est issue d'une variable, dont la valeur est elle-même issue d'une autre variable ! Au final, on assombrit de 15% la couleur#428bca. On trouve aussi la fonction opposéelighten:

@gray-dark:              lighten(#000, 20%);   // #333

Ici, on éclaircit le noir#000de 20%, ce qui donne#333. On trouve d'autres fonctions classiques commeceil, qui retourne l'entier immédiatement supérieur à une valeur :

@font-size-base:          14px;
@font-size-large:         ceil(@font-size-base * 1.25); // ~18px

Le résultat de14 * 1.25est17.5, l'arrondi par excès donne bien18. On trouve la fonctionfloorpour l'arrondi par défaut, ainsi que bien d'autres fonctions que vous pouvez découvrir dans la documentation.

Un exemple synthétique

Pour illustrer les possibilités et l'élégance de LESS je vais prendre un exemple qui regroupe la plupart de ses possibilités en l'analysant. Vous trouvez dans le fichierjumbotron.lessce code :

.jumbotron {
  padding: @jumbotron-padding (@jumbotron-padding / 2);
  margin-bottom: @jumbotron-padding;
  color: @jumbotron-color;
  background-color: @jumbotron-bg;

  h1,
  .h1 {
    color: @jumbotron-heading-color;
  }
  p {
    margin-bottom: (@jumbotron-padding / 2);
    font-size: @jumbotron-font-size;
    font-weight: 200;
  }

  > hr {
    border-top-color: darken(@jumbotron-bg, 10%);
  }

  .container &,
  .container-fluid & {
    border-radius: @border-radius-large; // Only round corners at higher resolutions if contained in a container
  }

  .container {
    max-width: 100%;
  }

  @media screen and (min-width: @screen-sm-min) {
    padding: (@jumbotron-padding * 1.6) 0;

    .container &,
    .container-fluid & {
      padding-left:  (@jumbotron-padding * 2);
      padding-right: (@jumbotron-padding * 2);
    }

    h1,
    .h1 {
      font-size: (@font-size-base * 4.5);
    }
  }
}

Considérons ces instructions pas à pas.

Les propriétés directes

Il y a d'abord un premier groupe de propriétés :

padding: @jumbotron-padding (@jumbotron-padding / 2);
margin-bottom: @jumbotron-padding;
color: @jumbotron-color;
background-color: @jumbotron-bg;

Les valeurs sont renseignées au moyen de variables. On peut trouver leurs valeurs dans le fichiervariables.less) :

@jumbotron-padding:              30px;
@jumbotron-color:                inherit;
@jumbotron-bg:                   @gray-lighter;

Il faut chercher encore un peu dans le même fichier pour obtenir la valeur pour la couleur de fond :

@gray-lighter:           lighten(#000, 93.5%); // #eee

Après compilation on trouve les valeurs suivantes :

.jumbotron {
  padding: 30px 15px;
  margin-bottom: 30px;
  color: inherit;
  background-color: #eee;
}
Les sélecteurs emboîtés

On trouve ensuite des sélecteurs emboîtés :

h1,
.h1 {
  color: @jumbotron-heading-color;
}
p {
  margin-bottom: (@jumbotron-padding / 2);
  font-size: @jumbotron-font-size;
  font-weight: 200;
}

Dans les blocs de ces sélecteurs, on a une propriété directe pourfont-weight, et les autres dont la valeur est issue d'une variable et même d'un calcul pourmargin-bottom. Il faut à nouveau regarder dans le fichier des variable pour trouver les valeurs :

@jumbotron-padding:              30px;
@jumbotron-color:                inherit;
@jumbotron-font-size:            ceil((@font-size-base * 1.5));

On voit que la dimension du texte est dépendante de la dimension de base pour la page, ce qui est très logique. Le résultat après compilation :

.jumbotron h1,
.jumbotron .h1 {
  color: inherit;
}
.jumbotron p {
  margin-bottom: 15px;
  font-size: 21px;
  font-weight: 200;
}
Classe emboîtée

On trouve ensuite une classe emboîtée :

.container &,
.container-fluid & {
  border-radius: @border-radius-large; // Only round corners at higher resolutions if contained in a container
}

Remarquez l'utilisation de l'opérateur de concaténation&. On veut donc associer dans le sélecteur les classes container etcontainer-fluid avec la classejumbotron.

La variable @border-radius-large se trouve évidemment dansvariables.less  :

@border-radius-large:       6px;

On retrouve donc logiquement ce résultat :

.container .jumbotron,
.container-fluid .jumbotron {
  border-radius: 6px;
}
Medias Queries

On trouve enfin un bloc qui concerne les Medias Queries :

@media screen and (min-width: @screen-sm-min) {
  padding: (@jumbotron-padding * 1.6) 0;

  .container &,
  .container-fluid & {
    padding-left:  (@jumbotron-padding * 2);
    padding-right: (@jumbotron-padding * 2);
  }

  h1,
  .h1 {
    font-size: (@font-size-base * 4.5);
  }
}

À l'intérieur de ce bloc, on a le même genre d'organisation que celle nous avons vu précédemment avec des propriétés directement renseignées, un sélecteur et une classe emboîtés. Le résultat à la compilation donne :

@media screen and (min-width: 768px) {
  .jumbotron {
    padding: 48px 0;
  }
  .container .jumbotron,
  .container-fluid .jumbotron {
    padding-right: 60px;
    padding-left: 60px;
  }
  .jumbotron h1,
  .jumbotron .h1 {
    font-size: 63px;
  }
}

Il y aurait encore beaucoup à dire sur LESS, je vous laisse le découvrir dans la documentation du site qui est très bien faite.

Utilisation de LESS dans Bootstrap

Un programme pour LESS

Vous pouvez modifier Bootstrap en modifiant les variables et en compilant avec les outils proposés… Je vous propose d'utiliser un programme très bien fait : Crunch. Au moment où j'écris ce cours, j'ai trouvé la version 1.9.3. L'avantage de ce programme est qu'il fonctionne sur tous les systèmes d'exploitation.

Le programme est simple et efficace, vous pouvez créer ou modifier des fichiers LESS et les compiler en CSS. Sur le site de Bootstrap, il est précisé qu'ils utilisent Grunt, et rien ne vous empêche de faire la même chose.

Exemple simple de configuration

Nous allons reprendre la configuration effectuée dans un chapitre précédent à partir de l'interface simplifiée de Bootstrap, mais cette fois en intervenant directement dans les fichiers LESS. Voici la procédure avec Crunch :

  1. Rapatrier tous les fichiers LESS de la dernière version de Bootstrap et les mettre dans un répertoire local.

  2. Lancer Crunch et ouvrir le fichiervariables.less

  3. Modifier les variables concernées dans le fichiervariables.less(voir figure suivante).

  4. Enregistrer la nouvelle version du fichiervariables.less

  5. Ouvrir le fichierbootstrap.less

  6. Pour être cohérent avec notre précédente configuration, nous devons supprimer les éléments inutiles

  7. Compiler le fichierbootstrap.less

  8. Enregistrer le fichierbootstrap.cssgénéré par Crunch

  9. Renommer le fichierbootstrap.cssenbootstrap.min.v1_2.css.

  10. Modifier le lien des styles dans la page web

  11. Supprimer les styles devenus inutiles dans la page web

Changement de valeurs dans le fichier variables.less
Changement de valeurs dans le fichier variables.less
body {
/*        background-color:#bbb;
  color:#048;  */    
  font-size: 12px;
  line-height: 16px;
}
a { 
  color: #028; 
}
footer { 
  text-align:center; 
}
nav {
  background-color:#bcd;
  border-radius: 8px;
  padding: 0 !important;
  border: 1px solid #ddd;
}
section { 
  padding-right: 0 !important; 
}
.panel {
  background-color: #bcd;
  border-radius: 8px;
  padding-bottom: 5px;
}
h1 {
  text-shadow: 4px 4px 5px #777;
  color: #449;
}
.nav > li > a:hover, .nav > li > a:focus {
  background-color: #cde; 
}
.panel-default > .panel-heading, .nav-pills > li.active > a, .nav-pills > li.active > a:hover, .nav-pills > li.active > a:focus {
  color: #048;
  background-color: #abc;
  border-radius: 8px;
}

On obtient alors la même présentation que précédemment, comme le montre la figure suivante.

Apparence obtenue
Apparence obtenue

Tester

Réflexions sur la configuration de Bootstrap avec LESS

Nous avons vu la procédure à employer avec Crunch. Les seuls fichiers qui ont été modifiés sontbootstrap.lessetvariables.less. Ce dernier fichier contient un certain nombre de variables qui influent sur la présentation générale et sur les composants. Pour notre exemple, j'ai pu changer les éléments suivants :

  • Couleur de fond de la page

  • Couleur du texte de la page

J'aurais pu également intervenir sur ceux-là :

  • Dimension des polices (et de façon automatisé la hauteur des lignes)

  • Couleur des liens

  • Couleur de fond des panneaux

Mais tout le reste correspond à des ajustements de la page qui ne rentrent pas dans le cadre du fichiervariable.less. On peut du coup se demander si le jeu en vaut la chandelle... Dans le cadre d'un site web ponctuel, la réponse est clairement "non". À quoi bon aller bidouiller les fichiers LESS pour économiser quelques lignes de code ? On pourrait aller plus loin et intervenir sur les autres fichiers pour effectuer tous les ajustements nécessaires. On arriverait de proche en proche à ajuster complètement Bootstrap pour notre site et ainsi n'avoir plus qu'un fichier CSS à charger. Cette conception se heurte à plusieurs inconvénients, dont le fait de ne pas pouvoir faire de mise à jour de Bootstrap sans refaire toutes nos interventions. Envisageons donc une autre approche...

Puisque nous disposons de LESS, autant l'utiliser aussi pour nos styles complémentaires. Créons un fichiermain.lessavec nos styles dans le dossier qui contient tous les fichiers LESS.

body {
  background-color:#bbb;
  color:#048;   
  font-size: 12px;
  line-height: 16px;
}
a { 
  color: #028; 
}
footer { 
  text-align:center; 
}
nav {
  background-color:#bcd;
  border-radius: 8px;
  padding: 0 !important;
  border: 1px solid #ddd;
}
section { 
  padding-right: 0 !important; 
}
.panel {
  background-color: #bcd;
  border-radius: 8px;
  padding-bottom: 5px;
}
h1 {
  text-shadow: 4px 4px 5px #777;
  color: #449;
}
.nav > li > a:hover, .nav > li > a:focus {
  background-color: #cde; 
}
.panel-default > .panel-heading, .nav-pills > li.active > a, .nav-pills > li.active > a:hover, .nav-pills > li.active > a:focus {
  color: #048;
  background-color: #abc;
  border-radius: 8px;
}

Une fois ce fichier créé, il faut informer le fichierbootstrap.lessqu'il doit en tenir compte (voir figure suivante).

Importation des styles de la page

Il suffit ensuite de compiler tout ça ; on obtient un fichier minifié de Bootstrap qui contient toutes les règles. On se retrouve donc avec un seul appel de fichier CSS (on peut supprimer le style inclus dans la page) pour un résultat identique pour notre page d'exemple :

Tester

Le résultat est très « propre », avec un seul fichier CSS à charger et aucune règle de style dans la page. D'autre part, s'il y a une mise à jour à faire, il suffit de recompiler.

Plus loin dans la réflexion

La solution de greffer les règles en fin de chargement pour surcharger celles des fichiers LESS fonctionne très bien lorsque peu de règles sont concernées. Par contre si on veut remanier beaucoup d'éléments il faut adopter une autre stratégie. Après plusieurs essais j'en suis arrivé à l'organisation suivante (voir figure suivante). 

Organisation des fichiers LESS

Le sous-dossier less/less contient les fichiers originaux de Bootstrap qui resteront inchangés. Le fichier _bootstrap.less est une copie du fichier originalbootstrap.less  (je le débute par un caractère de soulignement pour qu'il reste le premier de la liste). C'est lui qui va servir de référence. Comme les importations qu'il contient changent de chemin il faut ajuster celles-ci. En voici un extrait :

// Reset and dependencies
@import "less/normalize.less";
@import "less/print.less";
@import "less/glyphicons.less";

Maintenant une compilation à partir de ce fichier va fonctionner. Pour fixer les règles particulières on va s'organiser en suivant la logique des fichiers fournis. On aura évidemment le fichier des variables :

Le fichier des variables

Celui-ci va remplacer le fichier original, donc il faut en tenir compte dans les importations du fichierbootstrap.less :

// Core variables and mixins
//@import "less/variables.less";
@import "variables.less";
@import "less/mixins.less";

Dans la cas de notre page on va changer un certain nombre de ces variables :

@brand-primary:         #abc;
...
@body-bg:               #bbb;
...
@text-color:            #048;
...
@link-color:            #028;
...
@font-size-base:        12px;
...
@nav-link-hover-bg:     #cde;
...
@panel-bg:              #bcd;

Lorsqu'on a épuisé les possibilités de ces variables il faut traiter les composants un par un. Par exemple pour le type :

//
// Type
// --------------------------------------------------

h1 {
  text-shadow: 4px 4px 5px #777;
  color: #449;
  font-size: 36px;
}

On fixe des règles pour la baliseh1 qui constitue le titre de la page. Comme cette règle va surcharger celles qui sont dans le fichierless/less/type.less on doit renseigner correctement le fichier_bootstrap.less :

// Core CSS
@import "less/type.less";
@import "type.less";

Nos règles particulières viendront donc bien surcharger les règles générales.

On procède de même pour la navigation avec le fichiernavs.less :

//
// Navs
// --------------------------------------------------

nav {
  background-color:#bcd;
  border-radius: 8px;
  padding: 0 !important;
  border: 1px solid #ddd;
}

.nav-pills > li.active > a, .nav-pills > li.active > a:hover, .nav-pills > li.active > a:focus {
  color: #048;
}

Et pour les panneaux avecpanels.less :

//
// Panels
// --------------------------------------------------

.panel {
  border-radius: 8px;
}

.panel-default > .panel-heading, .nav-pills > li.active > a, .nav-pills > li.active > a:hover, .nav-pills > li.active > a:focus {
  color: #048;
  background-color: #abc;
  border-radius: 8px;
}

Et dans_bootstrap.less :

...
@import "less/navs.less";
@import "navs.less";
...
@import "less/panels.less";
@import "panels.less";
...

Il ne reste plus qu'à placer les règles générales dans le fichiermain.less :

section { 
  padding-right: 0 !important; 
}

footer { 
  text-align:center; 
}

En continuant à informer le fichier_bootstrap.less :

// Divers
@import "main.less";

En compilant tout ça on obtient le même résultat que précédemment mais cette fois on a bien organisé le code et on conserve intacts les fichiers d'origine, ce qui simplifiera les mises à jour.

Les mixins

La grille avec les mixins

Il existe un fichier très intéressant, c'estmixins.less, qui contient des importations de tous les mixins placés dans le dossierless/mixins (j'ai parlé dans un chapitre précédent de ces entités). Pour comprendre leur utilité il faut se poser une petite question. On place les classes de Bootstrap directement dans le code HTML. En agissant ainsi, on rend le code très dépendant de Bootstrap. D'autre part, cette façon de procéder s'éloigne du principe de base qui consiste à bien séparer le contenu de la forme. Lorsque j'écris ce code dans mon exemple :

<div class="row col-sm-12">
  <nav class="col-sm-2">   ...  </nav>
  <section class="col-sm-10">   ...  </section>
</div>

Je dis clairement que je veux une rangée avec deux colonnes en indiquant la proportion de chacune d'elles. Si je n'utilisais pas Bootstrap, ce serait uniquement mes styles qui décideraient de cela. D'autre part, si je veux changer de framework un jour, je dois intervenir au niveau de mon code HTML. Nous allons voir comment créer une grille en utilisant uniquement LESS. Regardez ces parties du fichiermixins/grid.less:

// Creates a wrapper for a series of columns
.make-row(@gutter: @grid-gutter-width) {
  margin-left:  (@gutter / -2);
  margin-right: (@gutter / -2);
  &:extend(.clearfix all);
}
...
// Generate the small columns
.make-sm-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  min-height: 1px;
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  @media (min-width: @screen-sm) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

On trouve deux mixins paramétrés intéressants pour notre exemple :make-row()etmake-sm-column(). On va utiliser ces mixins dans notre exemple en modifiant le code HTML :

<!DOCTYPE HTML>
<html>

  <head>
    <meta charset="utf-8">
    <link href="assets/css/bootstrap.min.v1_4.css" rel="stylesheet">
  </head>

  <body>
    <div class="container">
      <header>
        <div class="page-header">
          <h1>Mon beau site<img src="images/papillon.png" class="pull-right"></h1>
        </div>
      </header>
      <div class="contenu">
        <nav>          
          <ul class="nav nav-pills nav-stacked">
            <li class="active"> <a href="#"> <span class="glyphicon glyphicon-home"></span>&nbsp; Accueil </a> </li>
            <li> <a href="#"> <span class="glyphicon glyphicon-book"></span>&nbsp; Livres </a> </li>
            <li> <a href="#"> <span class="glyphicon glyphicon-facetime-video"></span>&nbsp; Films </a> </li>
            <li> <a href="#"> <span class="glyphicon glyphicon-headphones"></span>&nbsp; Musiques </a> </li>
          </ul>
        </nav>
        <!-- <div class="clearfix visible-xs"></div> -->
        <section>
          <div class="panel panel-default">
            <div class="panel-heading">
              <h3 class="panel-title">Bienvenue sur mon site !</h3>
            </div>
            <div class="panel-body">
              <p>"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, 
eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas 
sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, 
qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore 
magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut 
aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, 
vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"</p>
              <p>"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, 
eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia 
voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro 
quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut 
labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit 
laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam 
nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"</p>
              <p>"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, 
eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia 
voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro 
quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut 
labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit 
laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam 
nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"</p>
            </div>
          </div>
        </section>
      </div>
      <footer>
        <div class="panel panel-body">
          <p>Tous droits réservés par moi...</p>
        </div>
      </footer>
    </div>
  </body>

</html>

J'ai supprimé les classesrow,col-sm-2,col-sm-10etcol-sm-12et juste ajouté la classecontenu. Mon code est maintenant plus "propre", mais je dois mettre à jour mon fichiermain.less:

.contenu, header, footer {
  .make-row();
  .make-sm-column(12);
}

nav {
    .make-sm-column(2);
}

section { 
  padding-right: 0 !important; 
  .make-sm-column(10);
}

footer { 
  text-align:center; 
}

Tester

Ce n'est qu'un petit exemple des possibilités des mixins et je vous conseille d'explorer les possibilités de ces fichiers.

Les images "Retina"

Prenons un autre exemple de l'utilité des mixins avec le problème des images dites "Retina". Ce terme a été créé par Apple pour désigner les écrans ayant une résolution très élevée (320 dpi pour les IPhone 4 et 5). Sous Android, on parle de HDPI. Quel que soit le terme utilisé, le problème est le même. Mais quel est-il ? Si vous avez par exemple une image de 100 x 100 px, celle-ci va bien s'afficher sur un écran avec une résolution standard. En revanche, avec un écran haute résolution, l'image va être étirée et ne va plus être aussi jolie. Est-ce à cause de la résolution de l'écran ? Pas complètement. C'est surtout parce que l'appareil ne semble pas au courant de la résolution dont il dispose. Par exemple, un iPhone 4 avec une résolution de 320 dpi et une largeur d'écran de 640 px pense disposer seulement de 320 px. Du coup notre image de 100 px de côté va apparaître floue. La solution est donc de régler le pixel-ratio (le rapport entre les pixels physiques et les pixels déclarés). Voici le mixin proposé par Bootstrap pour régler ce problème :

.img-retina(@file-1x; @file-2x; @width-1x; @height-1x) {
  background-image: url("@{file-1x}");

  @media
  only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (   min--moz-device-pixel-ratio: 2),
  only screen and (     -o-min-device-pixel-ratio: 2/1),
  only screen and (        min-device-pixel-ratio: 2),
  only screen and (                min-resolution: 192dpi),
  only screen and (                min-resolution: 2dppx) {
    background-image: url("@{file-2x}");
    background-size: @width-1x @height-1x;
  }
}

On constate qu'on joue effectivement sur le pixel-ratio. Pour utiliser ce mixin, il faut renseigner les paramètres :

  • Image de dimension de base (par exemple 100px * 100px)

  • Image de double dimension de base (200px * 200px)

  • Largeur de base en pixels

  • Hauteur de base en pixels

Concrètement, on va écrire cette règle :

.img-retina("image_de_base.jpg", "image_double.jpg", 100px, 100px);

Et les règles de styles seront automatiquement générées pour nous !

Utilisation dynamique de LESS

Dans l'exemple précédent, nous avons compilé un fichier CSS avec Crunch pour ensuite le mettre dans le site. Il existe une façon dynamique d'utiliser LESS qui consiste à référencer directement le fichier source, et de prévoir également un fichier Javascript pour l'interpréter à l'arrivée. C'est une méthode plus lourde côté client qui ne me paraît pas vraiment adaptée en mode production, mais c'est celle qui est préconisée sur le site de référence. Elle peut toutefois trouver sa justification en phase de développement pour tester rapidement de nouveaux réglages.

Reprenons notre exemple de page cette fois avec cette procédure. Voici la différence au niveau de l'en-tête :

<link rel="stylesheet/less" href="less/_bootstrap.less">
<script src="assets/js/less.min.js"></script>

Évidemment, cela ne marche que si vous mettez bien tous les fichiers LESS nécessaires sur le serveur. Vous constaterez un temps de chargement relativement long. Mais ensuite, il suffit de changer un élément dans un fichier LESS pour obtenir le résultat. Par exemple si je change la couleur de fond dans le fichiervariables.less, il suffit de recharger la page pour voir le résultat immédiatement. Un autre élément à prendre en compte aussi est le chemin vers les icônes qu'il faut ajuster en conséquence.

Un thème pour Bootstrap

Le thème optionnel

La version 3 de Bootstrap est livrée avec un thème optionnel. Voyons ce que nous propose ce thème décrit comme devant améliorer notre « expérience visuelle ». Pour cela, on va le tester sur notre page d'exemple, il suffit de référencer le fichier :

<link href="assets/css/bootstrap.css" rel="stylesheet">
<link href="assets/css/bootstrap-theme.min.css" rel="stylesheet">

Tester

Pour se rendre compte des différences, la figure suivante représente les 2 versions de la barre de navigation.

Barre sans effet et barre avec thème de Bootstrap
Barre sans effet et barre avec thème de Bootstrap

On se rend facilement compte que la barre originelle est « plate », alors que la nouvelle a du relief. L'effet est obtenu grâce à un dégradé. Si on regarde dans le code, on trouve effectivement une déclaration de dégradé :

.navbar-inverse {
  background-image: -webkit-linear-gradient(top, #3c3c3c 0%, #222 100%);
  background-image:      -o-linear-gradient(top, #3c3c3c 0%, #222 100%);
  background-image: -webkit-gradient(linear, left top, left bottom, from(#3c3c3c), to(#222));
  background-image:         linear-gradient(to bottom, #3c3c3c 0%, #222 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff3c3c3c', endColorstr='#ff222222', GradientType=0);
  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
  background-repeat: repeat-x;
}

Il en est de même pour le bouton :

.btn-primary {
  background-image: -webkit-linear-gradient(top, #337ab7 0%, #265a88 100%);
  background-image:      -o-linear-gradient(top, #337ab7 0%, #265a88 100%);
  background-image: -webkit-gradient(linear, left top, left bottom, from(#337ab7), to(#265a88));
  background-image:         linear-gradient(to bottom, #337ab7 0%, #265a88 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7', endColorstr='#ff265a88', GradientType=0);
  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
  background-repeat: repeat-x;
  border-color: #245580;
}

On retrouve cet effet de dégradé dans les alertes, les barres de progression, les panneaux… Il est prévu également des ombrages. Vous pouvez voir tous ces effets sur la page d'exemple du site de Bootstrap. On peut se demander pourquoi ces effets ne font pas partie de fichier de base de Bootstrap. La réponse se situe au niveau des performances. Il a été choisi d'éviter les effets trop gourmands en ressources.

D'autres thèmes

On peut trouver des thèmes intéressants et gratuits sur le site Bootswatch. Voyons à la figure suivante ce que donne le thème Cyborg sur notre page d'exemple.

Effet du thème Cyborg sur la page d'exemple

Tester

Ce n'est pas mal, dans un genre différent voici le thème Journal visible à la figure suivante.

Effet du thème Journal sur la page d'exemple

Tester

Composer son thème

Vous pouvez évidemment composer votre thème personnalisé. Ce n'est pas facile, il faut bien comprendre l'organisation des variables LESS, il faut aussi trouver un bon équilibre de couleurs. Il existe des sites comme Boostrap Magic qui facilitent ce paramétrage. Les variables y sont mieux organisées que dans la page de personnalisation de Bootstrap. Vous pouvez aussi aller directement jouer sur les valeurs dans le fichiervariables.less. Nous allons voir un exemple simple de ce qu'il est possible d'obtenir. Admettons que je désire un site de tonalité verte. Je vais donc changer les gris pour les teinter légèrement en vert :

@gray-darker:            lighten(#232, 13.5%); 
@gray-dark:              lighten(#232, 20%);  
@gray:                   lighten(#232, 33.5%);
@gray-light:             lighten(#232, 60%); 
@gray-lighter:           lighten(#232, 93.5%);

Je vais aussi modifier les 5 couleurs de base (Brand) pour les rendre plus adaptées à une tonalité verte :

@brand-primary:         #51c1d1;
@brand-success:         #5cb85c;
@brand-warning:         #f0ad4e;
@brand-danger:          #d9534f;
@brand-info:            #5bc0de;

Je vais ensuite choisir une nouvelle couleur de fond de page :

@body-bg:               #E0E4CC;

Je vais enfin modifier la couleur de bordure des thumbnails pour les rendre visibles :

@thumbnail-border:      #aca;

Pour tester tout ça je prends une version un peu adaptée de l'exemple de thème de Bootstrap. Le résultat sera dans ce genre :

Thème personnalisé
Thème personnalisé

Il ne s'agit évidemment ici que d'une modification sommaire de Bootstrap mais elle vous montre la démarche à adopter. Si vous avez du mal à composer une palette colorée pour vos pages, vous pouvez trouver des inspirations sur le site communautaire Colour Lover.

Intégration dans HTML5 Boilerplate

Les bonnes pratiques côté client sont légion et il est de plus en plus difficile de s'y retrouver. Une solution simple et rapide consiste à utiliser l'excellent framework HTML5 Boilerplate. C'est un ensemble de dossiers et fichiers pour démarrer un site (voir figure suivante).

Les dossiers et fichiers de H5BP
Les dossiers et fichiers de H5BP

On a ainsi tout ce qu'il faut pour construire un site avec :

  • des fichiers de base (index.html , page 404,.htaccess ...),

  • des dossiers pour bien tout ranger (css, js, img),

  • des fonctionnalités par défaut (normalize ,jquery ,modernizr ...)

Et surtout tout a été pensé avec le savoir faire de nombreux spécialistes. La question que l'on peut se poser est : comment profiter de cette architecture en intégrant Bootstrap ?

Les modifications sans lien avec Bootstrap

Le fichier .htaccess  est à évaluer en fonction de vos besoins et de toute façon n'interfère pas directement avec Bootstrap. Les fichiershuman.txt ,LICENSE.md ,README.md  sont aussi à adapter, sans interaction avec Bootstrap.

Les fichiers favicon.ico et apple-touch-icon-precomposed.png doivent aussi être changés pour s'adapter à votre site.

Les modifications en lien avec Bootstrap

Dossier css

Pour ce dossier il faut envisager plusieurs possibilités :

  • vous chargez le fichiers CSS de Bootstrap avec un CDN mais vous avez quelques règles spécifiques, vous pouvez les mettres dans le fichier main.css,

  • vous chargez le fichier CSS de Bootstrap placé sur votre serveur parce que c'est une version modifiée (par exemple avec LESS), là vous pouvez encore mettre le code correspondant dans le fichiermain.css,

  • vous chargez le fichier CSS de Bootstrap placé sur votre serveur dans sa version originale, vous pouvez mettre ce fichier directement en lui laissant son nom de base, mais alors il faut modifier le lien dansindex.html.

Le code du fichier normalize.css est déjà intégré dans Boostrap, on peut donc le supprimer ainsi que sa référence dans index.html .

Dossier js

Pour les fichiers javascript il faut comprendre comment est organisé H5BP (voir figure suivante).

Les fichiers javascript dans H5BP
Les fichiers javascript dans H5BP

On dispose de deux fichiers à la racine :

  1. main.js est vide au départ, c'est ici qu'il est prévu de placer le code spécifique,

  2. plugin.js comporte un peu de code et est destiné à recevoir tous les plugins.

La solution la plus simple est de copier le code de du fichierbootstrap.min.js à la suite du code présent dansplugin.js.

Le dossiervendor est destiné à recevoir les librairies. Comme nous avons besoin de jquery pour les plugins de Bootstrap on va le conserver. Si vous regardez dans le fichierindex.html vous verrez une stratégie intelligente qui consiste à tenter de charger jquery avec un CDN et, si ça ne fonctionne pas, de se rabattre sur le fichier dans ce dossier :

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.10.2.min.js"><\/script>')</script>

Le fichiermodernizer est destiné à créer le balisage CSS3 pour les navigateurs qui n'en sont pas pourvus, il vise essentiellement IE8. Les créateurs de Bootstrap on préféré faire appel àhtml5shiv etrespond.js, on peut donc supprimer ce fichier.

Les fichiers des icônes

Il faut placer les fichiers des icônes de Bootstrap dans le dossierfonts.

Le fichier index.html 

Que changer dans le fichierindex.html ? Prévoir un titre, compléter les balises meta. Il faut ensuite ajouter le code pour IE8 :

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->

Il faut aussi adapter le chargement des fichiers CSS selon la situation (on garde le fichiermain.css ou on le supprime), et il faut supprimer le chargement demodernizr

Et normalement tout devrait fonctionner !

En résumé

  • On peut générer une version personnalisée de Bootstrap à partir de l'interface proposée en ligne en modifiant des paramètres.

  • Bootstrap utilise LESS, un langage qui simplifie et organise l'écriture des fichiers CSS. On peut créer une version adaptée de Bootstrap en modifiant directement les fichiers LESS.

  • Bootstrap propose un thème optionnel. Il est aussi possible de créer son propre thème.

  • Il est facile d'intégrer Bootstrap dans le framework HTML5 Boilerplate.

Voilà, vous êtes arrivés au bout de ce cours. :) Je suis conscient de n'avoir pas épuisé le sujet. D'autre part ce framework est appelé à évoluer rapidement et je m'efforcerai de maintenir mon cours à jours.

J'espère que ce cours vous aura permis de découvrir ce framework et donné envie de l'utiliser ;)

Exemple de certificat de réussite
Exemple de certificat de réussite