Prenez en main bootstrap site du zero

Participez au vote ☆☆☆☆☆★★★★★

Aller au Téléchargement

Bootstrap de Twitter : un kit CSS et plus !

Par bestmomo

Licence Creative Commons 6 2.0

Dernière mise à jour le 12/10/2012

Sommaire

Sommaire . 2

Sommaire

Les pages modales . 112

Configurer Bootstrap .. 113

Configuration simplifiée . 113

Configurer en ligne sur le site de Bootstrap 113

Configurer en ligne sur le site Stylebootstrap . 115

Varier les styles . 115

Un générateur de thèmes . 118

Utilisation de LESS .. 118

C'est quoi LESS ? 119

Exemple simple de configuration 121

Utilisation dynamique de LESS . 125

Partie 4 : Bootstrap et son environnement .. 127

Le responsive design . 127

Présentation 127

Un exemple sans Bootstrap 128

Un exemple avec Bootstrap 136

Plugins et extensions . 142

Plugins .. 143

Bootstrap Image Gallery 143

Colorpicker and Datepicker for Twitter Bootstrap 147

Extensions 154

De jolis boutons . 154

Des icônes vectorielles . 157

Kickstrap .. 160 Intégration à divers environnements .. 162 jQuery UI Bootstrap . 162 jQuery-Mobile-Bootstrap-Theme .. 163 Django-bootstrap-toolkit 163

Thèmes pour Wordpress .. 163

Thème pour Joomla .. 164

Extension pour Typo 165

Extension pour Yii . 165

Un template pour Photoshop . 165

Une extension pour Fireworks 166

Une boîte à outils pour facebook .. 166

Sommaire

Par bestmomo

Mise à jour : 12/10/2012

Difficulté : Intermédiaire Durée d'étude : 20 jours

3 848 visites depuis 7 jours, classé 40/798

Vous créez des pages web et vous passez beaucoup de temps avec le CSS ?

Alors Bootstrap est fait pour vous et ce cours va vous guider dans la découverte de cette puissante boîte à outil. Bootstrap est un framework qui peut rendre votre vie de plus facile pour créer l'architecture d'une page web.

Mais Bootstrap va bien plus loin qu'offrir du code CSS déjà bien organisé et structuré. Il offre aussi des plugins jQuery de qualité pour enrichir vos pages.

Vous êtes prêt ? Bon on y va mais il serait bien pour profiter pleinement de ce cours de posséder quelques connaissances :

La base indispensable est de bonnes notions en HTML et CSS. Vous avez des lacunes ? Comblez-les avec le cours de Mateo

Pour comprendre la mise en œuvre des plugins jQuery vous aurez besoin des quelques bases dans ce domaine. Il vous en manque, alors vous pouvez réparer ça ici.

Si vous voulez modifier Bootstrap pour l'adapter à vos besoins il vous faudra connaître LESS. Là aussi vous avez besoin d'un coup de main ? C'est ici.

Ce tutoriel a été mis à jour et complété pour la version 2.1.

Allez on y va !

Bootstrap de Twitter : un kit CSS et plus !

Partie 1 : Premiers pas

Dans cette première partie, nous allons voir ce qu'est un framework et en quoi il peut nous être utile. Nous allons voir comment installer Bootstrap. Nous allons commencer à l'utiliser pour organiser une page web avec un système de grille simple et efficace.

Après une présentation générale et une illustration des principales possibilités de structuration de page avec Bootstrap nous verrons un cas pratique d'application.

Mise en route

Pour utiliser efficacement Bootstrap vous devez déjà être convaincu de son utilité, vous devez aussi savoir l'installer. Ce chapitre est destiné à vous faire découvrir en quoi Bootstrap peut vous aider et comment vous devez le mettre en œuvre pour l'utiliser efficacement.

Un framework ?

Un framework, c'est quoi ?

C'est un ensemble de composants structurés qui sert à créer les fondations et à organiser le code informatique pour faciliter le travail des programmeurs, que ce soit en terme de productivité ou de simplification de la maintenance. Il en existe beaucoup pour les applications web qui ciblent les langages Java, Python, Ruby, PHP

Les frameworks CSS sont spécialisés, comme leur nom l'indique, dans les CSS ! C'est-à-dire qu'ils nous aident à mettre en forme des pages web : organisation, aspect, animation

Ils semblent devenus à la mode et il en existe un certain nombre :

Blueprint

YUI Grid CSS

52Framework

Elements CSS framework

BlueTrip

Quel en est l'intérêt ?

Les navigateurs sont pleins de fantaisies et ont des comportements très différents, surtout pour les anciennes versions. Les frameworks sont cross-browser et on a la garantie d'une présentation similaire quel que soit le navigateur utilisé et d'une parfaite compatibilité,

Les frameworks CSS font gagner du temps de développement parce qu'ils nous proposent les fondations de la présentation,

Les frameworks CSS normalisent la présentation en proposant un ensemble homogène de styles,

Les frameworks CSS offrent souvent des éléments complémentaires : boutons esthétiques, barres de navigation La grande diffusion de nouveaux moyens de visualisation du web (iPod, iPad ) impose désormais la prise en compte de tailles d'écran très variées, les frameworks CSS prennent généralement en compte cette contrainte.

Et les inconvénients ?

Pour utiliser efficacement un framework il faut bien le connaître, ce qui implique un temps d'apprentissage La normalisation de la présentation peut devenir lassante en lissant les effets visuels

Par rapport aux deux inconvénients énoncés, Bootstrap est d'une prise en main rapide même pour un débutant (surtout avec un joli tuto comme celui-ci ) et est totalement configurable parce qu'il est construit avec (que nous verrons un peu plus

loin dans le cours).

Découverte de Bootstrap

Origine de Bootstrap

Vous connaissez forcément Twitter, un des principaux réseaux sociaux qui inondent la planète de liens virtuels entre les humains devenus des noyaux cybernétiques. Le projet Bootstrap a été publié en août 2011 pour répondre à des besoins internes de développement de cette entreprise. Il a été mis à disposition du public sous licence Apache. La version 2.1 est sortie en août 2012.

Contenu du kit

Bootstrap propose :

une mise en page basée sur une grille de 12 colonnes. Vous avez donc une grille à disposition bien pratique. Bien sûr, si vous avez besoin de plus de 12 colonnes, ou de moins, il est toujours possible de modifier la configuration.

un reset CSS basé sur du code fondé sur HTML 5 et CSS 3

une bibliothèque totalement open source sous licence Apache du code qui tient compte du format d'affichage des principaux outils de navigation (responsive design) : smartphones, tablettes

des plugins jQuery de qualité un résultat cross-browser, en prenant même en compte IE7, donc une garantie de compatibilité maximale une bonne documentation sur le site de Twitter la garantie d'une évolution permanente une architecture basée sur LESS, un outil bien pratique qui étend les possibilités de CSS

Vous pouvez trouver toutes les informations sur Bootstrap directement sur le site dédié.

C'est quoi un reset CSS ?

Les navigateurs n'adoptent pas tous les mêmes valeurs par défaut pour les styles des éléments HTML. Cela peut générer quelques surprises au rendu des pages WEB selon le navigateur utilisé. Le reset consiste à mettre à zéro toutes les valeurs pour ainsi uniformiser le rendu. Le reset de Bootstrap est basé sur celui d'Eric Meyer, allégé et adapté.

Installation

L'installation de Bootstrap est simple : cliquez sur le bouton de téléchargement sur le site de Twitter.

Mise à jour avec la version 2.1

Quand vous téléchargez la librairie vous obtenez un fichier zippé contenant un répertoire bootstrap avec 3 sous-répertoires contenant quelques fichiers :

Voyons un peu ces fichiers :

comporte les classes de base de Bootstrap ; comporte les mêmes classes de base que sans les commentaires ; comporte les classes de base pour le responsive design ; comporte les mêmes classes de base que sans les commentaires ; comporte une collection d'icônes fournies par ; comporte la même collection d'icônes mais blanche ; contient des fonctions JavaScript des composants de Bootstrap ; contient les mêmes fonctions JavaScript sans les commentaires. C'est le fichier à utiliser en production.

Les fichiers "min" ( et ) contiennent le même code que leurs équivalents

( et ) mais ont été épurés des commentaires et ainsi allégés pour accélérer leur chargement.

D'accord, mais que mettre sur un site pour que Bootstrap fonctionne ?

Il faut distinguer les deux situations :

Pendant la phase de développement, il est intéressant de pouvoir naviguer dans le code de Bootstrap, il faut donc mettre les fichiers CSS non compressés ;

Lorsque votre site est en ligne vous n'avez plus à vous inquiéter du code et seule compte la vitesse de chargement, il faut donc cette fois utiliser les versions compressées ("min").

Voilà les fichiers utiles pendant la phase de développement (le fichier n'est à prévoir que si vous avez besoin du responsive design, le fichier n'est à prévoir que si vous utilisez des plugins jQuery) :

Voilà les fichiers utiles lorsque le site est en ligne (le fichier n'est à prévoir que si vous avez besoin du responsive design, le fichier n'est à prévoir que si vous utilisez des plugins jQuery) :

Dans tous les exemples de ce tuto je pars du principe qu'un répertoire bootstrap a été créé à la racine du site avec les trois répertoires css, img et js comportant les fichiers cités ci-dessus.

Pour que bootstrap fonctionne il faut le déclarer dans les pages HTML qui doivent d'ailleurs être impérativement au format HTML 5, donc :

Code : HTML

Il faut ensuite déclarer au minimum le fichier (ou ) dans l'en-tête de la page web :

Code : HTML

Si votre application est destinée à être utilisée sur des supports variés (tablettes, iPhones ) vous devez aussi déclarer le fichier (ou ) dans l'en-tête de la page web :

Code : HTML

A partir de là toutes les classes sont accessibles Évidemment vous devez adapter le lien selon la localisation de vos fichiers, c'est le cas d'ailleurs sur mon site de démonstration où vous trouverez le lien ainsi libellé :

Code : HTML

Pour remonter dans l'arbre des répertoires.

Une trame pour démarrer

Vous trouvez aussi sur le site une page de démarrage comportant l'essentiel des éléments pour vous aider à initier un projet. Pour le moment vous n'allez pas encore comprendre l'utilité de tous ces éléments, mais vous y reviendrez par la suite lorsque vous aurez fait le tour de ce cours.

Vous y trouvez les appels aux fichiers CSS :

Code : HTML

Il faut évidemment adapter les liens à votre situation. Nous verrons l'utilité du style ajouté lors de l’examen des barres de navigation.

Je rappelle que le fichier est utile si votre application doit s'adapter à une variété de tailles d'écrans. Je développerai cette notion un peu délicate dans un chapitre ultérieur.

On trouve ensuite les icônes pour les appareils d'Apple (iPhone, iPod Touch et iPad):

Code : HTML

<link rel="shortcut icon" href="/"><link rel="apple-touch-icon-precomposed" sizes="114x114" href="/"><link rel="apple-touch-icon-precomposed" sizes="72x72" href="/">

<link rel="apple-touch-icon-precomposed" href="/">

A adapter évidemment avec vos icônes personnelles . Je rappelle que ces icônes sont pertinentes pour qu'il n'y ait pas une création automatique d'une icône à partir d'une capture d'écran de votre site.

Une trame de la barre de navigation (je vous explique tout ça en détail dans ce cours) :

Code : HTML

Et en fin de page les appels Javascript (utiles si vous utilisez des plugins jQuery, comme nous allons le voir dans ce cours):

Code : HTML

<!-- Le javascript

================================================== -->

<script src="/"></script>

<script src="/"></script><script src="/"></script>

<script src="/"></script>

<script src="/"></script>

<script src="/"></script><script src="/"></script>

<script src="/"></script>

Là aussi il ne faut conserver que les appels utiles et adapter les liens.

Ces fichiers ne se trouvent pas dans le pacquage de Bootstrap, on les trouve où ?

Le fichier peut être téléchargé sur . Les autres fichiers correspondent aux plugins jQuery de Bootstrap. Tout le code se trouve également dans le fichier (ou ) qui se trouve lui dans le pacquage. Il y a là une petite incohérence dans la documentation de Bootstrap. Vous avez donc le choix entre utiliser le fichier (ou ) pour avoir tous les plugins disponibles avec une seule référence comme je vous le propose dans le chapitre correspondant ou récupérer individuellement les fichiers.

Ainsi donc si vous optez pour le fichier contenant tous les plugins, ce que je vous conseille, le code devient plus simple :

Code : HTML

<!-- Le javascript

================================================== -->

<script src="/"></script>

Bon maintenant vous savez tout pour démarrer avec Bootstrap, on va pouvoir commencer les choses intéressantes

Une grille ?

L'organisation spatiale des pages web est toujours la première préoccupation lorsqu’on crée un site. Est-ce qu'on prévoit une bannière ? Faut-il un espace pour un menu à gauche ou en haut ? Y aura-t-il des blocs sur un des côtés pour recevoir certaines fonctionnalités comme la connexion ou des infos ? Faut-il prévoir un bas de page ?

Bootstrap ne répond évidemment pas à ces questions, mais par contre il peut grandement vous faciliter la tâche, avec son système de grille, pour obtenir le résultat que vous souhaitez.

Petite visite guidée

Présentation

Le principe de la grille

La grille est tout simplement un découpage en cellules de mêmes dimensions :

On peut alors décider d'organiser du contenu en utilisant pour chaque élément une ou plusieurs cellules :

La grille de Bootstrap comporte 12 colonnes comme dans l'illustration ci-dessus. Vous commencez sans doute à comprendre l'utilité de cette organisation

Organisation de la grille

Bootstrap est essentiellement un fichier CSS. Il comporte de très nombreuses classes que l'on peut utiliser directement dans les balises HTML.

La première classe à connaître est row qui représente une rangée. Il faut ensuite définir le nombre de colonnes pour chaque élément en s'arrangeant pour en avoir 12 en tout. Pour définir le nombre de colonnes utilisées pour chaque élément on dispose d'une batterie de 12 classes :

span1 span2 span3 span4 span5 span6 span7 span8 span9 span10 span11 span12 Ces classes sont très simples, elles héritent d'une définition commune : Code : CSS

Si vous regardez la largeur pour le "span1" vous trouvez la valeur 60. On pourrait donc s'attendre à une valeur de 4 * 60 = 240 pour le "span4", mais il ne faut pas oublier les 3 marges intermédiaires 3 * 20 = 60, au final 240 + 60 = 300

On a dit que la grille complète fait 940px, hors si chaque colonne avec sa marge occupe 80px on a en tout 80 * 12 = 960px. D'où vient cette différence de 20px ? Tout simplement de la marge gauche de la première colonne qui est inutile. Cette différence est gérée par la classe row :

Pour avoir un élément de 4 colonnes de large accouplé avec un élément de 8 colonnes de large on a :

Code : HTML

Voici une illustration de ce code :

Après cette petite mise en jambe pour vous présenter la notion de grille dans Bootstrap on va passer en revue les possibilités dans le détail. Mais pour visualiser tous les exemples qui vont suivre je vous propose d'ajouter un peu de style, histoire d'afficher les éléments de façon explicite. Pour éviter de polluer le code HTML on va mettre ce style spécifique au tuto dans un fichier CSS particulier :

Code : CSS - css/tuto 1.css

Le seul but de ces règles de style est de faire apparaître nettement les éléments à l'écran et tant qu'à faire de façon élégante

La grille fixe

Une seule rangée

Dans ce premier exemple, on va déclarer une seule rangée avec deux éléments :

Code : HTML - tuto01_ 01

Mise en page rapide et simple non ? Cliquez sur l'image pour voir l'effet réel. Il en sera de même pour presque toutes les illustrations de ce tutoriel.

Plusieurs rangées

Pour obtenir plusieurs rangées, il suffit d'utiliser plusieurs fois la classe row. Un petit exemple avec 3 rangées pour voir l'effet : Code : HTML - tuto 01_02

Sauter des colonnes

Bootstrap permet aussi de sauter des colonnes :

Il y a quelques classes d'offset pour ça :

offset1 offset2 offset3 offset4 offset5 offset6 offset7 offset8 offset9 offset10 offset11

Ces classes se contentent d'ajouter une marge gauche. Par exemple :

Code : HTML - tuto 01_03

On a sauté 6 colonnes grâce à la classe offset6.

Imbrication d'éléments

On doit souvent imbriquer des éléments dans une page web, est-ce possible avec Bootstrap ?

Autrement dit d'inclure un row dans un span. Et bien on va tester ça tout de suite :

Code : HTML - tuto 01_04

Un petit TP

Pour vous entraîner, je vous propose d'obtenir le résultat suivant :

Donc deux zones séparées avec un offset de 2 colonnes dans la deuxième.

Voici la solution :

Secret (cliquez pour afficher)

La grille élastique

Un peu d'élasticité

Dans le chapitre précédent, nous avons vu comment utiliser une grille fixe, chaque colonne ayant une largeur fixée en pixels. Il existe une autre possibilité dans laquelle les largeurs ne sont plus établies en pixels mais en pourcentages.

Reprenons le code du "tuto 01_01" de la partie précédente. Voici ce que donne l'affichage :

La largeur de la fenêtre étant plus grande que celle d'un row on constate juste l'apparition d'une marge à droite. Que se passe-t-il si on réduit la largeur de la fenêtre ?

Les colonnes ayant des largeurs fixes, le deuxième élément passe sous le premier puisqu'il n'a plus suffisamment de place. Maintenant, voyons ce que ça donne avec une grille élastique. La seule modification à effectuer est au niveau de la classe row qui devient row-fluid.

Voici la classe "row-fluid" : Code : CSS

On a donc une occupation totale du contenant. Code : HTML - tuto 01_05

Cette fois les éléments occupent toute la largeur de la fenêtre dans tous les cas étant donné qu'ils sont affectés en pourcentage.

Mais on a vu que les classes span définissent une largeur en pixel, comment sont-elles maintenant définies en pourcentage ?

Regardez cette classe :

Code : CSS

Hormis cette élasticité on conserve les mêmes principes qu'avec une grille fixe.

Il y a toutefois une petite question qu'on peut se poser : que se passe-t-il si on introduit moins de colonnes dans le contenu que dans le contenant dans cette version élastique ?

On va tester

Code : HTML - tuto 01_06

De façon très logique les éléments occupent la totalité des colonnes qui leurs sont assignées et rien de plus

La version 2.1 a vu l'apparition des offsets aussi pour les grilles élastiques

Ainsi on peut désormais faire ce genre de composition en grille élastique :

Code : HTML

Mise en page

L'intérêt principal d'une grille est de réaliser une mise en page. Nous allons voir les deux façons de réaliser cela avec Bootstrap, avec toujours la même simplicité de mise en œuvre.

Mise en page fixe

La classe englobante pour réaliser une mise en page est container :

Code : HTML

Voici un premier exemple :

Code : HTML - tuto 01_07

On constate un centrage de la grille utilisée.

Il est intéressant de jeter un œil sur la classe container :

Code : CSS

La mise en "auto" des marges gauche et droite provoque le centrage.

Mise en page élastique

Pour une mise en page élastique le principe est le même, mais la classe à utiliser est container-fluid :

Code : HTML

Voici un exemple simple :

Code : HTML - tuto 01_08

Maintenant on peut redimensionner la fenêtre, on a une adaptation des éléments.

Voyons un peu cette classe container-fluid :

Code : CSS

Un petit décalage du contenu de 20px des deux côtés

Maintenant plus rien de la mise en page avec Bootstrap ne vous échappe alors nous allons passer à un exemple pratique

Un peu de pratique

Il est temps maintenant de mettre en application ce que je vous ai expliqué précédemment

Un exemple de page

Voici le premier jet d'une page web de test que je vais faire évoluer progressivement, pour le moment avec ce template : Code : HTML

Une simple composition avec un en-tête et 3 rangées. L'en-tête ne comporte que le titre avec une classe un peu particulière que nous allons voir plus loin. La première rangée comporte un seul élément. La deuxième par contre en comporte 12 d'une largeur de 2 colonnes. Si on calcule bien ça donne une largeur de 24 colonnes, le résultat est que les éléments se répartissent en fait sur deux niveaux à l'écran comme on peut le constater. La dernière rangée enfin comporte deux éléments.

Voici une visualisation du découpage :

La classe page-header

Cette classe fixe quelques valeurs :

Code : CSS - classe page-header

Une marge gauche de 18 pixels, une ligne inférieure de 1px de couleur grise avec un écart du contenu par rapport à cette ligne de 17px. Donc une approche sympathique pour un en-tête de page. Il suffit d'y placer un titre comme je l'ai fait ici :

Code : HTML

Quelques mises en valeur

Dans le premier paragraphe, j'ai utilisé quelques mises en valeur :

Code : HTML

Observez la qualité du popup lorsqu'on passe le curseur au-dessus de l'abréviation SAT :

Une citation

Le chapitre suivant comporte une citation avec utilisation de la balise blockquote :

Code : HTML

Le résultat est sobre et élégant :

La référence inférieure "Wikipedia" a été renvoyée à droite avec la classe pull-right qui se contente de rendre flottant à droite : Code : CSS - Classe pull-right

Une adresse

Dans la partie inférieure gauche figure une adresse. j'ai simplement utilisé la balise <address> :

Code : HTML

Pour un résultat vraiment satisfaisant :

Juste un peu de style ajouté

Pour donner plus d'harmonie à cette page, j'ai été obligé d'ajouter une marge basse de 20px à tous les span :

Code : CSS

C'est le seul élément de style ajouté à cette page.

Un petit TP

Maintenant un petit TP pour voir si vous avez compris tout ce que j'ai raconté dans ce chapitre.

Le but est d'obtenir une mise en page fixe de ce type :

Donc un bandeau supérieur, une zone de contenu centrale, deux zones latérales comportant chacune deux blocs superposés et un pied de page.

Pour voir ce que ça donne, c'est ici.

Maintenant que vous savez tout sur la mise en page nous allons passer au contenu et voir ce que Bootstrap a à nous proposer dans ce domaine

Partie 2 : Mise en forme des éléments

Dans cette deuxième partie, nous allons voir ensemble comment mettre en page, mettre en forme et agrémenter un peu le site.

Eléments de base

Dans cette partie nous allons voir ce que Bootstrap peut nous apporter dans la mise en forme et la présentation des éléments de base d'une page web : listes, tableaux, formulaires, boutons , icônes

Listes et tableaux

Voici le deuxième jet de la page web de test avec ce template :

Code : HTML

La présentation s'est enrichie d'une rangée et de nouveaux éléments. Voici une visualisation du découpage :

Les listes

BootStrap propose une mise en forme élégante des listes. J'en ai prévu une sur la page :

Code : HTML

Le résultat :

A noter l'existence d'une classe "unstyled" à appliquer à la balise <ul>, ce qui donne donc <ul class="unstyled">, qui supprime les puces. Voici le résultat sur la liste de la page :

Les tableaux

Plusieurs mises en forme sont prévues pour les tableaux, j'en ai retenu une pour le tableau de la page : Code : HTML

Le résultat :

On va analyser les classes utilisées

Classe "table"

C'est la classe de base pour les tableaux, elle fixe quelques styles et crée une bordure supérieure :

Code : CSS

Classe "table-bordered"

C'est la classe pour avoir de jolies bordures avec des coins arrondis :

Code : CSS

Classe "table-striped"

Cette classe ajoute un fond avec un gris très léger pour les lignes impaires (1, 3, ) :

Code : CSS

Je ne vous mets pas d'illustration parce que franchement, le gris est si léger qu'on ne voit rien utilisée, je trouve la valeur #F9F9F9, ce qui est effectivement un gris très très léger Vous pouvez remarquer aussi que lorsqu'on passe le curseur au-dessus du tableau la couleur de fond de la ligne correspondante change avec la valeur #F5F5F5, ce qui est déjà un gris assez léger. Je pense que des valeurs un peu plus marquées auraient été souhaitables. Mais rien n'empêche de les changer . Pour la page d'exemple, je suis passé par une autre approche qui apparaîtra dans un chapitre ultérieur.

BootStrap fait une utilisation intensive des nouvelles possibilités du CSS3 comme ici pour changer la couleur de fond des lignes impaires avec cette élégante syntaxe :

Classe "table-condensed"

Cette classe permet de condenser le tableau pour qu'il occupe moins de place verticale :

Code : CSS

C'est la version finale que j'ai adoptée. Vous avez remarqué qu'on peut cumuler l'application des classes sans problème, comme je l'ai fait dans cette démonstration progressive.

Un peu de couleur dans les tableaux

La version 2.1 introduit la possibilité de colorer le fond des lignes des tableaux avec les classes success error et info. Voici le tableau de notre exemple un peu animé de couleurs avec ces classes :

Code : HTML

</tr>

Mais évidemment cette possibilité de colorisation prend tout son sens dans une gestion dynamique de données pour faire apparaître des enregistrements possédant certaines caractéristiques.

Formulaires

Pour cette troisième version j'ai ajouté un peu de style et des formulaires :

Au niveau du style juste une petite touche :

Code : CSS

Le fond d'un léger gris met bien en valeur le texte et les photos, les petites marges de 10px délimitent bien les éléments. Quant au formulaire c'est l'objet de ce chapitre

Un formulaire de base

Bootstrap propose de base une mise en forme élégante des formulaires. Voici le formulaire de la page sans BootStrap : Code : HTML

Et le résultat à l'écran :

Bon ce n'est pas très folichon, juste ce que génère le navigateur lorsqu'on l'aide pas. Voyons maintenant ce que ça donne en utilisant BootStrap avec le même code HTML :

On a gagné en qualité typographique, mais au niveau organisation c'est un peu la panique. Nous allons arranger ça

Les classes "radio" et "checkbox"

Bootstrap nécessite l'utilisation d'une classe particulière pour les cases à cocher (checkbox) et les zones d'option (radio). Voyons ce que ça donne en utilisant la classe radio pour notre formulaire :

Code : HTML

<form>

<fieldset>

<legend>Si vous voulez me laisser un message</legend>

<h4>Comment m'avez-vous trouvé ?</h4>

<br/>

<label for="ami" class="radio">

<input type="radio" name="origine" value="ami" id="ami" /> Par un ami </label>

<label for="web" class="radio">

<input type="radio" name="origine" value="web" id="web" /> Sur le web </label>

<label for="hasard" class="radio">

<input type="radio" name="origine" value="hasard" id="hasard" />

Par hasard </label>

<label for="autre" class="radio">

<input type="radio" name="origine" value="autre" id="autre" />

Autre </label>

<label for="textarea">Votre message :</label>

<textarea id="textarea" rows="3"></textarea>

<p>Vous pouvez aggrandir la fenêtre</p>

<button type="submit">Envoyer</button>

J'ai aussi supprimé les sauts de ligne qui deviennent inutiles. Résultat :

Maintenant les zones d'option sont bien organisées. Mais l'ensemble manque un peu d'homogénéité.

La classe "well" et la largeur des input

Voilà une classe que j'aime bien, elle provoque une jolie stylisation. Si j'apporte ce petit complément au formulaire précédent :

Code : CSS

On obtient déjà quelque chose de plus joli sans trop d'effort :

Mais je trouve la zone de texte un peu petite, je pourrais l'élargir en lui appliquant directement un style, mais Bootstrap nous propose des classes pratiques, par exemple input-xlarge :

Code : HTML

Cette classe ne fait pas grande chose, elle se contente de fixer la largeur à 270px :

Les valeurs possibles pour la largeur :

Code : CSS

Le résultat commence à être pas mal du tout. La dernière chose qui me gêne est l'emplacement de la zone de texte et la place occupée par le texte d'aide "Vous pouvez agrandir la fenêtre". J'aimerais qu'il soit plus discret. Mais pour arranger ça, il va falloir un peu creuser les possibilités de Bootstrap au niveau des types de formulaires.

Les quatre types de formulaires

Bootstrap propose 4 types de formulaires :

Vertical (valeur par défaut) : la classe correspondante était form-vertical dans les versions précédentes mais elle a judicieusement disparue avec la version 2.1 puisqu'elle n'était jamais utilisée, étant la valeur par défaut. Dans cette mise en forme de base les libellés sont au-dessus de leur contrôle :

Inline : les libellés sont alignés à gauche suivis de leur contrôle. La classe correspondante est form-inline. En gros les éléments deviennent en ligne et alignés à gauche. Ça peut être pratique pour ne pas encombrer une page verticalement mais ne peut s'envisager que pour un petit formulaire sans beaucoup de contrôles sinon ça devient vite illisible. Voici un exemple avec quelques contrôles :

Code : HTML

Search : forme arrondie spéciale des zones de saisie de texte. La classe correspondante est form-search. Nous allons l'utiliser pour le formulaire de recherche situé dans l'en-tête de la page.

Horizontal : les contrôles ont un alignement flottant à gauche avec leur libellé aligné à droite sur la même ligne. La classe correspondante est form-horizontal. C'est ce que j'aimerais pour la zone de texte, alors nous allons utiliser cette classe.

Les classes "form-horizontal", "control-group", "control-label", "controls" et "help-block"

Lorsqu'on applique la classe form-horizontal au formulaire :

Code : HTML

On obtient ce résultat :

Autrement dit on a rien changé ! Que se passe-t-il ? En analysant, on se rend compte que le <label> possède ce style :

Code : CSS

On a donc encore un comportement de type "block" avec un retour à la ligne. Autrement dit avec la classe form-horizontal on a un comportement sans doute correct pour les contrôles standards mais il faut un complément pour un <label>. Bootstrap a prévu pour cela la classe control-label. Appliquons là pour voir l'effet :

Code : HTML

Cette fois on a bien un comportement "en ligne" mais il faut améliorer la mise en forme. Le libellé est trop collé à la zone de texte. On va arranger ça avec la classe controls :

Code : HTML

Il ne reste plus qu'à rendre plus discret le texte d'aide situé au-dessous de la zone de texte, ce que nous accomplissons avec la classe help-block:

Code : HTML

On est enfin arrivé à ce qu'on voulait ! Mais pour peaufiner l'aspect j'ai ajouté ma petite touche personnelle en changeant la couleur de fond et la marge interne :

Code : CSS

En identifiant mon formulaire pour l'application du style :

Code : HTML

Et voici le résultat final :

Enfin pas vraiment final parce que nous allons voir bientôt l'aspect du bouton

Un formulaire pour la recherche

La page comporte aussi un formulaire de recherche dans l'en-tête. La version 2.1 a apporté des améliorations dans l'aspect de ce type de formulaire. Nous allons utiliser la classe form-search pour le formulaire et search-query pour la zone de texte :

Code : HTML

La classe input-append a pour but de découper le bouton sur son côté gauche pour l'accoler à la zone de texte. Il existe aussi sa réciproque input-prepend avec évidemment le résultat inverse :

Code : HTML

Les classes input-append et input-prepend à l'oeuvre

Ces deux classes que nous avons utilisées dans les formulaires de recherche pour accoler un bouton à un input peuvent aussi servir, associées à la classe add-on, à accoler une information :

Code : HTML

On peut aussi les utiliser conjointement pour accoler devant et derrière :

Code : HTML

Remarquez l'utilisation de la classe span1 à l’intérieur de l'input. C'est une alternative à l'utilisation de la serie des input-xxx.

On peut évidemment accoler un bouton comme nous l'avons vu dans le formulaire de recherche , mais on peut également en accoler plusieurs :

Code : HTML

<div class="input-prepend input-append">

<span class="add-on">€</span>

<input class="input-mini" id="appendedPrependedInput" type="text">

<button class="btn" type="button">Vérifier</button>

Stylisation selon l'état

Bootstrap comporte des classes de stylisation des zones de saisie selon l'état. Voici un exemple :

Code : HTML

Avec ce résultat (cliquez sur l'image pour voir en action) :

Bon en fait d'action il y en a peu parce que je n'ai pas prévu d'interactivité. Alors un petit exemple Nous voulons faire un formulaire de ce genre :

Et nous voulons tester la saisie pour vérifier que le texte fait au moins 4 caractères. Si ce n'est pas le cas, on change le style de la zone de texte et on fait apparaître un message d'avertissement :

Tant qu'à faire on veut aussi que le message d'avertissement disparaisse au bout de 4 secondes et que le tout se fasse avec fluidité. En combinant Bootstrap et jQuery c'est un jeu d'enfant : Code : HTML

Je ne commente pas le code jQuery ajouté parce que ce n'est pas l'objet de ce cours, mais je conseille vraiment de connaître ce framework Javascript puissant et élégant pour tirer pleinement parti de toutes les possibilités de Bootstrap.

Mise en forme des listes de choix

La version 2.1 a introduit une mise en forme des listes avec sélection multiple. Voici un exemple avec deux listes identiques mais la deuxième a été équipée de la sélection multiple :

Code : HTML

Boutons, icônes et images

Bootstrap propose quelques classes intéressantes pour l'aspect des boutons. Nous allons en appliquer sur la page d'exemple au niveau des deux formulaires.

Un joli bouton pour les formulaires

Reprenons le formulaire de recherche en lui ajoutant une mise en forme du bouton :

Code : HTML

La classe de base pour les boutons est btn, voici ce que ça donne :

Le bouton est en harmonie avec les zone de texte. On peut aussi améliorer avec des couleurs :

Code : HTML

C'est la couleur de base donnée par la classe btn-primary. Il y en a quelques autres :

Les classes correspondantes sont :

btn-info btn-success btn-warning btn-danger bnt-inverse

A utiliser selon les situations et à faire varier selon l'humeur .

On peut aussi ajuster la dimension du bouton :

Code : HTML

Les valeurs possibles sont :

btn-mini btn-small btn-large La version 2.1 introduit la nouvelle classe btn-block qui règle la largeur du bouton sur la dimension de son contenant. Voici un exemple :

Code : HTML

Grouper des boutons

Il est possible de grouper des boutons avec la classe btn-group. Ce groupement peut s'effectuer de façon verticale avec la classe btn-group-vertical depuis la version 2.1. Voici un exemple avec deux groupements :

Code : HTML

De jolies icônes

Bootstrap propose aussi des icônes. Elles sont toutes regroupées dans deux fichiers :

Bon là je peux pas vous montrer les images parce qu'elles sont blanches et sur le fond blanc de la page on va pas voir grand-chose . Mais ce sont exactement les mêmes qu'on utilisera évidemment sur des fonds sombres.

Le principe utilisé est celui des sprites. On a toutes les icônes sur une seule image et on s'arrange pour afficher une seule icône.

Pour tout savoir sur cette méthode, vous pouvez voir le tuto de warpShadow sur le sujet.

L'intégration d'une icône à un bouton est très facile parce qu'il suffit d'utiliser la balise <i>. On va compléter le formulaire de contact de la page d'exemple en améliorant le bouton et le complétant par une icône :

Code : HTML

<form class="form-horizontal well" id="formulaire">

<legend>Si vous voulez me laisser un message</legend>

<h4>Comment m'avez-vous trouvé ?</h4>

<br/>

<fieldset>

<label for="ami" class="radio">

<input type="radio" name="origine" value="ami" id="ami" /> Par un ami </label>

<label for="web" class="radio">

<input type="radio" name="origine" value="web" id="web" /> Sur le web </label>

<label for="hasard" class="radio">

<input type="radio" name="origine" value="hasard" id="hasard" />

Par hasard </label>

<label for="autre" class="radio">

<input type="radio" name="origine" value="autre" id="autre" /> Autre </label>

<label class="control-label" for="textarea">Votre message :</label>

<div class="controls">

<textarea id="textarea" class="input-xlarge" rows="3"></textarea>

La syntaxe est toute simple. On utilise une balise <i> avec deux classes. La principale est icon-ok-sign qui indique quelle icône on désire afficher. La classe icon-white indique que je veux une icône blanche puisque le fond est sombre.

Et si on veut l'icône noire ?

Alors il suffit de ne pas mettre la classe icon-white

Évidemment on peut mettre ces icônes ailleurs que sur des boutons . Par exemple dans un menu.

Créer son pack d'icônes

On peut aussi se créer son pack d'icônes personnelles en gardant le gabarit pour profiter directement des classes de Bootstrap. Mais on peut aussi utiliser les services d'un site comme . Celui-ci permet, à partir d'une collection de fichiers d'icônes, non seulement de créer le sprite mais aussi le fichier CSS ! Vous pouvez trouver la procédure complète de réalisation d'un pack de cette manière sur le site favbulous avec en prime des centaines d'icônes libres de droits. Voici ce que j'ai pu réaliser en 5 minutes :

Code : HTML

Une barre de boutons

La classe btn-toolbar permet de faire très facilement des barres de boutons. Voici un exemple :

Code : HTML

On pourrait avoir envie de faire une barre de boutons verticale en contraignant des groupes de boutons à se superposer dans un span1, mais on se rend compte d'un petit problème :

Code : HTML

Le décalage constaté sur le deuxième groupe est dû à la règle :

Code : CSS

Celle-ci est utile pour décaler les groupes de boutons lorsqu'ils sont placés horizontalement. Alors pour avoir un aspect correct il faut ajouter une règle :

Code : CSS

Et alors l'alignement devient celui qu'on attend :

Mise en forme des images

La version 2.1 donne la possibilité de modifier l'apparence des bordures des images. Il y a pour cela 3 classes utilisables :

img-rounded	Image à coins arrondis
img-circle	Image circulaire
img-polaroid	Image avec liseré blanc

Voici un exemple illustratif de ces trois effets :

Code : HTML

Un petit TP

Pour faire le point sur les formulaires et les boutons, je vous propose un petit TP. Il faut réaliser ce formulaire :

Une zone de saisie pour un courriel, une autre pour un mot de passe, une petite case à cocher et un joli bouton, le tout bien organisé

Secret (cliquez pour afficher)

Maintenant si on faisait une petite validation de ce formulaire à la sauce CSS3 ?

Secret (cliquez pour afficher)

Si vous avez un navigateur pas trop antique, vous devriez voir ce genre de réaction :

Plutôt sympathique non ?

Après ce petit tour d'horizon des éléments de bases qui constituent une page web nous allons passer aux éléments spécifiques intégrés dans Bootstrap.

Les composants intégrés

Bootstrap propose des composants bien pratiques à mettre en œuvre : barre de navigation, effets typographiques, thumbnails et tout ça sans écrire une seule ligne de code Javascript

Nous verrons aussi alertes et barres de progression qui demandent un peu de Javascript pour être mises en oeuvre

Allez c'est parti pour une visite guidée !

La navigation

Une barre de navigation

Principe de base

Bootstrap propose de superbes classes pour créer une barre de navigation. A la base une barre nécessite cette simple structure :

Code : HTML

La classe englobante est navbar. Elle est toute simple :

Code : CSS

Donc une petite marge basse pour bien distinguer la barre du reste de la page et une précaution pour que tous les éléments apparaissent.

La classe suivante est navbar-inner. Celle-là est plus chargée, c'est elle qui réalise la mise en forme :

Code : CSS

.navbar-inner { min-height: 40px; padding-right: 20px; padding-left: 20px; background-color: #fafafa;

background-image: -moz-linear-gradient(top, #ffffff, #f2f2f2); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#f2f2f2));

background-image: -webkit-linear-gradient(top, #ffffff, #f2f2f2); background-image: -o-linear-gradient(top, #ffffff, #f2f2f2); background-image: linear-gradient(to bottom, #ffffff, #f2f2f2); background-repeat: repeat-x; border: 1px solid #d4d4d4; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ffffffff', endColorstr='#fff2f2f2', GradientType=0);

-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065); -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065); }

Elle fixe le fond, les arrondis des angles, l'ombre, et la marge interne

La classe suivante est la classe englobante que nous avons déjà rencontrée container et je n'y reviens pas.

Il faut ensuite garnir la barre d'items. Voici un contenu d'exemple :

Code : HTML

La classe nav fixe l'apparence et le positionnement de tous les éléments. Elle doit être utilisée avec une balise <ul>. Tous les items de navigation apparaissent alors avec des balises <li>. Voici un aperçu de la barre :

Barre avec un fond noir

Avant la version 2.1 la barre avait un fond noir. Elle s'est retrouvée avec un fond blanc à partir de cette version

On peut facilement retrouver l'ancien look avec la classe navbar-inverse :

Code : HTML

Insertion d'un séparateur

On peut insérer un séparateur pour distinguer visuellement des groupes d'items avec la classe divider-vertical :

Code : HTML

Un titre dans la barre

On peut faire apparaître un titre avec des caractères plus visibles avec la classe brand :

Code : HTML

Fixer la barre ?

A priori on veut une barre de navigation dans la partie supérieure d'un site, mais en général sous un bandeau. Avec le code tel qu'on l'a vu jusque-là, la barre se situe dans le flux par exemple :

Code : HTML

On peut fixer la barre en haut de la page du navigateur avec la classe navbar-fixed-top :

Code : HTML

Mais où sont passés les paragraphes ?

Ils sont sous la barre !

Il suffit de regarder la classe pour comprendre :

Code : CSS

La barre est située en positionnement fixe en haut de la page du navigateur avec un z-index important

Donc si on adopte un positionnement fixe en haut de la page du navigateur il faut prendre la précaution de ménager suffisamment d'espace pour que les éléments ne soient pas masqués par la barre :

Code : CSS

Voyons maintenant l'effet :

Maintenant on retrouve nos paragraphes visibles .

Il existe aussi la classe navbar-fixed-bottom pour fixer la barre en bas de la page, mais les cas d'utilisation sont plus anecdotiques. Le principe demeure le même.

La version 2.1 a vu l'arrivée de la classe navbar-static-top qui permet de fixer la barre en haut de la page en pleine largeur sans avoir à se soucier du padding

Voici un exemple :

Code : HTML

Un formulaire de recherche dans la barre

Pour intégrer un formulaire il suffit de le prévoir à l’intérieur de la div qui a la classe container. Il y a une classe spéciale pour intégrer un formulaire de recherche dans la barre : navbar-search. On a deux classes pour envoyer ce formulaire sur l'un des côtés :

pull-right pour le fixer à droite pull-left pour le fixer à gauche

Voici le code du formulaire :

Code : HTML

<form class="navbar-search pull-right" action="">

<input class="search-query" type="text" placeholder="Recherche">

Le résultat est assez convaincant :

Voici la page d'exemple avec une barre de navigation et un formulaire de recherche au niveau de cette barre :

La pagination

Un exemple simple

Bootstrap propose la classe pagination pour réaliser d'esthétiques paginations. Le principe est tout simple, voici un exemple de base :

Code : HTML

Un cas pratique

On va utiliser cette possibilité de pagination sur un exemple pratique à partir des photos de tigres que j'utilise dans ma page de démonstration. Le but est de faire défiler les images 3 par 3. Pour rendre les liens inactifs on a la classe disabled et pour les rendre actifs on a la classe active. Le code Javascript est inspiré d'une réponse à une question sur ce site. J'ai nettoyé et arrangé un peu le code pour qu'il deviennent efficace et lisible :

Code : HTML

<body>

<br/>

<div class="container">

<div class="row">

<div id="content">

<div class="span2"><img src="/" class="img-polaroid" alt="Tigre"></div>

<div class="span2"><img src="/" class="img-polaroid" alt="Tigre"></div>

</div>

<div id="page_navigation"></div>

</div>

<script src="/"></script>

</body> <script>

var show_per_page = 3; var current_page = 0;

function set_display(first, last) {

$('#content').children().css('display', 'none');

$('#content').children().slice(first, last).css('display', 'block'); }

function previous(){

if($('.active').prev('.page_link').length) go_to_page(current_page - 1);

} function next(){

Effets typographiques

Hero Unit

La classe hero-unit permet de rendre le texte très visible. Prenons un exemple :

Code : HTML

On voit bien la différence entre les éléments "normaux" et ceux qui bénéficient de la classe hero-unit.

Voyons cette classe :

Code : CSS

Un peu de gris en fond, des coins arrondis et quelques marges.

Ensuite on trouve une stylisation de <h1> :

Code : CSS

Avec un net renforcement de la police.

De même pour la balise <p> :

Code : CSS

Des libellés colorés

Pour créer des repères visuels textuels attractifs, il est possible de créer de beaux libellés :

Code : HTML

Des badges colorés

Les badges sont un peu comme les libellés mais pour des informations plus courtes, idéalement des nombres : Code : HTML

Thumbnails

Si vous avez des images, des vidéos ou tous autres éléments à afficher dans une grille, Bootstrap propose le composant Thumbnails très facile à mettre en œuvre. Je reviens sur ma page d'exemple qui comporte des petites images de tigres. Jusque-là, j'ai positionné les images en utilisant tout simplement la grille :

Code : HTML

<div class="row">

<div class="span2"><img src="/" alt="Tigre"></div>

<div class="span2"><img src="/" alt="Tigre"></div>

</div>

Ce qui donne une organisation bien régulière :

Voyons ce que ça donne avec le composant Thumbnails. Le principe en est simple, il faut utiliser la classe thumbnails dans une balise <ul>. Les éléments sont ensuite positionnés logiquement dans des balises <li>. Pour obtenir l'effet graphique chaque élément doit être stylisé par la classe thumbnail, soit dans une balise <a> si on place un lien, soit dans une balise <div> dans le cas contraire. Voilà ce que ça donne pour la page d'exemple :

Code : HTML

Pour des raisons d'homogénéité de la présentation, je prévois aussi de traiter la photo plus grande située au-dessous :

Code : HTML

J'ai dû adoucir un peu le gris du fond pour faire apparaître les bordures des diapositives. Le résultat est tout à fait sympathique. On pourrait évidemment créer des liens pour les images, auquel cas la balise <a> intégrerait la classe thumbnail.

Tout le travail de stylisation est d'ailleurs réalisé par cette classe :

Code : CSS

L'ombrage est réalisé par box-shadow qui est aussi une propriété apparue avec le CSS3. Si vous ne vous êtes pas encore informé sur ces nouveautés, je vous conseille un petit coup d’œil à la sur les fonds et les bordures.

Alertes et barres de progression

Nous allons voir maintenant deux composants qui, bien que ne nécessitant pas de Javascript pour leur présentation, en ont besoin pour leur mise en œuvre.

Alertes

Les alertes permettent de présenter un message visuellement significatif. Il suffit d'utiliser la classe alert :

Code : HTML

Trois autres classes permettent de changer l'aspect de l'alerte selon le résultat désiré :

Code : HTML

Si le texte doit être conséquent la classe alert-block règle les marges internes pour aérer un peu :

Code : HTML

Mais évidemment ces alertes ne trouvent leur sens que dans un contexte dynamique et nous devons pouvoir les faire apparaître et disparaître quand le besoin se présente. Bootstrap prévoit un petit plugin qui ne me paraît pas vraiment utile étant donné qu'on peut facilement gérer les alertes avec quelques lignes de Javascript dopées par jQuery :

Code : HTML

Un bouton adapté par la classe close a été prévu pour la fermeture de l'alerte. On pourrait également mettre un bouton normal.

Barres de progression

Les barres de progression constituent une façon élégante de faire patienter l'utilisateur pendant une longue tâche. Elles ont aussi pour vocation de le rassurer et de lui indiquer approximativement le temps qu'il lui reste à attendre. Les classes progress et bar permettent de réaliser facilement ce genre d'effet. Pour les exemples je prévois un peu de code Javascript pour simuler un processus temporel. Voici la barre de base :

Code : HTML

Le code correspondant à la barre est surligné, le reste est juste l'intendance pour l'animer pour l'exemple. On se contente de faire évoluer la propriété width de la barre. La classe well est juste utilisée pour l'esthétique.

Il existe une version rayée de la barre :

Code : HTML

Il existe aussi une version rayée et élégamment animée :

Code : HTML

Pour changer un peu j'ai prévu l'affichage du pourcentage. remarquez l'utilisation de la classe pull-right pour envoyer cet affichage sur la droite.

Il est également prévu des couleurs différentes pour enrichir la sémantique de ces barres, que ce soit en version unie ou rayée : Code : HTML

Une dernière possibilité, enfin, consiste à empiler des barres :

Code : HTML

Dans cette version empilée on conserve la possibilité d'avoir des rayures, animées ou pas

Nous sommes arrivés aux limites de l'utilisation de Bootstrap sans faire appel à ses plugins jQuery. Notre prochaine étape sera donc d'explorer les possibilités de Bootstrap boosté par ses plugins !

Partie 3 : Mise en forme avancée

Dans cette partie, nous verrons comment animer un peu le site web avec Jquery, le célèbre framework javascript, et nous étudierons l'intérêt de LESS dans la construction des feuilles de style en cascade avec un cas pratique d'application pour modifier Bootstrap.

Les plugins jQuery

jQuery est un framework Javascript devenu incontournable au fil des années. Les créateurs de Bootstrap l'ont choisi pour offrir des plugins esthétiques et faciles à mettre en œuvre. Si vous ne savez pas manipuler jQuery vous pourrez au moins utiliser les composants proposés de façon statique. Dans le cas contraire, vous pouvez encore combler cette lacune

L'ensemble des plugins se trouvent dans le fichier . Vous n'avez donc besoin que de 2 références, une pour jQuery et l'autre pour le fichier de Bootstrap :

Code : HTML

En adaptant évidemment le chemin à l'architecture de votre site. Si vous n'utilisez qu'un ou deux plugins il peut être plus intéressant d'utiliser les fichiers indépendants que vous pouvez trouver ici.

Lorsqu'il est possible d'utiliser les plugins avec des data attributs, je le fais dans les exemples. Je réserve l'utilisation de jQuery lorsque c'est indispensable.

Menu déroulant

Menu déroulant dans la barre de navigation

Le plugin jQuery Dropdowns permet de faire de jolis menus déroulants de ce genre :

Il suffit de modifier la barre de navigation pour ajouter le menu déroulant :

Code : HTML

<div class="navbar">

<div class="navbar-inner">

<div class="container">

<ul class="nav">

<li><a href="#">Accueil</a></li>

<li><a href="#">Liens</a></li>

<li class="dropdown"><a class="dropdown-toggle" data-

toggle="dropdown" href="#"> Témoignages <b class="caret"></b></a>

<ul class="dropdown-menu">

<li><a href="#">Dompteurs</a></li>

Vous pouvez voir la page correspondante ici.

Il a fallu ajouter quelques classes mais le résultat est très réussi .

Voyons ça de plus près : pour ajouter la fonctionnalité de dropdown il faut utiliser la classe dropdown et ajouter datatoggle="dropdown" dans la balise concernée pour que le menu fonctionne. Ici je l'ai fait pour la balise <a> qui contient le libellé du lien du menu. Il faut aussi utiliser la classe dropdown-menu dans la balise <ul> qui doit englober le menu déroulant.

Menu déroulant dans un bouton

On peut créer un menu déroulant activé par un bouton. Voici un code de base :

Code : HTML

Vous remarquez l'utilisation de la classe btn-group nécessaire au fonctionnement du plugin mais pour le reste c'est pratiquement identique au code qu'on a vu pour la barre de navigation. Voici le résultat à l'écran (et toujours un petit clic sur l'image pour ouvrir l'exemple) :

C'est pas mal, mais comme ça on comprend pas vraiment que c'est un bouton spécial, on peut avoir un repère graphique ?

On peut en ajoutant deux classes :

Code : HTML

J'ai ajouté les classes dropdown-toggle et caret pour le bouton et maintenant celui-ci est bien identifié :

C'est plus joli, mais on peut aussi ajouter des icônes et avoir de la couleur ?

On peut voici un exemple :

Code : HTML

On peut même faire en sorte que le bouton ait deux usages : en tant que bouton pour une acton et en tant que déclencheur de menu déroulant. Il est alors séparé en deux parties : à gauche pour l'action, à droite pour le menu :

Code : HTML

L'astuce consiste en fait à créer deux boutons accolés.

Sous-menu

Avec la version 2.1 on peut enfin créer un sous-menu avec la classe dropdown-submenu. Voici un exemple avec un bouton : Code : HTML

J'ai eu la curiosité de voir si on peut créer un sous-sous-menu :

Fenêtre modale

Le plugin Modals permet de créer facilement une fenêtre modale.

La mise en place d'une fenêtre modale nécessite l'utilisation de quelques classes. Voici un premier exemple :

Code : HTML

Le principe est simple : on crée un <div> avec la classe modal qui se charge de configurer et positionner la fenêtre et la classe hide dont le seul but est de la rendre invisible. On peut ensuite organiser la fenêtre avec un en-tête grâce à la classe modalheader et un corps avec modal-body. On prévoit également une action pour fermer la fenêtre (sinon elle va toujours rester ouverte ) avec la classe close et la propriété data-dismiss="modal". Il ne reste plus ensuite qu'à créer un bouton pour ouvrir la fenêtre en faisant correspondre bouton et fenêtre avec un identifiant et en utilisant data-toggle="modal" pour que le plugin fonctionne. Au départ on n'a donc que ce bouton à l'écran :

Et quand on clique, on obtient la fenêtre modale :

On a une petite croix pour fermer la fenêtre. On peut améliorer un peu l'esthétique en créant un pied de page avec la classe modalfooter et un bouton pour sortir :

Code : HTML

Il est possible également d'obtenir un effet de transition (pensez à référencer le plugin transition si vous utilisez des fichiers individuels). Il suffit d'ajouter la classe fade :

Code : HTML

On peut aussi depuis la version 2.1 injecter une page externe dans le corps de la fenêtre modale

Cette possibilité peut s'avérer très pratique. Voici un exemple en injectant une page d'exemple sur les tigres : Code : HTML

On pointe la fenêtre modale avec data-target et la page à injecter avec href.

Onglets

Le plugin Togglable tabs permet de créer facilement des onglets.

Voici un premier exemple simple :

Code : HTML

On utilise une liste et quelques classes, rien de bien compliqué. Le plugin est activé par data-toggle="tab".

Si cette apparence tabulaire ne vous convient pas vous pouvez changer pour un autre aspect avec une modification minime :

Code : HTML

Vous en voulez encore plus ! Un menu déroulant pour un lien ? Là vous exagérez vraiment, mais bon il faut un peu modifier le code pour utiliser le plugin dropdown que nous avons déjà vu :

Code : HTML

<div class="tabbable">

<ul class="nav nav-tabs">

<li class="dropdown"><a href="#accueil" datatoggle="tab">Accueil</a></li>

<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#"> Livres <b class="caret"></b></a>

<ul class="dropdown-menu"><li><a href="#policiers" datatoggle="tab">Policiers</a></li>

<li><a href="#romans" data-toggle="tab">Romans</a></li><li><a href="#contes" data-toggle="tab">Contes</a></li>

</ul>

</li>

<li><a href="#témoignages" datatoggle="tab">Témoignages</a></li>

</ul>

<div class="tab-content">

Bon, ça ne vous va encore pas et vous préféreriez les liens empilés à gauche ? Encadrez le code d'un <div> avec ces classes :

Code : HTML

La version 2.1 permet d'aller plus loin dans l'organisation des onglets comme par exemple les placer au-dessous du contenu avec la classe tabs-below :

Code : HTML

Ou encore à droite avec la classe tabs-right :

Code : HTML

Carousel

Le plugin Carousel permet de créer facilement un carousel.

La mise en place nécessite l'utilisation de quelques classes. Voici la structure de base HTML :

Code : HTML

Voici un premier exemple simple :

Code : HTML

<div class="span9">

<div class="carousel slide">

<div class="carousel-inner">

<div class="item active"><img alt="" src="/"/>

<div class="carousel-caption">

<p>Une présentation</p>

</div>

<div class="item"><img alt="" src="/"/>

<div class="carousel-caption"><p>Un autre présentation</p>

</div>

<div class="item"><img alt="" src="/"/>

<div class="carousel-caption">

<p>Et encore une autre !</p>

Pour chaque item on place une balise <img> pour référencer une image, on associe une légende avec une balise <div> avec la classe carousel-caption. On utilise la classe active pour désigner l'image qui doit apparaître en premier. On a utilisé une classe span9 pour positionner le carousel. On a dimensionné les 3 images aux mêmes côtes.

La version 2.1 impose l'utilisation de la classe "slide" pour obtenir un effet de glissement

Il nous faut aussi initialiser le carousel avec jQuery :

Code : JavaScript

Voici le résultat :

On peut ajouter des boutons pour faire défiler manuellement ?

Il suffit de compléter le code avec ça :

Code : HTML

On a identifié le carousel avec un l'id myCarousel. On a créé deux liens qui pointent sur le carousel en spécifiant la bonne classe et le bon data-slide :

On peut améliorer la présentation en ajoutant du style :

Code : CSS

Mais on peut aussi détourner une classe de Bootstrap pour obtenir un effet sympathique sans ajouter de style :

Code : HTML

Le carousel comporte quelques options, par exemple le délai de défilement :

Code : JavaScript

Testez !

Pour terminer un petit TP. On veut obtenir ce résultat (comme depuis le début un petit clic sur l'image pour ouvrir l'exemple ):

Un défilement avec un délai de 2 secondes, un bouton pour arrêter le défilement et un autre pour le lancer, et en prime une étiquette qui nous indique l'état. Essayez de le faire en vous référant à la documentation pour les fonctions à utiliser. Secret(cliquez pour afficher)

Info-bulles et Popover

Ces deux plugins partagent une bibliothèque et ont un fonctionnement analogue, nous allons donc les traiter ensemble.

Info-bulle

Le but est d'obtenir de jolies info-bulles de ce genre :

Voici un premier exemple de mise en œuvre au niveau HTML :

Code : HTML

<p>Le Tigre (Panthera tigris) est un <a rel="tooltip" href="#" dataoriginal-title="Classe de vertébrés">

mammifère</a> carnivore de la famille des félidés (Felidae) du genre Panthera.

Aisément reconnaissable à sa fourrure rousse rayée de noir, il est le plus grand félin sauvage et l'un des plus grands <a rel="tooltip" href="#" data-original-title='Synonyme de

"carnassier"'> carnivores</a> du monde. L'espèce est divisée en neuf sousespèces possédant des différences mineures en termes de taille ou de comportement.</p>

On utilise des balises <a> avec l'attribut rel égal à tooltip.

Le contenu de l'info-bulle se place dans l'attribut data-original-title. Si vous testez ce code il ne se passera rien parce qu'il faut initialiser le plugin avec jQuery :

Code : JavaScript

Il suffit d'utiliser la fonction tooltip avec le bon sélecteur, ici on a choisit la balise <a> parce qu'on veut une info-bulle sur tous les liens de la page. Dans un contexte plus complexe il faudrait évidemment affiner la sélection, mais ce n'est pas l'objet de ce cours.

Voici le résultat (vous pouvez tester en cliquant sur l'image, mais bon depuis le début vous avez compris ça ) :

Sympa non ?

Il existe quelques options dont vous pouvez trouver la liste complète sur le site de l'éditeur.

On peut par exemple changer le positionnement de l'info-bulle :

Code : JavaScript

Ici on utilise l'option placement en la définissant à left pour le premier lien et sans rien préciser pour le second (ce qui donne le positionnement par défaut au-dessus) :

Popover

Le but est d'obtenir une grosse info-bulle de ce genre :

Voici un premier exemple de mise en œuvre au niveau HTML :

Code : HTML

On utilise des balises <a> avec l'attribut rel égal à popover.

Le contenu de l'info-bulle se place dans l'attribut data-content et le titre dans l'attribut data-original-title. Si vous testez ce code il ne se passera rien parce qu'il faut initialiser le plugin avec jQuery :

Code : JavaScript

Il suffit d'utiliser la fonction popover avec le bon sélecteur, ici on a choisi tout simplement un id.

Voici le résultat :

Le comportement par défaut a changé avec la version 2.1. Auparavant le déclenchement par défaut était au passage du curseur de la souris. Maintenant elle se fait au clic !

Comme pour l'info-bulle on peut modifier le positionnement avec l'option placement :

Code : JavaScript

Le comportement par défaut est un déclenchement au clic sur l'élément, mais on peut facilement changer ce comportement : Code : JavaScript

Ici on a utilisé l'option trigger pour avoir un déclenchement au focus sur l'élément. On montre aussi qu'on peut cumuler plusieurs options puisqu'on a aussi défini le positionnement en bas avec bottom.

On peut aussi définir un délai d'apparition et de disparition :

Code : JavaScript

Tester !

On peut aussi définir une action quelconque pour déclencher le popover que l'on veut. Regardez cet exemple au niveau HTML :

Code : HTML

<div class="well"><img id="img" rel="popover" data-content="Je suis en colère !" data-original-title="Test du Popover" src="/"><a href="#" id="pop" class="btn btn-info pull-right" >Cliquer sur moi plusieurs fois pour le Popover</a></div>

Cette fois on a défini le popover au niveau d'une image et on se propose de le déclencher à partir d'un bouton. Voici le code jQuery correspondant :

Code : JavaScript

On initialise le popover sur l'image en déclenchement manuel : $("#img").popover({trigger:'manual'}); On utilise l'événement click du bouton pour lancer la fonction popover avec toggle comme paramètre :

$('#img').popover('toggle');

Et voici le résultat :

J'espère que je vous ai donné envie de vous amuser avec ces composants .

Boutons

Un plugin est consacré aux boutons. Il permet quelques effets et groupements.

Bouton bascule

On a parfois besoin de boutons à deux états stabilisés : repos et appuyé. Le plugin permet de réaliser cela facilement. Il suffit de créer le bouton en prévoyant data-toggle="button" :

Code : HTML

Personnellement je ne trouve pas le changement très net, comme j'aime les effets tranchés je vous propose de changer aussi la classe du bouton lors du clic avec un peu de Javascript . Cette fois on se contente de placer un bouton sans artifice :

Code : HTML

Et on réalise tout avec Javascript . C'est la méthode toggle qui génère l'effet, le reste du code est consacré au changement de la classe :

Code : JavaScript

Boutons effet "checkbox"

On peut grouper des boutons avec la classe btn-group et les faire fonctionner comme des "checkbox" avec datatoggle="buttons-checkbox". Les boutons restent indépendants dans leur fonctionnement mais ont l'avantage d'être groupés :

Code : HTML

Ici encore si l'effet visuel ne vous convainc pas vous pouvez accentuer le résultat avec un peu de Javascript : Code : JavaScript

Boutons effet "radio"

On peut grouper des boutons avec la classe btn-group et les faire fonctionner comme des "boutons radio" avec datatoggle="buttons-radio". Les boutons sont maintenant liés dans leur fonctionnement, un seul peut être enfoncé :

Code : HTML

Boutons pour attente de processus

Parfois on clique sur un bouton pour réaliser un processus qui demande un certain temps, comme par exemple un envoi de fichier. Le plugin prévoit cette possibilité. Voici un premier exemple avec une temporisation artificielle juste pour marquer l'effet.

D'abord on crée le bouton :

Code : HTML

Ensuite on crée le code pour gérer l'effet. La méthode loading provoque le changement du texte du bouton avec ce qui est indiqué dans data-loading-text et la méthode reset ramène le bouton à son état initial :

Code : JavaScript

On peut aussi améliorer l'aspect visuel en jouant avec la classe du bouton comme nous l'avons fait précédemment :

Code : JavaScript

Maintenant voyons un cas d'utilisation un peu plus réaliste que notre minuterie. Nous avons une image lourde à charger et nous voulons que le bouton change d'état le temps de chargement de l'image. Voilà le bouton et la balise prête à recevoir l'image : Code : HTML

Et voici le code Javascript pour gérer l'effet :

Code : JavaScript

Avec cet exemple vous ne verrez certainement l'effet qu'une fois dans votre navigateur étant donné qu'ensuite l'image sera en cache.

Typeahead

Le plugin jQuery Typeahead permet de créer un effet de menu déroulant d'aide au remplissage d'une zone de texte :

Voici un exemple de mise en œuvre :

Code : HTML

<script src="/"></script> <script> $(function (){

var deps = ['Ain','Aisne','Allier','Alpes de-Htes','Alpes de-Htes

Provence','Hautes-Alpes',

'Alpes-

Maritimes','Ardèche','Ardennes','Ariege','Aube','Aude','Aveyron','Bouchesdu-Rhône','Calvados',

'Cantal','Charente','Charente-Maritime','Cher','Correze','Côte d\'Or',

'Côtes d\'Armor','Creuse',

'Dordogne','Doubs','Drome','Eure','Eure-et-Loire','Finistère'];

$('#départements').typeahead({source: deps}); });

</script>

Rien de bien compliqué, il faut prévoir l'attribut data-provide dans la balise <input>.

Au niveau du script il faut créer un tableau avec les valeurs de référence, ici j'ai créé une liste de départements.

Il faut ensuite utiliser la méthode typeahead en déclarant la source de données.

Une option qui peut s'avérer intéressante est items, elle permet de définir le nombre maximal de propositions affichées. Par exemple :

Code : JavaScript

Ici on a limité à 3 le nombre de propositions. Tester ici.

Effet accordéon

Le plugin jQuery collapse permet de faire de jolis effets d'apparition et de disparition de zones (un clic sur l'image pour voir) :

On va commencer par un exemple simple :

Code : HTML

<div class="accordion-inner"> Ce plugin permet de créer des effets "accordéon" totalement paramétrables</div></div>

<div class="accordion-heading"><a class="accordion-toggle" href="#item2" data-toggle="collapse"> Fenêtre modale </a></div>

<div id="item2" class="collapse">

<div class="accordion-inner"> Ce plugin permet de créer des fenêtres modales élégantes avec une grande simplicité. </div>

</div>

<div class="accordion-heading"><a class="accordion-toggle" href="#item3" data-toggle="collapse"> Carousel </a></div>

<div id="item3" class="collapse">

<div class="accordion-inner"> Ce plugin permet de faire défiler des images ou des vidéo, ou tout autre élément média avec une mise en forme esthétique </div>

</div>

C'est le code qui correspond à l'image située au-dessus. Il faut distinguer deux éléments :

Le déclencheur sur lequel on clique : ici c'est un lien avec une balise <a>. Il doit comporter la classe accordion-toggle et comporter la propriété data-toggle="collapse"

La zone à masquer ou démasquer : elle est englobée avec un <div> équipé de la classe collapse

Le lien entre le déclencheur et la zone se fait par l'identifiant de la zone.

Il y a deux classes dévouées à l'esthétique du contrôle : accordion-heading pour le déclencheur et accordion-inner pour la zone. Si on les enlève, la mise en forme est moins convaincante mais ça fonctionne encore :

On peut encore améliorer l'esthétique en créant des bordures pour bien délimiter les éléments :

Code : HTML

<div class="container"></br>

<div class="span6 well">

<h4> Les plugins de Bootstrap</h4>

<br>

<div class="accordion-group">

<div class="accordion-heading"><a class="accordion-toggle" href="#item1" data-toggle="collapse"> Accordéon </a></div>

<div id="item1" class="collapse in">

<div class="accordion-inner"> Ce plugin permet de créer des effets "accordéon" totalement paramétrables</div>

</div>

<div class="accordion-group">

<div class="accordion-heading"><a class="accordion-toggle" href="#item2" data-toggle="collapse"> Fenêtre modale </a></div>

<div id="item2" class="collapse">

<div class="accordion-inner"> Ce plugin permet de créer des

Je me suis contenté d'ajouter la classe accordion-group à chaque bloc déclencheur-zone. Les plus attentifs auront aussi remarqué que j'ai ajouté la classe in à la première zone pour qu'elle soit visible dès le départ.

Oui mais j'aimerais que la zone affichée s'efface quand j'en ouvre une nouvelle

Alors là il faut encore compléter le code :

Code : HTML

<div class="span6 well">

<h4> Les plugins de Bootstrap</h4>

<br>

<div id="monaccordeon">

<div class="accordion-group">

<div class="accordion-heading"><a class="accordion-toggle" href="#item1" data-parent="#monaccordeon" data-toggle="collapse"> Accordéon </a></div>

<div id="item1" class="collapse in">

<div class="accordion-inner"> Ce plugin permet de créer des effets "accordéon" totalement paramétrables</div>

</div>

<div class="accordion-group">

<div class="accordion-heading"><a class="accordion-toggle" href="#item2" data-parent="#monaccordeon" data-toggle="collapse"> Fenêtre modale </a></div>

<div id="item2" class="collapse">

<div class="accordion-inner"> Ce plugin permet de créer des fenêtres modales élégantes avec une grande simplicité. </div>

</div>

<div class="accordion-group">

<div class="accordion-heading"><a class="accordion-toggle" href="#item3" data-parent="#monaccordeon" data-toggle="collapse"> Carousel </a></div>

<div id="item3" class="collapse">

<div class="accordion-inner"> Ce plugin permet de faire défiler des images ou des vidéo, ou tout autre élément média avec une mise en forme esthétique </div>

</div>

Tester !

Il a fallu englober d'un <div> avec un identifiant (#monaccordeon) et faire une référence dans les déclencheurs avec dataparent="#monaccordeon".

Est-ce qu'on peut déclencher avec des boutons ?

Oui on peut mais il faut adapter le code :

Code : HTML

<div class="span6 well">

<h4> Les plugins de Bootstrap</h4>

</br>

<div id="monaccordeon">

<div class="accordion-group">

<button class="btn btn-primary accordion-heading" datatoggle="collapse" data-parent="#monaccordeon" datatarget="#item1">Accordéon</button>

<div id="item1" class="collapse accordion-group in"><div class="accordion-inner"> Ce plugin permet de créer des effets "accordéon" totalement paramétrables</div>

</div>

<div class="accordion-group">

<button class="btn btn-primary accordion-heading" datatoggle="collapse" data-parent="#monaccordeon" datatarget="#item2">Fenêtre modale</button>

<div id="item2" class="collapse accordion-group">

<div class="accordion-inner"> Ce plugin permet de créer des fenêtres modales élégantes avec une grande simplicité. </div>

</div>

<div class="accordion-group">

<button class="btn btn-primary accordion-heading" datatoggle="collapse" data-parent="#monaccordeon" datatarget="#item3">Carousel</button>

<div id="item3" class="collapse accordion-group">

<div class="accordion-inner"> Ce plugin permet de faire défiler des images ou des vidéo, ou tout autre élément média avec une mise en forme esthétique </div>

</div>

Cette fois on fait la référence aux zones avec data-target="#itemx".

Est-ce qu'on peut savoir quand une zone apparaît et l'utiliser dans du code ?

Voici un exemple illustratif avec utilisation de jQuery :

Code : HTML

<div class="container"><br>

<div class="span6 well">

<h4> Les plugins de Bootstrap</h4>

</br>

<div id="monaccordeon">

<div class="accordion-group">

<button class="btn btn-primary accordion-heading" datatoggle="collapse" data-parent="#monaccordeon" datatarget="#item1">Accordéon</button>

<div id="item1" class="collapse accordion-group in">

<div class="accordion-inner"> Ce plugin permet de créer des effets "accordéon" totalement paramétrables</div>

</div></div>

<div class="accordion-group">

<button class="btn btn-primary accordion-heading" datatoggle="collapse" data-parent="#monaccordeon" datatarget="#item2">Fenêtre modale</button>

<div id="item2" class="collapse accordion-group">

<div class="accordion-inner"> Ce plugin permet de créer des fenêtres modales élégantes avec une grande simplicité. </div>

</div></div>

<div class="accordion-group">

<button class="btn btn-primary accordion-heading" datatoggle="collapse" data-parent="#monaccordeon" datatarget="#item3">Carousel</button>

<div id="item3" class="collapse accordion-group"><div class="accordion-inner"> Ce plugin permet de faire défiler des images ou des vidéo, ou tout autre élément média avec une mise en forme esthétique </div>

</div>

</br>

<div id="affichage"><span class="label labelwarning">"Accordéon" a été affiché !</span></div>

</div>

<script src="/"></script>

Un exemple de réalisation

Maintenant que nous avons vu les principales possibilités de Bootstrap nous allons considérer une application pratique qui consiste à réaliser un modeste éditeur de dessin en ligne. Nous allons nous intéresser essentiellement à la conception de l'interface puisque c'est le sujet de ce tutoriel, mais plutôt que d'avoir une coquille vide nous allons aussi équiper cet éditeur de quelques fonctionnalités. On utilise le canvas du pour les manipulations graphiques avec l’assistance de la librairie . Cette application me sert aussi dans son aspect Javascript pour un tutoriel en cours de rédaction sur KineticJS. C'est dans ce cours là que j'explique la partie Javascript.

Le résultat final à l’œuvre

Voici ce que nous devons obtenir (du moins pour l'interface, pour le dessin j'espère que vous ferez mieux ) :

L'interface présente un menu avec des sous-menus :

Au niveau de ces menus nous avons ces fonctionnalités :

Nouveau dessin

Enregistrement en mode image

Enregistrement en mode JSON

Positionnement de la forme sélectionnée : avant, arrière, premier plan, arrière plan

Modification : annulation dernière forme, rétablissement de la dernière forme, copier-coller, suppression d'une forme

Deux barres de boutons sur la partie gauche :

Les boutons de la première barre sont du type "radio" avec un seul bouton actif. Une aide sous forme d'info-bulle indique le nom de la commande. On peut soit être en mode sélection, soit en mode de dessin avec le choix entre ligne, rectangle et ellipse. Les boutons de la deuxième barre servent à annuler ou rétablir la dernière forme dessinée, copier-coller des formes ou les supprimer.

Et enfin une barre inférieure rassemble la sélection de la largeur et de la couleur des lignes ainsi que la couleur de remplissage :

Une assistance visuelle est prévue pour le choix de la couleur.

Vous pouvez tester l'éditeur en ligne pour voir son fonctionnement.

Organisation de la page

Organisation générale

L'application de la grille de Bootstrap est efficace aussi pour ce genre d'application un peu éloignée d'une page web. Un container contient trois row. Dans le premier row un span12 héberge la barre de menu. Le second row est divisé en deux avec un span1 pour les barres de boutons et un span11 pour accueillir les canvas. Enfin un dernier row contient les contrôles inférieurs.

Un peu de style

Pour l'esthétique j'ai traité un peu la bordure du container :

Code : CSS

Donc des coins arrondis, de l'ombre et une fixation de la hauteur.

La barre de boutons nécessitait également quelques réglages :

Code : CSS

Juste pour réduire un peu la largeur des boutons et les positionner correctement. Pour assurer aussi l'alignement correct des deux barres de boutons.

Enfin au niveau de la barre inférieure aussi quelques petits réglages de positionnement des éléments de formulaire et une réduction de la zone de saisie de la largeur de ligne :

Code : CSS

Pour terminer une annulation de la bordure interne supérieure des canvas pour lesquels on détourne la classe thumbnail pour réaliser à bon compte une bordure élégante : Code : CSS

Au final on se retrouve avec assez peu de code CSS pour cette mise en page dont l'essentiel est réalisé par Bootstrap.

La barre de menu

La barre de menu, placée dans une balise nav affublée d'une classe span12 est du pur Bootstrap avec utilisation du plugin dropdown pour les menus déroulants et les sous-menus :

Code : HTML

<nav class="span12">

<div class="navbar">

<div class="navbar-inner"><a class="brand" href="#">Grafouilleur V1.0</a>

<ul class="nav">

<li class="divider-vertical"></li>

<li id="fichier" class="dropdown"><a class="dropdowntoggle" data-toggle="dropdown" href="#"> Fichier</a>

<ul class="dropdown-menu">

<li><a href="#" id="nouveau">Nouveau </a></li>

<li class="divider"></li>

<li><a href="#" id="enregistrer_image">Enregistrer l'image</a></li>

<li><a href="#" id="enregistrer_json">Enregistrer en

JSON</a></li>

</ul>

</li>

<li id="modifier" class="dropdown"><a class="dropdowntoggle" data-toggle="dropdown" href="#">Modifier</a>

<ul class="dropdown-menu">

<li class="dropdown-submenu"><a tabindex="-1" href="#">Arranger</a>

<ul class="dropdown-menu">

<li><a href="#" id="go_up">Envoyer à l'avant</a> </li>

<li><a href="#" id="go_down">Envoyer à l'arrière</a></li>

<li><a href="#" id="go_front">Envoyer au premier plan</a></li>

<li><a href="#" id="go_back">Envoyer à l'arrière plan</a></li></ul>

</li>

<li class="dropdown-submenu"><a tabindex="-1" href="#">Edition</a>

<ul class="dropdown-menu">

<li><a href="#" id="annuler">Annuler</a></li><li><a href="#" id="repeter">Répéter</a></li>

<li><a href="#" id="supprimer">Supprimer</a></li>

<li class="divider"></li>

<li><a href="#" id="copier">Copier</a></li>

<li><a href="#" id="coller">Coller</a></li>

</ul>

</li>

</ul>

</li>

</ul>

</div>

</nav>

Chaque commande a reçu un identifiant pour être plus facilement repérable par le Javascript.

Les barres de boutons et les canvas

Les barres de boutons

Les barres de boutons sont enveloppées par une balise aside équipée de la classe span1 :

Code : HTML

<aside class="span1">

<div id="mode" class="btn-group btn-group-vertical" datatoggle="buttons-radio">

<a href="#" class="btn active" rel="tooltip" data-originaltitle="Sélection"><i class="icon-hand-up"></i></a><a href="#" class="btn" rel="tooltip" data-originaltitle="Ligne"><i class="icon-ok"></i></a>

<a href="#" class="btn" rel="tooltip" data-originaltitle="Rectangle"><i class="icon-stop"></i></a>

<a href="#" class="btn" rel="tooltip" data-originaltitle="Ellipse"><i class="icon-adjust"></i></a>

</div>

<div id="edition" class="btn-group btn-group-vertical"><a href="#" class="btn" rel="tooltip" data-originaltitle="Annuler"><i class="icon-backward"></i></a><a href="#" class="btn" rel="tooltip" data-originaltitle="Répéter"><i class="icon-forward"></i></a><a href="#" class="btn" rel="tooltip" data-originaltitle="Copier"><i class="icon-check"></i></a>

<a href="#" class="btn" rel="tooltip" data-originaltitle="Coller"><i class="icon-share"></i></a>

<a href="#" class="btn" rel="tooltip" data-originaltitle="Supprimer"><i class="icon-trash"></i></a>

</div> </aside>

Les boutons sont regroupés en barre avec la classe btn-group et en position verticale avec btn-group-vertical. Le plugin tooltip est mis en œuvre au niveau de chaque bouton pour faire apparaître l'info-bulle d'aide. J'ai utilisé les icônes de la collection de base pour ne pas sortir de Bootstrap, même s'il m'a fallu un peu fouiller pour faire cadrer avec les fonctionnalités. Je n'ai prévu qu'un identifiant par groupe, les boutons étant faciles à repérer avec jQuery.

Les canvas

Je vous parle des canvas depuis le début mais vous ne voyez pas cette balise dans le code, juste ça :

Code : HTML

Une balise section équipée de la classe span11 pour la mise en page et à l'intérieur pas grand chose, juste un div avec un identifiant et la classe thumbnail pour avoir une jolie bordure. En fait les canvas sont générés dynamiquement par KineticJS. Si vous poussez la curiosité jusqu'à regarder le code généré :

Le pied de page

Le pied de page contient dans une balise footer équipée d'une classe row des contrôles pour la saisie des valeurs d'épaisseur et couleur de ligne ainsi que de couleur de remplissage. On trouve également des possibilités de sélection (avec ou sans bordure, avec ou sans remplissage) :

Code : HTML

<footer class="row">

<form class="form-inline well-small">

<label>Ligne : </label>

<select id="typeligne" class="input-small">

<option>Unie</option>

<option>Sans</option>

</select>

<div id="widthline" class="input-append">

<input id="width" type="text">

<span class="add-on">px</span></div>

<div id="couleurligne" class="input-append color" datacolor="#000">

<input id="colorligne" class="input-mini" type="text" readonly value="">

<span class="add-on"><i style="background-color:#000"></i>

</span></div>

<label>Fond : </label>

J'ai utilisé un formulaire en ligne avec la classe form-inline agrémenté pour l'esthétique avec la classe well-small. Pour la sélection des couleurs j'ai utilisé deux fois le plugin colorpicker que je décris plus loin dans les extensions de Bootstrap.

Les pages modales

J'utilise des pages modale, avec le plugin associé, pour la confirmation d'un nouveau dessin, et aussi pour l'enregistrement au format JSON :

Code : HTML

Nous avons vu presque tous les plugins proposés par Bootstrap. La dernière étape sera de voir comment on peut modifier Bootstrap pour l'adapter plus finement à nos besoins.

Configurer Bootstrap

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 commencez par lire ce chapitre

Configuration simplifiée

Configurer en ligne sur le site de Bootstrap

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 :

Vous sélectionnez les plugins jQuery que vous utilisez :

Vous adaptez les variables LESS à votre goût :

Vous n'avez plus qu'à cliquer sur le bouton pour obtenir votre Bootstrap personnalisé :

Configurer en ligne sur le site Stylebootstrap

Ici c'est encore plus pratique parce qu'on peut régler visuellement tous les changements :

Varier les styles

Si vous n'êtes pas trop inspiré pour faire vos propres variations j'ai trouvé un site qui propose des thèmes gratuits.

Voici quelques variations de la page de test avec leurs propositions (cliquez sur les images pour ouvrir les pages dans votre navigateur) :

Un générateur de thèmes

BootTheme va encore plus loin en offrant un générateur de thèmes :

Le générateur est très complet et à jour pour la version 2.1 .

Utilisation de LESS

C'est quoi LESS ?

Bootstrap est totalement paramétrable parce qu'il est basé sur . C'est un langage qui permet d'étendre les possibilités de CSS avec des variables, des opérations, des fonctions. Pour en savoir plus sur ce langage, je vous renvoie au tuto de Iso. On trouve les sources LESS de Bootstrapici. On trouve de nombreux fichiers, par exemple qui définit la valeur de toutes les variables utilisées dans les autres fichiers. En voici un extrait :

Code : CSS

Il suffit de changer la valeur d'une variable ici pour que les valeurs changent pour toutes les propriétés qui utilisent cette variable. Par exemple on retrouve du gris utilisé pour les boutons :

Code : CSS

Mais les possibilités de LESS sont loin de s'arrêter à la définition de variables. On peut inclure un fichier. Par exemple le fichier qui ne fait que des inclusions :

Code : CSS

On peut aussi inclure des classes dans d'autres classes comme ici dans le fichier : Code : CSS

On peut même inclure des sélecteurs dans une définition comme ici dans le fichier :

Code : CSS

On peut aussi effectuer des opérations comme ici dans le fichier :

Code : CSS

Vous pouvez modifier Bootstrap en tripatouillant les variables et en compilant avec les outils proposés Pour ce tuto je vous propose d'utiliser un programme très bien fait : crunch. Au moment où j'écris ce tuto, j'ai trouvé la version 1.5.3 :

Le programme est simple et efficace, vous pouvez créer ou modifier des fichiers LESS et les compiler en CSS.

Exemple simple de configuration

Supposons que nous voulons 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 (un petit clic sur l'image pour voir en action ).

Voici le code complet de cette page :

Code : HTML

<!DOCTYPE HTML>

<html> <head>

<meta charset="utf-8">

<title>config01</title>

<link href="/" rel="stylesheet" type="text/css">

<style> body {

background-color:#DDD; color:#048

} a {

color: #028;

} p {

font-size: 12px; line-height: 16px;

} h1, h2, h3, h4, h5, h6 { font-weight:lighter;

}

#contenu { height: 300px;

}

#footer { text-align:center; background-color:#CCC; border-radius: 10px; padding: 4px;

} #menu { height: 100px; background-color:#CCC; border-radius: 10px;

}

</style>

</head>

<div class="container">

<body>

<div class="container">

<div class="row">

<div class="span12" id="bandeau">

<div class="page-header">

<h1>Mon beau site</h1>

</div>

<div class="row">

<div class="span2" id="menu">

<ul class="nav nav-list">

<li><a href="#"><i class="icon-repeat"></i> Accueil </a> </li>

<li><a href="#"><i class="icon-book"></i> Livres </a> </li>

<li><a href="#"><i class="icon-film"></i> Films </a></li>

<li><a href="#"><i class="icon-music"></i> Musiques </a> </li>

</ul>

</div>

<div class="span10" id="contenu">

<h2>Bienvenu sur mon site !</h2>

<br/>

<p>Il est bien entendu encore en construction </p><br/>

<p>Bientôt plein d'informations délirantes ici </p></div>

La page est organisée en 4 parties :

bannière supérieure menu à gauche contenu à droite pied de page en bas

Bootstrap permet de réaliser cette mise en page avec facilité.

J'ai profité de l'occasion pour montrer comment créer facilement un menu vertical élégant avec Bootstrap. Mais la partie qui va nous intéresser concerne les styles. Parce que tout une partie de la stylisation est en fait une modification des paramétrages de base de Bootstrap :

Code : CSS

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

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 fichier

3. Modifier les variables concernées dans le fichier

4. Enregistrer la nouvelle version du fichier

5. Ouvrir le fichier

6. Compiler le fichier

7. Enregistrer le fichier généré par Crunch

8. Renommer le fichier en , "xxx" représentant un indice pour distinguer cette version modifiée du Bootstrap original.

9. Modifier le lien des styles dans la page web :

Code : HTML

10. Supprimer les styles devenus inutiles dans la page web :

Code : CSS

Le résultat est exactement la même présentation de la page :

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 des nouveaux réglages.

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

Évidemment ça 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 je change la couleur de fond dans le fichier :

Il suffit de recharger la page pour voir le résultat immédiatement :

Si on regarde le code généré par le navigateur on constate que le CSS a bien été construit :

Partie 4 : Bootstrap et son environnement

Dans cette dernière partie, nous allons voir comment optimiser son site pour la consultation sur différents supports et comment enrichir le framework avec des plugins.

Le responsive design

De nos jours on consulte de moins en moins le web sur un écran d'ordinateur. La prolifération de nouveaux supports (iPad, iPhone, iPod ) oblige les designers web à prendre en considération de nombreuses contraintes, la première étant la dimension différente de l’écran de tous ces supports. L'idéal est de créer des pages web qui s'adaptent automatiquement au support. On avait bien quelques possibilités d'adaptation avec CSS2 et HTML4 mais plutôt limités.

L'arrivée de CSS3 change la donne en apportant beaucoup plus de souplesse dans la spécialisation du style avec les Media Queries.

Comme ce sont des spécifications nouvelles, je vais faire une petite introduction informative avant de montrer en quoi Bootstrap peut nous aider aussi dans ce domaine.

Présentation

Présentation

Les Media Queries sont destinées à simplifier la création de pages web pour les rendre consultables sur des supports variés (tablette, portable ). Ce chapitre n'est qu'une introduction rapide à ce domaine qui mériterait à lui seul un tuto.

Avec les Media Queries on peut cibler ainsi :

La résolution

Le type de media

La taille de la fenêtre

La taille de l'écran

Le nombre de couleurs

Le ratio de la fenêtre (par exemple le 16/9)

Les plus courageux peuvent consulter directement .

La liste est longue, malheureusement peu de navigateurs actuels sont capables de digérer tout ça On se limite en général à la taille de l'affichage, l'orientation et parfois le ratio.

Je ne comprends pas la différence entre taille de l'écran et taille de la fenêtre !

Ah ! Bonne réflexion. Cette distinction n'a aucun sens pour les écrans d'ordinateurs mais trouve tout son intérêt pour les smartphones dont on peut modifier la dimension de la fenêtre. Il existe d'ailleurs une balise META viewport consacrée à traiter ce point particulier. Si on ne s'en occupe pas, tous les efforts que l'on fait avec les Media Queries sont vains.

Il faut donc prendre quelques précautions :

Code : HTML

On bloque le zoom : user-scalable=no

On fixe le zoom minimum : minimum-scale = 1

On fixe le zoom maximum : maximum-scale = 1

On ouvre la fenêtre à la largeur de l'écran : width=device-width

(merci à maxslayer44 pour les informations sur ce sujet)

Les trois derniers paramètres évoqués permettent de corriger des bugs d'affichage sous iOS5 lié à l'affichage retina (double résolution)

Il y a un site intéressant pour tester l'apparition sur mobile . Ou même , mais qui ne fonctionne que sur Chrome et encore en bêta avec quelques blocages intempestifs.

Syntaxe des Media Queries

Une media query est une expression dont la valeur est soit vraie, soit fausse. Voici un exemple dans du code CSS :

Code : CSS

@media est une règle apparue avec le CSS2. Elle permet à la base de cibler un media : écran, imprimante, projecteur Cette règle est reprise et étendue avec le CSS3. L'expression située entre parenthèses est évaluée, et si elle est "vraie" les règles situées dans le bloc sont prises en compte.

Ici l'expression est (max-width: 767px), elle se comprend facilement, elle est "vraie" si le support de visualisation de la page à une largeur d'affichage inférieure ou égale à 767px.

Oui mais on a pas spécifié de média là !

Oui parce qu'on veut prendre en compte tous les médias existants. Voici une syntaxe équivalente :

Code : CSS

On en profite pour voir qu'on peut combiner des éléments avec des opérateurs logiques.

Voici une autre expression avec le même opérateur logique :

Code : CSS

Ici on veut prendre en compte les règles du bloc si l'affichage se situe entre 768px et 979px.

Si on veut appliquer des règles lorsque l'orientation est "portrait" voici la syntaxe à utiliser :

Code : CSS

Un exemple sans Bootstrap

Je vous propose un exemple d’utilisation sur une page web. Voici le code HTML :

Code : HTML

<!DOCTYPE HTML>

<html> <head>

<meta charset="utf-8">

<title>Les Tigres</title>

<link href="/" rel="stylesheet" type="text/css">

</head>

<body>

<div class="container">

<header><img src="/" alt="Bannière"></header>

<nav>

<ul>

<li><a href="#">Accueil</a></li>

<li><a href="#">Liens</a></li>

<li><a href="#">Témoignages</a></li>

<li><a href="#">Références</a></li>

</ul>

</nav>

<section>

<p>Je suis passionné par les <strong>tigres</strong> depuis très longtemps. Ce site a été construit en <em>hommage à ces merveilleux félins </em></p>

<p>Voici ce qu'en dit le wikipedia :</p>

<p></p>

<blockquote>Le Tigre (Panthera tigris) est un mammifère carnivore de la famille des félidés (Felidae) du genre Panthera. Aisément reconnaissable à sa fourrure rousse rayée de noir, il est le plus grand félin sauvage et l'un des plus grands carnivores du monde.

L'espèce est divisée en neuf sous-espèces possédant des différences mineures en termes de taille ou de comportement. Superprédateur, il chasse principalement les cerfs et les sangliers, bien qu'il puisse s'attaquer à des proies de taille plus importante comme les buffles.

Jusqu'au XIXe siècle, le Tigre était réputé mangeur d'hommes. La structure sociale des tigres en fait un animal solitaire ; le mâle possède un territoire qui englobe les domaines de plusieurs femelles et ne participe pas à l'éducation des petits.</blockquote>

</section>

<footer>

<p>Web design par studio des délires enchantés </p></footer>

</div>

</body> </html>

Et oui encore des tigres (toujours un petit clic sur l'image pour visualiser )

La mise en page est sobre avec une largeur fixée à 960px, une bannière, un menu latéral, un contenu et un pied de page. Elle est assurée par une feuille de style qui gère à la fois le positionnement des éléments et leur présentation avec une bonne partie consacrée à l'apparition correcte du menu. Voici la partie qui concerne la mise en page :

Code : CSS

Ce genre de page s'affiche tout à fait correctement sur un écran d'ordinateur, mais qu'en est-il sur une tablette ou un mobile ? Voici déjà une réponse :

Oui ça va mais si je passe en mode portrait ?

Aïe là ça se gâte :

Ce n'est même pas la peine d'essayer sur un mobile

On va maintenant utiliser les Media Queries pour arranger un peu la situation :

Code : CSS

On abandonne les valeurs fixes pour des pourcentages et on s'arrange pour ajuster le menu :

D'accord là c'est bon, mais sur un smartphone ?

On va essayer :

Bon là on a encore un problème

On va un peu améliorer notre approche en prévoyant deux cas :

Code : CSS

Pour une largeur inférieure à 768px on remet dans le flux et on rend les caractères plus gros, voilà le résultat :

Cette fois c'est beaucoup mieux

Un exemple avec Bootstrap

On va faire presque la même page en utilisant Bootstrap :

Code : HTML

<nav class="span2">

<ul class="nav nav-list">

<li><a href="#">Accueil</a></li>

<li><a href="#">Liens</a></li>

<li><a href="#">Témoignages</a></li>

<li><a href="#">Références</a></li>

</ul>

</nav>

<section class="span10">

<p>Je suis passionné par les <strong>tigres</strong> depuis très longtemps. Ce site a été construit en <em>hommage à ces merveilleux félins </em></p>

<p>Voici ce qu'en dit le wikipedia :</p>

<p></p>

</section>

</div>

<footer class="row">

<p>Web design par studio des délires enchantés </p>

</footer>

</div>

</body> </html>

Avec ce code CSS qui est très léger par rapport au précédent sans utilisation de Bootstrap :

Code : CSS

Le résultat est satisfaisant sur une tablette :

Mais il montre aussi vite ses limites dès qu'on veut passer en portrait :

Alors on va mettre en œuvre le fichier de Bootstrap dévolu aux Media Queries :

Code : HTML

Voilà maintenant le résultat :

Ça passe même sur un écran plus réduit :

Mais les caractères sont un peu petits pour une lecture aisée, il faudrait arranger un peu ce point. Mais Bootstrap gère déjà de façon très efficace la variété des affichages sans beaucoup d'effort

Des classes pour masquer ou dévoiler des éléments

Sur certaines page web, il y a parfois des éléments qui trouvent leur place sur un grand écran, mais deviennent superflus ou même impossibles à caser sur des écrans réduits. Il est alors utile de pouvoir faire disparaître des éléments. Bootstrap est équipé de quelques classes bien pratiques pour effectuer ces apparitions/disparitions. Voici le tableau extrait de la documentation :

Voici une page de test :

Code : HTML

Et le résultat sur ordinateur :

Sur tablette :

Sur téléphone :

Ça a l'air de marcher

Plugins et extensions

Dans ce dernier chapitre je me propose de recenser les ressources disponibles pour Bootstrap : thèmes, plugins, extensions et autres

Plugins

Bootstrap Image Gallery

C'est une extension du plugin Modals destinée à créer de beaux effets de navigation avec des images. Au programme :

Slideshow

Belles transitions

Navigation à la souris

Navigation au clavier

Passage en mode "plein écran"

Allez vite voir la démo

En fait c'est un peu un mélange entre la fenêtre modale et le carrousel.

La mise en oeuvre n'est pas bien difficile, d'autant que la documentation est bien faite et respecte les principes de celle de Bootstrap. Il faut aller chercher les fichiers sur le site.

Je vous propose un exemple, toujours avec les tigres (toujours un clic sur l'image)

Voici le code de cette page :

Code : HTML

} h1 { margin:20px 0 20px 20px; text-align:center;

}

</style>

</head>

<body>

<header>

<h1>Une petite démo du plugin "Bootstrap Image Gallery"</h1> </header>

<div class="container-fluid">

<div id="modal-gallery" class="modal modal-gallery hide fade">

<div class="modal-header"><a class="close" datadismiss="modal">×</a>

<h3 class="modal-title"></h3>

</div>

<div class="modal-body">

<div class="modal-image"></div>

</div>

<div class="modal-footer"><a class="btn modal-download" target="_blank"><i class="icon-download"></i> Télécharger</a><a class="btn btn-success modal-play modal-slideshow" dataslideshow="5000"><i class="icon-play icon-white"></i> Diaporama</a><a class="btn btn-info modal-prev"><i class="icon-arrow-left icon-white"></i> Précédent</a>

<a class="btn btn-primary modal-next">Suivant <i class="iconarrow-right icon-white"></i></a></div></div>

<div id="gallery" data-target="#modal-gallery" data-toggle="modalgallery">

<ul class="thumbnails">

<li class="span2"><a rel="gallery" href="/" title="Tigre 1"><img src="/"></a></li>

<li class="span2"><a rel="gallery" href="/" title="Tigre 2"><img src="/"></a></li>

<li class="span2"><a rel="gallery" href="/" title="Tigre 3"><img src="/"></a></li>

<li class="span2"><a rel="gallery" href="/" title="Tigre 4"><img src="/"></a></li>

<li class="span2"><a rel="gallery" href="/" title="Tigre 5"><img src="/"></a></li>

<li class="span2"><a rel="gallery" href="/" title="Tigre 6"><img src="/"></a></li>

<li class="span2"><a rel="gallery" href="/" title="Tigre 7"><img src="/"></a></li>

<li class="span2"><a rel="gallery" href="/" title="Tigre 8"><img src="/"></a></li>

<li class="span2"><a rel="gallery" href="/" title="Tigre 9"><img src="/"></a></li>

<li class="span2"><a rel="gallery" href="/" title="Tigre 10"><img src="/"></a></li>

<li class="span2"><a rel="gallery" href="/" title="Tigre 11"><img src="/"></a></li>

<li class="span2"><a rel="gallery" href="/" title="Tigre 12"><img src="/"></a></li>

<li class="span2"><a rel="gallery" href="/" title="Tigre 13"><img src="/"></a></li>

<li class="span2"><a rel="gallery" href="/" title="Tigre 14"><img src="/"></a></li>

<li class="span2"><a rel="gallery" href="/" title="Tigre 15"><img src="/"></a></li>

<li class="span2"><a rel="gallery" href="/" title="Tigre 16"><img src="/"></a></li>

<li class="span2"><a rel="gallery" href="/" title="Tigre 17"><img src="/"></a></li>

<li class="span2"><a rel="gallery" href="/" title="Tigre 18"><img src="/"></a></li>

<li class="span2"><a rel="gallery" href="/" title="Tigre 19"><img src="/"></a></li>

<li class="span2"><a rel="gallery" href="/" title="Tigre 20"><img src="/"></a></li>

<li class="span2"><a rel="gallery" href="/" title="Tigre 21"><img src="/"></a></li>

<li class="span2"><a rel="gallery" href="/" title="Tigre 22"><img src="/"></a></li>

<li class="span2"><a rel="gallery" href="/" title="Tigre 23"><img src="/"></a></li>

<li class="span2"><a rel="gallery" href="/" title="Tigre 24"><img src="/"></a></li>

<li class="span2"><a rel="gallery" href="/" title="Tigre 25"><img src="/"></a></li>

<li class="span2"><a rel="gallery" href="/" title="Tigre 26"><img src="/"></a></li>

</ul>

</div>

<br> </div> </div>

<script src="/"></script>

</body> </html>

Il faut déclarer la feuille de style du plugin :

Code : HTML

Ensuite la mise en œuvre de la fenêtre modale suit exactement les principes du plugin Modals :

Code : HTML

<div id="modal-gallery" class="modal modal-gallery hide fade"><div class="modal-header"><a class="close" datadismiss="modal">×</a><h3 class="modal-title"></h3>

</div>

<div class="modal-body">

<div class="modal-image"></div>

</div>

<a class="btn btn-primary modal-next">Suivant <i class="iconarrow-right icon-white"></i></a></div>

</div>

On place les images dans des balises <a> avec la référence rel="gallery" et le lien des images (une miniature pour le lien et l'image normale en cible):

Code : HTML

Il faut aussi faire appel, en plus de jQuery et Bootstrap à deux libraires Javascript :

Code : HTML

J'ai utilisé la classe thumbnails pour bien répartir les images.

Colorpicker and Datepicker for Twitter Bootstrap

Deux plugins intéressants qu'on peut trouver ici :

Colorpicker

Le Colorpicker est un plugin qui permet une saisie facilitée d'un code de couleur.

Vous trouver la documentation sur le site ainsi qu'un bouton de téléchargement des fichiers.

Voici les fichiers composant ce plugin :

Les images et les fichiers CSS et Javascript doivent être positionnés avec ceux de Bootstrap. Le fichier LESS est optionnel pour ceux qui voudraient modifier l'aspect de l'affichage.

Il faut déclarer la feuille CSS spécifique du plugin en plus de celle de Bootstrap :

Code : HTML

Il faut déclarer le fichier Javascript spécifique du plugin en plus de celui de jQuery:

Code : HTML

L'utilisation du plugin est facile, en voici un exemple :

Code : HTML

Et l'appel de jQuery correspondant pour initialiser le composant :

Code : JavaScript

Résultat en image (et en réel avec un petit clic ) :

On peut changer le format de définition de la couleur et déclarer une valeur initiale facilement : Code : HTML

Tester !

On peut aussi utiliser le format avec valeur de transparence apparue avec le CSS 3 :

Code : HTML

On peut aussi utiliser l'événement de changement de la valeur de la couleur, comme dans cet exemple ou j'applique la couleur au fond du formulaire :

Avec ce code :

Code : JavaScript

Datepicker

Le Datepicker est un plugin qui permet une saisie facilitée d'une date.

Vous trouver la documentation sur le site ainsi qu'un bouton de téléchargement des fichiers.

Voici les fichiers composant ce plugin :

Il faut déclarer la feuille CSS spécifique du plugin en plus de celle de Bootstrap :

Code : HTML

Il faut déclarer le fichier Javascript spécifique du plugin en plus de celui de jQuery:

Code : HTML

L'utilisation du plugin est facile, en voici un exemple :

Code : HTML

Et l'appel de jQuery correspondant pour initialiser le composant :

Code : JavaScript

Résultat en image (et en réel avec un petit clic ) :

On peut changer le format de définition de la date et déclarer une valeur initiale facilement :

Code : HTML

On peut aussi facilement franciser les appellations en intervenant au niveau du fichier :

Code : JavaScript

Il est possible d'utiliser l'événement de changement de date :

Code : JavaScript

Un petit TP pour ce contrôle : on veut deux zones de saisie, une pour une date de départ et une autre pour la date de retour, avec vérification d'antériorité de la date de départ. Il y a un exemple sur le site du créateur, on peut le simplifier, je vous laisse réfléchir

Voilà déjà l'effet souhaité :

Et une solution possible :

Secret (cliquez pour afficher)

Extensions

De jolis boutons

Génération du CSS

Un site propose de générer du code CSS pour améliorer l'aspect des boutons de Bootstrap. La mise en œuvre est facile. D'abord vous ajuster les paramètres avec des curseurs :

Ensuite vous récupérez le code CSS :

Le code généré crée la classe btn-custom :

Code : CSS

.btn-custom {

background-color: hsl(111, 62%, 4%) !important; background-repeat: repeat-x; filter:

progid:DXImageTransform.Microsoft.gradient(startColorstr="#45c62e", endColorstr="#051003");

background-image: -khtml-gradient(linear, lefttop, leftbottom, from(#45c62e), to(#051003));

background-image: -moz-linear-gradient(top, #45c62e, #051003); background-image: -ms-linear-gradient(top, #45c62e, #051003); background-image: -webkit-gradient(linear, lefttop, leftbottom, color-stop(0%, #45c62e), color-stop(100%, #051003));

background-image: -webkit-linear-gradient(top, #45c62e, #051003); background-image: -o-linear-gradient(top, #45c62e, #051003); background-image: linear-gradient(#45c62e, #051003); border-color: #051003 #051003 hsl(111, 62%, -7%); color: #fff !important; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.72);

-webkit-font-smoothing: antialiased; }

Il suffit d'utiliser la classe :

Code : HTML

Pour avoir un joli bouton :

Génération du HTML

Un site va encore plus loin en générant le code HTML spécialement pour Bootstrap :

Vous avez juste à cliquer sur les option et un petit clic vous donne le code HTML directement dans le presse-papier .

Des icônes vectorielles

Présentation

Le site Font Awesome propose une collection d'icônes spécialement conçues pour Bootstrap. La plupart sont des reproductions de celles déjà contenues dans Bootstrap :

Mais il y en a des nouvelles :

Le gros avantage de cette collection est que les images sont vectorielles, on peut donc les agrandir sans perte de qualité :

Installation

Pour mettre en œuvre ces icônes c'est tout simple. D'abord on télécharge les fichiers en cliquant sur le bouton :

Vous obtenez un certain nombre de fichiers répartis dans des répertoires. J'ai fait apparaître ci-dessous les plus importants :

Les polices vectorielles sont contenues dans le répertoire font.

L'appel de ces polices se fait dans la feuille de style :

Code : CSS

La façon la plus simple d'utiliser ces icônes est donc de placer le répertoire font avec ses fichiers sur son site ainsi que la feuille de style en faisant attention à bien pointer le répertoire des polices au niveau des url.

Il est aussi possible de recompiler Bootstrap avec LESS puisqu'il est prévu un fichier à importer.

On peut mettre des icônes partout, il y a plusieurs exemples bien conçus sur le site.

Kickstrap

Kickstrap est un projet ambitieux fondé sur Bootstrap. il propose des thèmes et des plugins supplémentaires. Au moment où j'écris ce cours il n'y a pas encore de version stable.

Les thèmes proposés sont ceux de bootswatch, j'en ai déjà parlé dans le chapitre sur la configuration.

Kickstrap intègre aussi HTML5 Boilerplate, un template HTML/CSS/JS assez complet.

Au niveaux des composants ajoutés on trouve :

chosen, des listes comportant de nombreuses possibilités de paramétrages :

, un fichier CSS qui permet de faire de belles animations :

, un plugin jQuery qui permet de faire de jolies fenêtres de notification :

Mais le plus grand intérêt de Kickstrap est sans doute qu'il se présente comme une solution intégrée avec un guide de démarrage plutôt bien fait :

La seule question par rapport à ce projet est : sera-t-il viable dans l'avenir ?

Intégration à divers environnements

Bootstrap possède une esthétique très élégante et des efforts ont été faits pour intégrer son aspect à divers environnements ou faciliter sa mise en oeuvre.

jQuery UI Bootstrap

jQuery UI rencontre un succès croissant et un thème a été réalisé pour obtenir un aspect correspondant à celui de Bootstrap.

jQuery-Mobile-Bootstrap-Theme

On peut trouver aussi un thème pour jQuery Mobile :

Django-bootstrap-toolkit

Une intégration en cours pour le framework Django est assez prometteuse.

Thèmes pour Wordpress

On trouve beaucoup de thèmes pour Wordpress. Voici quelques liens :

Thème pour Joomla

J'ai aussi trouvé un thème pour Joomla ici :

Extension pour Typo

On trouve aussi une extension pour Typo 3 :

Extension pour Yii

Yii est un framwork PHP qui possède désormais un thème pour Bootstrap :

Un template pour Photoshop

Un template gratuit pour photoshop ici :

Une extension pour Fireworks

Un thème pour Fireworks ici :

Une boîte à outils pour facebook

Pour développer pour facebook :

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 j'essaierai 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 Merci à maxslayer44 pour sa relecture du chapitre sur les responsive design et ses conseils.