Prenez en main bootstrap site du zero
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
Lire aussi .. 2
Bootstrap de Twitter : un kit CSS et plus ! 4
Partie 1 : Premiers pas .. 5
Mise en route 5
Un framework ? .. 5
Découverte de Bootstrap 6
Origine de Bootstrap 6
Contenu du kit . 6
Installation . 6
Une trame pour démarrer .. 8
Une grille ? . 10
Présentation .. 11
Le principe de la grille 11
Organisation de la grille 11
La grille fixe 13
Une seule rangée 13
Plusieurs rangées .. 13
Sauter des colonnes . 14
Imbrication d'éléments . 15
Un petit TP 16
La grille élastique 17
Un peu d'élasticité .. 17
Mise en page . 20
Mise en page fixe 20
Mise en page élastique 21
Un peu de pratique . 23
Un exemple de page . 23
Un petit TP . 27
Partie 2 : Mise en forme des éléments . 28
Eléments de base 29
Listes et tableaux 29
Les listes . 31
Les tableaux .. 32
Formulaires 36
Boutons, icônes et images . 51
Un petit TP . 58
Les composants intégrés 59
La navigation . 60
Une barre de navigation .. 60
La pagination . 65
Effets typographiques 67
Hero Unit . 67
Des libellés colorés 69
Des badges colorés .. 69
Thumbnails . 69
Alertes et barres de progression . 72
Alertes .. 72
Barres de progression .. 74
Partie 3 : Mise en forme avancée .. 77
Les plugins jQuery .. 77
Menu déroulant 77
Menu déroulant dans la barre de navigation . 77
Menu déroulant dans un bouton . 78
Sous-menu . 80
Fenêtre modale 81
Onglets . 84
Carousel .. 87
Info-bulles et Popover .. 92
Info-bulle .. 92
Popover 93
Boutons 96
Bouton bascule 96
Boutons effet "checkbox" 96
Boutons effet "radio" .. 97
Boutons pour attente de processus .. 97
Typeahead .. 99
Effet accordéon . 100
Un exemple de réalisation 105
Le résultat final à l’œuvre . 105
Organisation de la page 107
La barre de menu . 109 Les barres de boutons et les canvas .. 110
Le pied de page . 111
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
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
rel="shortcut icon" href=""> rel="apple-touch-icon-precomposed" sizes="114x114" href=""> rel="apple-touch-icon-precomposed" sizes="72x72" href="">
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
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
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 :
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
- , ce qui donne donc
- class="dropdown"> class="dropdown-toggle" data-
- class="dropdown"> href="#accueil" datatoggle="tab">Accueil
- class="dropdown"> class="dropdown-toggle" data-toggle="dropdown" href="#"> Livres class="caret">
- href="#policiers" datatoggle="tab">Policiers
- href="#romans" data-toggle="tab">Romans
- href="#contes" data-toggle="tab">Contes
- href="#témoignages" datatoggle="tab">Témoignages
- class="divider-vertical">
- id="fichier" class="dropdown"> class="dropdowntoggle" data-toggle="dropdown" href="#"> Fichier
- class="divider">
- id="modifier" class="dropdown"> class="dropdowntoggle" data-toggle="dropdown" href="#">Modifier
- class="dropdown-submenu"> tabindex="-1" href="#">Arranger
- class="dropdown-submenu"> tabindex="-1" href="#">Edition
- class="divider">
- class="span2"> rel="gallery" href="" title="Tigre 20"> src="">
- class="span2"> rel="gallery" href="" title="Tigre 21"> src="">
- class="span2"> rel="gallery" href="" title="Tigre 22"> src="">
- class="span2"> rel="gallery" href="" title="Tigre 23"> src="">
- class="span2"> rel="gallery" href="" title="Tigre 24"> src="">
- class="span2"> rel="gallery" href="" title="Tigre 25"> src="">
- class="span2"> rel="gallery" href="" title="Tigre 26"> src="">
- , 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
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
Si vous voulez me laisser un message
Comment m'avez-vous trouvé ?
for="ami" class="radio">
type="radio" name="origine" value="ami" id="ami" /> Par un ami
for="web" class="radio">
type="radio" name="origine" value="web" id="web" /> Sur le web
for="hasard" class="radio">
type="radio" name="origine" value="hasard" id="hasard" />
Par hasard
for="autre" class="radio">
type="radio" name="origine" value="autre" id="autre" />
Autre
for="textarea">Votre message :
id="textarea" rows="3">
Vous pouvez aggrandir la fenêtre
type="submit">Envoyer
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 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 . 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
class="add-on">€ class="input-mini" id="appendedPrependedInput" type="text"> class="btn" type="button">Vérifier Bootstrap comporte des classes de stylisation des zones de saisie selon l'état. Voici un exemple : 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. 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 : 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. Reprenons le formulaire de recherche en lui ajoutant une mise en forme du bouton : 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 : 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 : 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 : 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 : 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 . 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 : class="form-horizontal well" id="formulaire"> Si vous voulez me laisser un message Comment m'avez-vous trouvé ? for="ami" class="radio"> type="radio" name="origine" value="ami" id="ami" /> Par un ami for="web" class="radio"> type="radio" name="origine" value="web" id="web" /> Sur le web for="hasard" class="radio"> type="radio" name="origine" value="hasard" id="hasard" /> Par hasard for="autre" class="radio"> type="radio" name="origine" value="autre" id="autre" /> Autre class="control-label" for="textarea">Votre message : id="textarea" class="input-xlarge" rows="3"> La syntaxe est toute simple. On utilise une balise 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. 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 : La classe btn-toolbar permet de faire très facilement des barres de boutons. Voici un exemple : 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 : Le décalage constaté sur le deuxième groupe est dû à la règle : 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 : Et alors l'alignement devient celui qu'on attend : 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 : 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é Maintenant si on faisait une petite validation de ce formulaire à la sauce CSS3 ? 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 ! Une barre de navigation Bootstrap propose de superbes classes pour créer une barre de navigation. A la base une barre nécessite cette simple structure : La classe englobante est navbar. Elle est toute simple : 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 : .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 : La classe nav fixe l'apparence et le positionnement de tous les éléments. Elle doit être utilisée avec une balise 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 : On peut insérer un séparateur pour distinguer visuellement des groupes d'items avec la classe divider-vertical : On peut faire apparaître un titre avec des caractères plus visibles avec la classe brand : 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 : On peut fixer la barre en haut de la page du navigateur avec la classe navbar-fixed-top : Mais où sont passés les paragraphes ? Ils sont sous la barre ! Il suffit de regarder la classe pour comprendre : 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 : 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 : 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 : class="navbar-search pull-right" action=""> 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 : Bootstrap propose la classe pagination pour réaliser d'esthétiques paginations. Le principe est tout simple, voici un exemple de base : 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 : 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(){ Hero Unit La classe hero-unit permet de rendre le texte très visible. Prenons un exemple : 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 : Un peu de gris en fond, des coins arrondis et quelques marges. Ensuite on trouve une stylisation de Avec un net renforcement de la police. De même pour la balise : Pour créer des repères visuels textuels attractifs, il est possible de créer de beaux libellés : Les badges sont un peu comme les libellés mais pour des informations plus courtes, idéalement des nombres : Code : HTML 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 : 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 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 : 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 intégrerait la classe thumbnail. Tout le travail de stylisation est d'ailleurs réalisé par cette classe : 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. 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. Les alertes permettent de présenter un message visuellement significatif. Il suffit d'utiliser la classe alert : Trois autres classes permettent de changer l'aspect de l'alerte selon le résultat désiré : Si le texte doit être conséquent la classe alert-block règle les marges internes pour aérer un peu : 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 : Un bouton adapté par la classe close a été prévu pour la fermeture de l'alerte. On pourrait également mettre un bouton normal. 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 : 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 : Il existe aussi une version rayée et élégamment animée : 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 : 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 ! 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 : 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 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 : toggle="dropdown" href="#"> Témoignages class="caret"> 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 qui contient le libellé du lien du menu. Il faut aussi utiliser la classe dropdown-menu dans la balise On peut créer un menu déroulant activé par un bouton. Voici un code de base : 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 : 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 : 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 : L'astuce consiste en fait à créer deux boutons accolés. 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 : 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 : Le principe est simple : on crée un 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 : 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 : 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. Le plugin Togglable tabs permet de créer facilement des onglets. Voici un premier exemple simple : 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 : 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 : Bon, ça ne vous va encore pas et vous préféreriez les liens empilés à gauche ? Encadrez le code d'un 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 : Ou encore à droite avec la classe tabs-right : 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 : Voici un premier exemple simple : Une présentation Un autre présentation Et encore une autre ! Pour chaque item on place une balise pour référencer une image, on associe une légende avec une balise 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 : Voici le résultat : On peut ajouter des boutons pour faire défiler manuellement ? Il suffit de compléter le code avec ça : 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 : Mais on peut aussi détourner une classe de Bootstrap pour obtenir un effet sympathique sans ajouter de style : Le carousel comporte quelques options, par exemple le délai de défilement : 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. Le but est d'obtenir de jolies info-bulles de ce genre : Voici un premier exemple de mise en œuvre au niveau HTML : Le Tigre (Panthera tigris) est un rel="tooltip" href="#" dataoriginal-title="Classe de vertébrés"> 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 rel="tooltip" href="#" data-original-title='Synonyme de "carnassier"'> carnivores 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. On utilise des balises 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 : Il suffit d'utiliser la fonction tooltip avec le bon sélecteur, ici on a choisit la balise 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 : 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) : Le but est d'obtenir une grosse info-bulle de ce genre : Voici un premier exemple de mise en œuvre au niveau HTML : On utilise des balises 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 : 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 : 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 : Tester ! On peut aussi définir une action quelconque pour déclencher le popover que l'on veut. Regardez cet exemple au niveau HTML : 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 : 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. 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" : 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 : 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 : 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 : Ici encore si l'effet visuel ne vous convainc pas vous pouvez accentuer le résultat avec un peu de Javascript : Code : JavaScript 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é : 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 : 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 : On peut aussi améliorer l'aspect visuel en jouant avec la classe du bouton comme nous l'avons fait précédemment : 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 : Avec cet exemple vous ne verrez certainement l'effet qu'une fois dans votre navigateur étant donné qu'ensuite l'image sera en cache. 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 : $(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}); }); Rien de bien compliqué, il faut prévoir l'attribut data-provide dans la balise . 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 : Ici on a limité à 3 le nombre de propositions. Tester ici. 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 : 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 . 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 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 : Les plugins de Bootstrap 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 : Les plugins de Bootstrap Tester ! Il a fallu englober d'un Est-ce qu'on peut déclencher avec des boutons ? Oui on peut mais il faut adapter le code : Les plugins de Bootstrap class="btn btn-primary accordion-heading" datatoggle="collapse" data-parent="#monaccordeon" datatarget="#item1">Accordéon class="btn btn-primary accordion-heading" datatoggle="collapse" data-parent="#monaccordeon" datatarget="#item2">Fenêtre modale class="btn btn-primary accordion-heading" datatoggle="collapse" data-parent="#monaccordeon" datatarget="#item3">Carousel 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 : Les plugins de Bootstrap class="btn btn-primary accordion-heading" datatoggle="collapse" data-parent="#monaccordeon" datatarget="#item1">Accordéon class="btn btn-primary accordion-heading" datatoggle="collapse" data-parent="#monaccordeon" datatarget="#item2">Fenêtre modale class="btn btn-primary accordion-heading" datatoggle="collapse" data-parent="#monaccordeon" datatarget="#item3">Carousel 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. 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. 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. Pour l'esthétique j'ai traité un peu la bordure du container : Donc des coins arrondis, de l'ombre et une fixation de la hauteur. La barre de boutons nécessitait également quelques réglages : 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 : 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, 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 : href="#" id="enregistrer_image">Enregistrer l'image href="#" id="enregistrer_json">Enregistrer en JSON href="#" id="go_up">Envoyer à l'avant href="#" id="go_down">Envoyer à l'arrière href="#" id="go_front">Envoyer au premier plan href="#" id="go_back">Envoyer à l'arrière plan href="#" id="annuler">Annuler href="#" id="repeter">Répéter href="#" id="supprimer">Supprimer Chaque commande a reçu un identifiant pour être plus facilement repérable par le Javascript. Les barres de boutons sont enveloppées par une balise aside équipée de la classe span1 : href="#" class="btn active" rel="tooltip" data-originaltitle="Sélection"> class="icon-hand-up"> href="#" class="btn" rel="tooltip" data-originaltitle="Ligne"> class="icon-ok"> href="#" class="btn" rel="tooltip" data-originaltitle="Rectangle"> class="icon-stop"> href="#" class="btn" rel="tooltip" data-originaltitle="Ellipse"> class="icon-adjust"> href="#" class="btn" rel="tooltip" data-originaltitle="Coller"> class="icon-share"> href="#" class="btn" rel="tooltip" data-originaltitle="Supprimer"> class="icon-trash"> 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. Je vous parle des canvas depuis le début mais vous ne voyez pas cette balise dans le code, juste ça : 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 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) : class="form-inline well-small"> Ligne : id="typeligne" class="input-small"> Unie Sans id="width" type="text"> class="add-on">px id="colorligne" class="input-mini" type="text" readonly value=""> class="add-on"> style="background-color:#000"> Fond : 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. J'utilise des pages modale, avec le plugin associé, pour la confirmation d'un nouveau dessin, et aussi pour l'enregistrement au format JSON : 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 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é : Ici c'est encore plus pratique parce qu'on peut régler visuellement tous les changements : 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) : 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 : 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 : 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 : 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 : On peut aussi effectuer des opérations comme ici dans le fichier : 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. 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 : charset="utf-8"> config01 href="" rel="stylesheet" type="text/css"> href="" rel="stylesheet" type="text/css"> 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; } Mon beau site href="#"> class="icon-repeat"> Accueil href="#"> class="icon-book"> Livres href="#"> class="icon-film"> Films href="#"> class="icon-music"> Musiques Bienvenu sur mon site ! Il est bien entendu encore en construction Bientôt plein d'informations délirantes ici 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 : 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 : 10. Supprimer les styles devenus inutiles dans la page web : Le résultat est exactement la même présentation de la page : 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 : 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 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 : 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. Une media query est une expression dont la valeur est soit vraie, soit fausse. Voici un exemple dans du 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 : 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 : 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 : Je vous propose un exemple d’utilisation sur une page web. Voici le code HTML : charset="utf-8"> Les Tigres href="" rel="stylesheet" type="text/css"> Je suis passionné par les tigres depuis très longtemps. Ce site a été construit en hommage à ces merveilleux félins Voici ce qu'en dit le wikipedia : 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. Web design par studio des délires enchantés 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 : 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 : 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 : 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 On va faire presque la même page en utilisant Bootstrap : Je suis passionné par les tigres depuis très longtemps. Ce site a été construit en hommage à ces merveilleux félins Voici ce qu'en dit le wikipedia : 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. Web design par studio des délires enchantés Avec ce code CSS qui est très léger par rapport au précédent sans utilisation de Bootstrap : 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 : 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 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 : 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 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 : Stylisation selon l'état
Code : HTML
Mise en forme des listes de choix
Code : HTML
Boutons, icônes et images
Un joli bouton pour les formulaires
Code : HTML
Code : HTML
Code : HTML
Code : HTML
Grouper des boutons
Code : HTML
De jolies icônes
Code : HTML
Créer son pack d'icônes
Code : HTML
Une barre de boutons
Code : HTML
Code : HTML
Code : CSS
Code : CSS
Mise en forme des images
Code : HTML
Un petit TP
Secret (cliquez pour afficher)
Secret (cliquez pour afficher)
La navigation
Principe de base
Code : HTML
Code : CSS
Code : CSS
Code : HTML
. Tous les items de navigation apparaissent alors avec des balises . Voici un aperçu de la barre :
Barre avec un fond noir
Code : HTML
Insertion d'un séparateur
Code : HTML
Un titre dans la barre
Code : HTML
Code : HTML
Code : HTML
Code : CSS
Code : CSS
Code : HTML
Un formulaire de recherche dans la barre
Code : HTML
La pagination
Un exemple simple
Code : HTML
Un cas pratique
Code : HTML
Effets typographiques
Code : HTML
Code : CSS
:
Code : CSS
Code : CSS
Des libellés colorés
Code : HTML
Des badges colorés
Thumbnails
Code : HTML
. Les éléments sont ensuite positionnés logiquement dans des balises . Pour obtenir l'effet graphique chaque élément doit être stylisé par la classe thumbnail, soit dans une balise si on place un lien, soit dans une balise
Code : HTML
Code : HTML
Code : CSS
Alertes et barres de progression
Alertes
Code : HTML
Code : HTML
Code : HTML
Code : HTML
Barres de progression
Code : HTML
Code : HTML
Code : HTML
Code : HTML
Partie 3 : Mise en forme avancée
Code : HTML
Menu déroulant
Code : HTML
class="nav">
class="dropdown-menu">
qui doit englober le menu déroulant.
Menu déroulant dans un bouton
Code : HTML
Code : HTML
Code : HTML
Code : HTML
Sous-menu
Fenêtre modale
Code : HTML
Code : HTML
Code : HTML
Onglets
Code : HTML
Code : HTML
Code : HTML
class="nav nav-tabs">
class="dropdown-menu">
Code : HTML
Code : HTML
Code : HTML
Carousel
Code : HTML
Code : HTML
Code : JavaScript
Code : HTML
Code : CSS
Code : HTML
Code : JavaScript
Info-bulle
Code : HTML
Code : JavaScript
Code : JavaScript
Popover
Code : HTML
Code : JavaScript
Code : JavaScript
Code : JavaScript
Code : HTML
Code : JavaScript
Bouton bascule
Code : HTML
Code : HTML
Code : JavaScript
Boutons effet "checkbox"
Code : HTML
Boutons effet "radio"
Code : HTML
Boutons pour attente de processus
Code : HTML
Code : JavaScript
Code : JavaScript
Code : JavaScript
Typeahead
Code : HTML
Code : JavaScript
Effet accordéon
Code : HTML
Code : HTML
Code : HTML
Code : HTML
Code : HTML
Un exemple de réalisation
Le résultat final à l’œuvre
Organisation de la page
Organisation générale
Un peu de style
Code : CSS
Code : CSS
Code : CSS
La barre de menu
Code : HTML
class="nav">
class="dropdown-menu">
class="dropdown-menu">
class="dropdown-menu">
class="dropdown-menu">
Les barres de boutons et les canvas
Les barres de boutons
Code : HTML
Les canvas
Code : HTML
Le pied de page
Code : HTML
Les pages modales
Code : HTML
Configuration simplifiée
Configurer en ligne sur le site Stylebootstrap
Varier les styles
Un générateur de thèmes
Code : CSS
Code : CSS
Code : CSS
Code : CSS
Code : CSS
Exemple simple de configuration
Code : HTML
class="nav nav-list">
Code : CSS
Code : HTML
Code : CSS
Utilisation dynamique de LESS
Partie 4 : Bootstrap et son environnement
Présentation
Code : HTML
Syntaxe des Media Queries
Code : CSS
Code : CSS
Code : CSS
Code : CSS
Un exemple sans Bootstrap
Code : HTML
Code : CSS
Code : CSS
Code : CSS
Un exemple avec Bootstrap
Code : HTML
class="nav nav-list">
Code : CSS
Code : HTML
Des classes pour masquer ou dévoiler des éléments
Code : HTML
Plugins
Code : HTML