Zoom sur Bootstrap, le framework CSS créé par Twitter

icone article bootstrap

Positionner et styliser chaque élément d'un site web en CSS, tout en assurant la compatibilité entre les navigateurs demande beaucoup de temps. De plus, le webdesigner est régulièrement confronté aux mêmes problématiques à travers ses projets. Au lieu de réécrire sans arrêt les mêmes bouts de code, le framework CSS propose des feuilles de styles contenant les styles les plus courants. Il évite ainsi de réinventer la roue et raccourcit le temps de développement du site. Les frameworks CSS ne présentent cependant pas que des avantages. Ils sont parfois difficiles à maitriser et alourdissent le code.

Parmi les nombreux frameworks CSS existant, Boostrap mérite une attention particulière. Créé par Twitter en août 2011 pour harmoniser le code produit par ses différents programmeurs, c'est un excellent framework combinant HTML, CSS et plugins JavaScript. Il est gratuit et publié sous licence Apache 2.0.

Boostrap est téléchargeable à cette adresse. Il n'est ni plus ni moins qu'un fichier zip contenant images (des icones), fichiers CSS et fichiers JavaScript.

Exemple d'utilisation de Bootstrap 2.1

Intégration de Bootstrap

Pour commencer à utiliser Boostrap, il faut simplement inclure dans la page HTML les fichiers CSS et JavaScript de Bootstrap, ainsi que la librairie JQuery. Pour cela, incorporez dans la balise <head> le code <link href="css/bootstrap.min.css" rel="stylesheet">, puis dans la balise <body>, le code :

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="js/bootstrap.min.js"></script>

Définition du layout

Si vous souhaitez une largeur de page fixe (Bootstrap propose par défaut 940 pixels), vous devez utiliser une balise div avec une classe "container" : <div class="container">. Si vous préférez une largeur de page relative, utilisez une balise div avec la classe "container-fluid" : <div class="container-fluid">

Le système de Grid

Le système de grille permet de structurer la page et son contenu, en la découpant en colonnes verticales et horizontales séparées de marges. Ces colonnes servent de repère visuels pour positionner le contenu (images, textes,...) de façon harmonieuse. Par défaut, Bootstrap utilise 12 colonnes.

Si nous souhaitons par exemple 3 zones de contenu, nous allons utiliser une balise div avec la classe "row" ("row-fluid" pour une largeur relative). À l'intérieur, nous allons créer autant de balises div que de zones souhaitées. Ces dernières auront la classe "span" suivie du nombre de colonnes utilisées. Ainsi, une zone de contenu utilisant 4 colonnes devra avoir comme classe "span4". Attention à ce que le nombre de colonnes ne dépasse pas 12 au sein d'une même grille (sauf si vous avez changé cette valeur par défaut). Voici le résultat :

<div class="row">
<div class="span6">
<p>Ce texte est contenu dans 6 colonnes. Ce texte est contenu dans 6 colonnes. Ce texte est contenu
dans 6 colonnes. Ce texte est contenu dans 6 colonnes.</p>
</div>
<div class="span2">
<p>Ce texte est contenu dans 2 colonnes. Ce texte est contenu dans 2 colonnes. Ce texte est contenu
dans 2 colonnes. Ce texte est contenu dans 2 colonnes.</p>
</div>
<div class="span4">
<p>Ce texte est contenu dans 4 colonnes. Ce texte est contenu dans 4 colonnes. Ce texte est contenu
dans 4 colonnes. Ce texte est contenu dans 4 colonnes.</p>
</div>
</div>

Ci-dessus, nous avons 3 zones de contenu remplies de texte. La première utilise 6 colonnes, la seconde 2 et la troisième 4. Les 12 colonnes de notre grille sont donc bien utilisées. Le résultat est le suivant :

Bien sûr, il est possible d'ajouter de nouvelles grilles et même de les imbriquer. Nous allons ajouter deux nouvelles zones de contenu, dont une contenant une image.

<div class="row">
<div class="span4"><img src="img/image.jpg"></div>
<div class="span8">
<p>Ce texte est contenu dans 8 colonnes. Ce texte est contenu dans 8 colonnes. Ce texte est contenu
dans 8 colonnes. Ce texte est contenu dans 8 colonnes.</p>
</div>
</div>

Ajouts de composants et d'effets JavaScript

L'excellente documentation de Bootstrap permet d'ajouter facilement des composants et des effets. Il n'y a plus qu'à copier et adapter le code correspondant à ce que l'on souhaite ajouter.

Voici par exemple quelques composants que l'on peut ajouter : menu, tableau, formulaire, bouton, icône, typographie, pagination, boite d'alerte, fil d'ariane, barre de progression, ... Les effets JavaScript que l'on peut ajouter sont eux aussi nombreux : menu déroulant, carrousel, effets pour formulaires (dont l'auto-complétion), effets pour boutons et alertes, effets accordéon, ...

Reprenons notre exemple et ajoutons-y une barre de menu avec une zone de connexion. Nous ajoutons le code suivant :

<div class="navbar">
<div class="navbar-inner">
<a class="brand" href="#">StrategieWeb.fr</a>
<ul class="nav">
<li class="active"><a href="#">Accueil</a></li>
<li><a href="#">Lien de menu 1</a></li>
<li><a href="#">Lien de menu 2</a></li>
</ul>

<form class="form-inline" id="formconnexion">
<input type="text" class="input-small" placeholder="Email">
<input type="password" class="input-small" placeholder="Password">
<button type="submit" class="btn">Se connecter</button>
</form>
</div>
</div>

Afin que la barre de connexion se positionne à droite dans la barre de menu, nous ajoutons dans le CSS #formconnexion {float: right;}

Ajoutons un menu déroulant grâce à la fonction JavaScript Dropdown. Pour cela, nous reprenons le code HTML du "Lien de menu 1" et le transformons en :

<li class="dropdown">
<a class="dropdown-toggle" id="dLabel" role="button" data-toggle="dropdown" href="#">Lien de menu 1 <b
class="caret"></b></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<li><a href="#">Lien 1</a></li>
<li><a href="#">Lien 2</a></li>
<li class="divider"></li>
<li><a href="#">Lien 3</a></li>
<li><a href="#">Lien 4</a></li>
</ul>
</li>

A la fin du code source de la page HTML, nous incorporons le code JavaScript suivant :

<script type="text/javascript">
$(document).ready(function () {
$('.dropdown-toggle').dropdown();
});
</script>

Nous obtenons un menu déroulant stylisé.

Terminons notre exemple d'utilisation de Bootstrap avec l'ajout d'un formulaire, grâce au code suivant :

<form class="well form-horizontal">

<div class="control-group">
<label class="control-label" for="pseudo">Votre pseudo</label>
<div class="controls">
<input type="text" id="pseudo" name="pseudo" placeholder="Votre pseudo…">
</div>
</div>

<div class="control-group">
<label class="control-label">Votre age : </label>
<div class="controls">
<select id="age">
<option value="1">- de 18 ans</option>
<option value="2">de 18 à 25 ans</option>
<option value="3">de 25 à 40 ans</option>
<option value="4">de 40 à 65 ans</option>
<option value="5">+ de 65 ans</option>
</select>
</div>
</div>

<div class="control-group">
<label class="control-label" for="commentaire">Votre commentaire</label>
<div class="controls">
<textarea rows="4" name="commentaire" id="commentaire"></textarea>
</div>
</div>

<div class="form-actions">
<button type="submit" class="btn btn-primary">Envoyer</button>
</div>

</form>

Nous obtenons un formulaire avec une mise en forme agréable.

Bien entendu, un travail de personnalisation du CSS s'impose. Un framework CSS n'a pas pour but de fournir un design tout fait (sinon, tout le monde aurait le même), mais simplement de fournir des éléments de base. Ces éléments, de qualité et respectueux des standards, peuvent ensuite être personnalisés par le webdesigner afin de répondre aux exigences graphiques d'un projet précis.