DBM Web Design

Réaliser une interface avec Bootstrap de Twitter

Découvrez comment il est possible de réaliser une interface Web de manière simple et la rendre compatible avec les différents types de support mobiles en utilisant Bootstrap de Twitter, qui repose sur un système de grille.

Son avantage est qu'il permet également un gain de temps énorme en proposant des fondations prédéfinies pour vos projets, une normalisation de votre code en respectant les standards et des éléments graphiques loin d'etre négligeables. En plus de tout ceci, et c'est là l'objet de ce tutoriel, Bootstrap permet de faire rapidement et efficacement des structures de sites en Responsive Web Design, en d'autres termes de prendre en compte et d'adapter le contenu de votre site Web aux différents types d'appareils, mobiles ou non.
Afin de profiter pleinement de toutes le joies que peut proposer Bootstrap, il est préférable d'avoir déjà de bonnes connaissances en CSS et une approche plus ou moins familière de JQuery et LESS.

Voir la réalisation effectuée avec ce tuto

Découvrir Bootstrap de Twitter

Je vous conseille de récupérer la dernière version sur le site afin de profiter des mises à jour. Vous pourrez télecharger le package des fichiers CSS et Js, leurs versions minimisées et des images sprites correspondant à quelques icônes graphiques bien pratiques en cliquant sur le lien suivant :

Télécharger Bootstrap de Twitter

Afin de profiter pleinement des fonctionnalités JavaScript de Bootstrap, je vous invite également à télécharger la dernière version de la bibliothèque jQuery et à placer ce fichier .js dans le dossier JS du package Bootstrap. N'oubliez pas que la récupération de la bibliothèque JQuery s'effectue par copier-coller.

Télécharger JQuery

Décortiquer le framework

Pas besoin de sortir un scalpel pour faire un tour d'horizon de ce que nous propose Bootstrap : un système de mise en page fonctionnant avec une grille à douze colonnes, un reset CSS, un code basé sur HTML5 et CSS3, un produit toalement open-source, une bibliothèque de composant JQuery, une compatibilité entre les différents navigateurs, une extension LESS et une bonne fréquence d'évolution. Autant vous dire que meme s'il n'est pas le seul et que les concurrents se multiplient, c'est du lourd.

Définir la base de travail

Avant meme de procéder à l'installation de quoi que ce soit, il faut établir nos besoins. Pour ce tutoriel, j'ai choisi de créer une interface très simple qui présentera un carousel en JQuery, des images et quelques autres éléments tels que du contenu texte. L'objectif est de rendre cette page Web disponible et consultable avec n'importe quel type d'appareil, que ce soit un ordinateur de bureau, une tablette tactile ou un smartphone.

Installer Bootstrap

Je vous invite à créer un répertoire dans lequel vous allez démarrer votre projet. Placez y un répertoire "bootstrap" dans lequel vous allez glisser les sources téléchargées précédemment, à savoir les répertoires css, js et img de votre framework. A la racine de votre projet, donc au meme niveau que votre dossier "bootstrap", créez votre page, ici index.html, et insérez dedans les déclarations de base d'une page HTML5 ainsi que les liens vers les fichiers ressources du framework. Voici l'exemple de code :

Comprendre les grilles

La grille est un élément essentiel en Webdesign, elle vous permet d'organiser le contenu présent sur vos pages. Ainsi, grace à un système de colonnes, douze pour Bootstrap, vous obtiendrez une interface Web plus lisible en gérant l'espacement entre vos blocs de manières homogène. Votre page sera alors découpée en cellules de memes dimensions dans lesquelles vous pourrez placer vos éléments.
Deux classes sont à connaitre avec Bootstrap pour utiliser la grille, tout d'abord .row, qui représente une ligne, et .span, de .span 1 à .span12, pour définir le nombre de colonnes utilisées sur une meme ligne.

Créer votre menu

Vous l'aurez surement remarqué tout à l'heure lors de la création de la page HTML, nous avons placé entre les balises body une div avec une classe "container". Cette div va nous permettre de centrer le contenu de notre site. Etant donné que nous souhaitons, dans ce cas présent, centrer l'ensemble, nous placerons tout notre code dans cette div.
Commençons par le header. Bootstrap vous propose des classes permettant de générer des barres de navigation (cf. la bibliothèque de ressources présente sur la page Web de téléchargement), en voici une qui conviendra très bien pour notre exemple en responsive;

Définir les colonnes

Nous allons à présent illustrer ce que nous avons vu concernant la grille et ainsi diviser notre page en cellules. Celle-ci sera divisée en trois lignes de contenu, la première contiendra deux cellules, une de 7 et une de 5, soit un total de 12 colonnes.
La deuxième comprendra 3 cellules de 4 et la dernière une cellule de 12.
Pour mieux visualiser le résultat découlant de cette mise en place de structure, je vous laisse examiner cette démo affichant l'impact de cette intégration :

Voir la démo

Installer le slider

Le premier élément que nous allons intégrer dans nos cellules est un carousel au niveau de la cellule span7. Bootstrap propose une bibliothèque de plug-ins JQuery, raison pour laquelle je vous ai fait ajouter un appel à JQuery dès la définition de la structure de votre page HTML.
Pour ce faire, ajoutons simplement notre code à l'intérieure de la balise div correspondant à la cellule span7. Votre slider devrait apparaitre sous la barre de navigation en respectant bien la grille que nous avons mis en place.

Développer le contenu

Nous allons maintenant développer le contenu de notre page HTML. Sur la première ligne, nous avons déjà un slider qui remplit la première cellule. Nous placerons ensuite une image dans la deuxième (span5).
Sur notre deuxième ligne, npous allons ajouter trois colonne composée chacune d'un titre en h2 et d'un pargraphe à l'aide de la balise p. Enfin, la troisième ligne ne sera composée que d'un titre en h1 et de 2 paragraphes p.

Ajouter un menu déroulant

Notre page Web devrait à présent ressembler à quelque chose de potable. Mais intervenons maintenant sur la navbar du haut pour y ajouter un petit menu déroulant. Pour ce faire, il nous faut éditer notre liste nav et y ajouter un nouveau li avec pour classe "dropdown". Ensuite, rien de plus simple, nous y ajouterons le lien de notre menu déroulant et une sous-liste qui constituera l'ensemble des choix proposés par notre menu lorsque le visiteur aura cliqué dessus.

Placer un champ de recherche

Notre barre de navigation est quasiment complète mais je nous verrais bien y intégrer aussi un champ de recherche. Rien de plus simple, me direz vous, et en effet cela se fait par le biais d'une balise form avec la class navbar-search et d'un champ input. Veillez néanmoins à placer ce formulaire en dehors de votre liste de liens, vous constaterez qu'il est toujours aligné à gauche avec le reste. Ajoutons à présent la classe pull-right à notre balise form, vous verrez alors la propriété "float: right" s'appliquer. Il s'agit d'une classe proposée par Bootstrap, je vous suggère de bien lire la documentation car il en existe un grand nombre qui s'avèrent très utiles.

Créer le footer

Pour finaliser la composition de notre page Web, nous allons ajouter un footer. De la meme manière que pour la barre de navigation, Bootstrap propose des types de pieds de page prédéfinis. Rien de plus compliqué que ce que nous avons pu voir jusqu'à présent, il s'agit là d'ajouter une balise footer et d'y intégrer les éléments voulu.

Comprendre l'aspect Responsive

Nous ommes déjà à plus de la moitié de ce tuto et n'avons toujours pas parlé de Responsive Design. Pour l'instant, notre page n'est pas du tout adaptée aux appareils mobiles.
Ajoutez la ligne suivante entre les balises head :

Essayez ensuite de réduire votre fenetre et vous constaterez avec plaisir que votre template s'adapte à la résolution de votre fenetre de navigateur.
Bootstrap intègre les media queries qui permettent de rendre une page web consultable sur différents support. Ils permettent de cibler le type de média, l'écran, la résolution, etc.

Gérer l'affichage selon le type d'appareil

Bootstrap propose quelques classes très utiles qui sont justement basées sur les media queries. Nous allons en utiliser une en particulier sur notre page Web. Vous l'aurez constatez : sur mobile, tous les éléments sont réduits et superposés les uns sur les autres. Nous souhaitons cependant que l'image à droite du slider n'apparaisse pas sur les smartphones. Pour ce faire, il nous suffit d'ajouetr la classe hidden-phone à la div span5 correspondant à la cellule de l'image. Cela ordonnera au navigateur, par l'intermédiaire d'une media query, de cacher les éléments de votre div pour les résolutions inférieures à 768 pixels.

Voir le résultat final

Découvrir les composants proposés par Bootstrap

Nous en avons parlé à plusieurs reprises dans cet article, Bootstrap nous propose une librairie de composants qui sont pour la plupart des plug-ins JQuery.

Ceci s'avère vraiment très utile car ils vous donnent la possibilité d'intégrer une multitude d'effets et de fonctionnalités très sympas. La liste de ces composants et les documentations associées sont disponibles à cette url :

Composants Bootstrap

Comme vous l'avez remarquez tout à l'heure, nous avons intégré dans notre page un appel au fichier JS "bootstrap.min.js", et bien c'est grace à ce fichier JavaScript que nos composants peuvent fonctionner.

Personnaliser votre interface

Pour finir, il est important de savoir que Bootstrap peut etre entièrement personnalisé. Que ce soit pour les couleurs ou la mise en page, vous avez la possibilité d'éditer ses propriétés.
Cette personnalisation requiet néanmoins que vous vous y connaissiez un minimum en LESS CSS. La modification d'une variable dans les sources modifiera la valeur de cette variable pour les autres fichiers également.
Si vous souhaitez effectuer cette persnnalisation, il vous faudra télécharger les sources LESS sur Github et ne plus faire appel aux CSS utilisés dans ce tutoriel mais plutot aux fichiers LESS directement. Afin de vous permettre d'avoir en main un maximum d'informations, voici quelques liens utiles :

Télécharger les sources LESS

Documentation Bootstrap LESS

Site officiel de LESSCSS