Saufmentioncontraire,lecontenudecetouvrageestpubliésouslalicence: CreativeCommonsBY-NC-SA2.0 Lacopiedecetouvrageestautoriséesousréservedurespectdesconditionsdelalicence Textecompletdelalicencedisponiblesur:http://creativecommons.org/licenses/by-nc-sa/2.0/fr/ Mentionslégales Conceptioncouvertureetillustrationschapitres:amalgamimpression OpenClassrooms2014-ISBN:979-10-90085-62-6 Avant-propos Q uand on crée des sites web, on passe beaucoup de temps à composer des pages isoléesoudestemplates.CombinerleHTMLetleCSSn’estpastoujoursdesplus faciles. D’autre part, la multiplication des supports de visualisation (allant des petits écrans de smartphones à des écrans géants) complique le problème. On finit par secréerpeuàpeuunelibrairiepersonnellequiévolueaugrédesprogrèstechnologiques. C’estcequis’estpasséchezTwitter,oùchaquedéveloppeuravaitcréésalibrairieetoù il devenait vraiment difficile de maintenir une cohérence et surtout de faire évoluer les applications.C’estalorsqueMarkOttoetJaconbThorntonsesontattelésàlatâchede créer une librairie commune. Le succès fut rapide, tant au sein de cette entreprise qu’à l’extérieur, où elle a répondu à une attente évidente. Le fait d’adopter cette librairie m’a fait gagner un temps considérable, découvrir des aspects qui m’avaient échappés, et en comprendre d’autres qui demeuraient un peu abscons jusque là. Les critiques concernant l’homogénéisation visuelle des sites utilisant cette librairie ne résistent pas àlapratique,parcequ’ilestfaciled’organisersonproprevisuelunefoisqu’onmaîtrise un peu ses arcanes, ce qui est l’un des propos de cet ouvrage d’initiation. Bootstrap Vous créez des pages web et vous passez beaucoup (trop) 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 à outils. Bootstrap est un framework qui peut rendre votre vie 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. Qu’allez-vous apprendre en lisant ce livre? Ce livre est destiné à vous guider dans l’apprentissage de Bootstrap en abordant les notions de façon progressive et abondamment illustrée d’exemples pratiques. Je l’ai conçucommeleguidequej’auraisaiméposséderquandj’aidécouvertcettelibrairie.Au fil de son écriture, j’ai rencontré des notions qui m’avaient échappées ou sur lesquelles j’étais passé trop rapidement. À la fin de cette lecture, et si vous étudiez les exemples i CHAPITRE 0. AVANT-PROPOS proposés,vousserezcapablesd’utiliserefficacementcettelibrairieetdel’adapteràvos besoins particuliers. Voici les chapitres du cours et une présentation succincte de ce qu’ils proposent. 1. Mise en route : pour utiliser efficacement Bootstrap, vous devez déjà être convaincu de son utilité et 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. Nous aborderons éga- lement les Medias Queries que Bootstrap utilise pour que nos pages s’adaptent automatiquement au support utilisé pour les visualiser. 2. Une grille? L’organisation spatiale des pages web est l’une des premières pré- occupations lorsque l’on crée un site web. 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 informations? Faut-il prévoir un bas de page? Bootstrap ne répond évidemment pas à ces questions, mais en revanche il peut grandement vous faciliter la tâche, avec son système de grille, pour obtenir le résultat que vous souhaitez. Je vous propose une petite visite guidée... 3. Un peu de pratique : Nous avons vu en détail les possibilités de la grille de Bootstrap. Nous avons vu également comment faire des mises en pages adaptées à différents types de supports. Il est temps maintenant de mettre en application toutes ces connaissances avec des applications pratiques. 4. Éléments de base :Unepagewebcontientdutexteetdesimagesmaisaussiun certainnombred’élémentstrèsfréquents,commedeslistes,destableaux,desfor- mulaires, des icônes, des boutons... Créer une harmonie dans la présentation des tous ces éléments n’est pas une tâche aisée. Nous allons voir comment Bootstrap permet de créer un rendu visuel cohérent pour que tous ces éléments cohabitent de façon esthétique. 5. Lescomposants intégrés: Bootstrapproposedescomposantsbienpratiquesà mettre en œuvre : barre de navigation, effets typographiques, panneaux, thumb- nails... 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 œuvre... 6. Les plugins jQuery : jQuery est un framework Javascript devenu incontour- nable au fil des années. Les créateurs de Bootstrap l’ont choisi pour offrir des plugins esthétiques et faciles à mettre en œuvre, dans la plupart des cas sans mêmemettrelesdoigtsdansducode!Toutefois,sivousvoulezobtenirlemeilleur de ces plugins, il vous faudra un peu manipuler jQuery. 7. Configurer Bootstrap : Utiliser directement ce que nous offre Bootstrap c’est bien,maislemodifierpourlerendreexactementadaptéànosbesoinsc’estencore mieux. Alors, si vous voulez bidouiller Bootstrap, ce chapitre est fait pour vous! ii COMMENT LIRE CE LIVRE? Comment lire ce livre? Suivez l’ordre des chapitres Lisez ce livre comme on lit un roman : il a été conçu comme tel. Contrairement à beaucoupdelivrestechniquesoùilestcourantdelireendiagonaleetdesautercertains chapitres, ici il est très fortement recommandé de suivre l’ordre du cours, à moins que vous ne soyez déjà un peu expérimentés (et très sûr de vous). Pratiquez en même temps Pratiquez régulièrement. N’attendez pas d’avoir fini la lecture de ce livre pour faire vos propres essais; n’hésitez pas à modifier les codes donnés en exemples, afin de bien cerner le comportement de chaque instruction. Plus vous vous exercerez, et plus l’apprentissage sera rapide et efficace. Remerciements Rédiger un livre est toujours une aventure à la fois personnelle et partagée. Je suis déjàl’auteurde3ouvragesdansdesdomainestrèséloignésdel’informatique,maisqui m’ont donné l’occasion de découvrir le monde de l’édition. Je dois dire que le dialogue avec l’équipe d’OpenClassrooms, simple et rafraîchissant, change de celui que j’ai pu expérimenter par ailleurs. J’ai aussi envie de remercier les lecteurs de mon cours sur le site qui m’ont beaucoup encouragé. Je me suis ainsi rendu compte de son utilité. iii CHAPITRE 0. AVANT-PROPOS iv Table des matières Avant-propos i Bootstrap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . i Qu’allez-vous apprendre en lisant ce livre?. . . . . . . . . . . . . . . . . . . . i Comment lire ce livre? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . iii Suivez l’ordre des chapitres . . . . . . . . . . . . . . . . . . . . . . . . . iii Pratiquez en même temps . . . . . . . . . . . . . . . . . . . . . . . . . . iii Remerciements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . iii I Premiers pas 1 1 Mise en route 3 Un framework? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4 Les intérêts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4 Les inconvénients . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5 Découverte de Bootstrap. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5 Origine de Bootstrap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5 Contenu du kit . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5 Évolution de Bootstrap . . . . . . . . . . . . . . . . . . . . . . . . . . . 6 Installation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7 Installation de Bootstrap . . . . . . . . . . . . . . . . . . . . . . . . . . 7 Les CDN . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10 Une trame pour démarrer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11 v