Cours gratuits » Cours informatique » Cours développement web » Cours Bootstrap » Bootstrap framework introduction pdf

Bootstrap framework introduction pdf

Problème à signaler:

Télécharger



★★★★★★★★★★3.5 étoiles sur 5 basé sur 1 votes.
Votez ce document:

Bootstrap 3

Le framework

100 % web design


Bootstrap 3 Le framework

100 % web design

Conçu en 2011 par les équipes du réseau social Twitter, Bootstrap a su au fi l des années s’imposer auprès des web designers et intégrateurs de la planète souhaitant créer avec plus de facilité des sites web évolués. Aujourd’hui, Bootstrap est un des projets les plus suivis sur GitHub et sa communauté ne cesse de croître.

Une référence pour les développeurs et intégrateurs web

L’objectif de cet ouvrage est de comprendre comment fonctionne le framework Bootstrap afi n de rapidement concevoir votre site Internet. De la découverte du Responsive design ou des enjeux Mobile First à la prise en main de LESS CSS, vous monterez en compétences, chapitre après chapitre. À terme, vous pourrez vous servir de Bootstrap en totale autonomie.

<

b>De nombreux exemples commentés

Ce livre s’adresse à toutes les personnes souhaitant utiliser Bootstrap. Que vous soyez intégrateur, web designer, passionné ou débutant, vous apprendrez pas à pas à exploiter le framework. Seules des bases en HTML et CSS sont recommandées afi n de débuter sereinement l’apprentissage. Ce livre abordera également toutes les opportunités techniques et stylistiques que propose le framework. Et plutôt que de se contenter de vous faire découvrir les bases de Bootstrap 3, cet ouvrage propose enfi n de nombreux codes sources commentés pour concevoir de véritables projets web : d’une galerie d’images à un carrousel animé en passant par une page web complète.

Au sommaire

Premiers pas avec Bootstrap • Installer Bootstrap • Le doctype • Des exemples de p résentation • Système de grille • Typographie • Boutons • Navigation • Les tableaux • Les formulaires ou formes • Les images • Bootstrap, les méthodes avancées • Animer avec jQuery • Varier les composants • Utiliser les Glyphicons • Modifi er l’apparence graphique de Bootstrap • Installer LESS CSS • Commencer avec LESS CSS • Modifi er Bootstrap avec LESS CSS • Découvrir SASS • Customiser Bootstrap • Créer et intégrer avec Bootstrap • Créer un carrousel animé • Créer une galerie d’images •

Recréer une page complexe avec LESS CSS • Les codes sources des exemples du livre

 

Benoît Philibert est web designer UI/UX depuis 10 ans. Passionné par le Web et le graphisme, c’est tout naturellement qu’il s’est tourné vers la création de sites Internet et d’applications mobiles. Totalement autodidacte,

Benoît enseigne à l’université Lyon 1 depuis 5 ans et propose par ailleurs de nombreux tutoriels vidéo sur la plate-forme . Grand amateur du framework

Bootstrap depuis ses débuts, Benoît l’utilise au quotidien dans ses créations. Fortement attaché aux enjeux mobile et Responsive design, il vante les mérites du framework qu’il juge « aussi simple qu’effi cace pour des besoins d’intégrations rapides et propres ».


Bootstrap 3 Le framework

100 % web design


DANS LA MÊME COLLECTION

C. Camin. – Développer avec Symfony2. N°14131, 2015, 474 pages.

S. Pittion, B. SieBman. – Applications mobiles avec Cordova et PhoneGap. N°14052, 2015, 184 pages.

H. Giraudel, r. Goetter. – CSS 3 : pratique du design web. N°14023, 2015, 372 pages.

C. delannoy. – Le guide complet du langage C. N°14012, 2014, 844 pages.

K. ayari. – Scripting avancé avec Windows PowerShell.  N°13788, 2013, 358 pages.

W. BorieS, o. mirial, S. PaPP. – Déploiement et migration Windows 8. N°13645, 2013, 480 pages.

W. BorieS, a. laaChir, d. thiBlemont, P. lafeil, f.-X. Vitrant. – Virtualisation du poste de travail Windows 7 et 8 avec Windows Server 2012

N°13644, 2013, 218 pages.

J.-m. defranCe. – jQuery-Ajax avec PHP. N°13720, 4e édition, 2013, 488 pages.

L.-G. morand, l. Vo Van, a. ZanChetta. – Développement Windows 8 - Créer des applications pour le Windows Store. N°13643, 2013, 284 pages.

Y. GaBory, n. ferrari, t. Petillon. – Django avancé. N°13415, 2013, 402 pages.

P. roqueS. – Modélisation de systèmes complexes avec SysML. N°13641, 2013, 188 pages.

SUR LE MÊME THÈME

R. rimelé, r. Goetter. – HTML 5 – Une référence pour le développeur web. N°13638, 2e édition, 2013, 752 pages.

E. daSPet, C. Pierre de Geyer. – PHP5 avancé. N°13435, 6e édition, 2012, 870 pages.

S. Pollet-Villard. – Créer un seul site pour toutes les plates-formes. N°13986, 2014, 144 pages.

E.       marCotte. – Responsive web design. N°13331, 2011, 160 pages.

F.       draillard. – Premiers pas en CSS 3 et HTML 5. N°13944, 6e édition, 2015, 472 pages.

Retrouvez nos bundles (livres papier + e-book) et livres numériques sur


Bootstrap 3 Le framework

100 % web design

Benoît Philibert


ÉDITIONS EYROLLES

61, bd Saint-Germain

75240 Paris Cedex 05

En application de la loi du 11 mars 1957, il est interdit de reproduire intégralement ou partiellement le présent ouvrage, sur quelque support que ce soit, sans l’autorisation de l’Éditeur ou du Centre Français d’exploitation du droit de copie, 20, rue des Grands Augustins, 75006 Paris.

© Groupe Eyrolles, 2015, ISBN : 978-2-212-14132-0

À mon fils, Léon.


 

Avant-propos

 

Il n’y a pas si longtemps, un créateur de sites Internet s’occupait de l’interface, du design, de l’intégration, du développement, de la mise en ligne et de la gestion quotidienne du site. Actuellement, chaque tâche représente au minimum un métier.

Les frameworks sont ensuite venus améliorer le « workflow » quotidien des intégrateurs et des développeurs. Auparavant, les sociétés éditaient des logiciels de conception censés faciliter le travail des créateurs de sites Internet. De nos jours, les frameworks tels que Bootstrap réunissent autour d’un programme toute une communauté. C’est cette dernière qui fait la force d’un framework.

Bootstrap est ce que l’on appelle un « framework CSS ».

Il intègre de nombreux composants offrant la possibilité d’ajouter progressivement des éléments, à la manière d’un puzzle. Régi par des règles d’intégration strictes, il vous guidera au cours de la réalisation en suivant les normes du W3C.

W3C

W3C, qui signifie World Wide Web Consortium, est un organisme visant à promouvoir l’universalité des technologies web telles que HTML, XML, PNG, etc.

En 2015, les enjeux de l’intégration tournent autour du Responsive design. L’utilisation d’Internet sur les smartphones s’est démocratisée. Il est donc logique que Bootstrap propose une réflexion Mobile first anticipant l’affichage sur mobile. La navigation et la lecture doivent être facilitées. Le framework intègre de nombreux composants et media queries évitant d’être confronté aux problématiques de compatibilité des mobiles et des navigateurs Internet.

Ce livre s’adresse à toutes les personnes souhaitant commencer à utiliser Bootstrap. Que vous soyez intégrateur, web designer, passionné ou débutant, vous apprendrez pas à pas à utiliser le framework. Seules des bases en HTML et CSS sont recommandées afin de débuter sereinement l’apprentissage. Ce livre abordera toutes les opportunités techniques et stylistiques que propose le framework.

Dans une première partie, nous ferons connaissance avec Bootstrap et présenterons l’organisation de sa grille, de ses principaux composants et du système de navigation.

Nous aborderons par la suite l’utilisation des plug-ins jQuery, ainsi que des langages préprocesseurs LESS CSS et SASS. Cela vous donnera une vue complète et détaillée de Bootstrap, pour commencer à intégrer votre premier projet.

Enfin, nous passerons à la pratique en apprenant à personnaliser l’apparence stylistique du framework avec CSS et LESS CSS. Nous nous exercerons à reproduire la page de présentation du navigateur Google Chrome en guise d’exercice final.

À la fin de cette lecture, vous serez capable de réaliser des projets web complexes et dynamiques grâce à Bootstrap et à l’utilisation du langage préprocesseur LESS CSS.

Remerciements

Je remercie les différentes personnes ayant croisé mon parcours professionnel depuis 2010 et m’ayant permis de m’épanouir dans mon travail. Il me faut tout d’abord citer Nicolas Chaunu, fondateur et gérant de la plate-forme , dont les conseils et l’expérience m’inspirent dans mes projets.

Véronique Cohen, responsable de la licence professionnelle e-business à l’université Lyon 1, m’a également donné la chance d’enseigner, durant ces cinq dernières années, le web design.

Plus généralement, je souhaite remercier tous les professionnels m’ayant fait confiance. Je pense particulièrement à Jean-Louis Cohen, artiste peintre muraliste, qui m’a permis de faire mes premiers pas dans la création de sites Internet, et à Gabriel Bondaz, dirigeant de l’agence IDCI-Consulting, avec qui j’ai commencé l’apprentissage des langages HTML et CSS.

De façon plus personnelle, je remercie du fond du cœur celle qui a lu et corrigé la moindre phrase de ce livre, sans forcément y comprendre un mot : ma compagne, Nelly.

Table des matières

 

Introduction .. 1

Un peu d’histoire . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1

L’évolution d’une version vers une autre, c’est un peu comme refaire l’histoire ? . . . .2

Qu’est-ce qu’un framework ?  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .3

La révolution est en marche  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .4

PREMIÈRE PARTIE

Premiers pas avec Bootstrap ..7

1

Installer Bootstrap 9

Télécharger Bootstrap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .9

Petit tour du propriétaire  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .10 Format compilé de Bootstrap  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .11

Format source de Bootstrap  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .12

CHAPITRE . 2

Le doctype . 13

Présentation .. 13

La balise <head> . 14

Les balises <meta> 14

Le CSS 15

.. 16

Le JavaScript . 16

 

CHAPITRE 3

Des exemples de présentation 19

Sur le site officiel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .19

Exemple de présentation d’un blog  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .20

CHAPITRE 4

Système de grille . 23

Notions de base sur les grilles  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .23 Le conteneur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .24

La ligne  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .25

Les colonnes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .25

Mise en pratique de la grille  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .26

Définir les blocs de 12 colonnes destinés aux écrans Extra Small  . . . . . . . . . . . . .26 Définir les colonnes de 6 destinées aux écrans Medium . . . . . . . . . . . . . . . . . . . .27

Les propriétés d’affichage non définies explicitement  . . . . . . . . . . . . . . . . . . . . .28

Les situations particulières . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .29

Le wrapping  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .29 Décalage sur plusieurs colonnes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .29 Imbrication de blocs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .30

Les classes push et pull . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .31

Les classes visible et hidden  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .32

CHAPITRE 5

Typographie 35

Les titres . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .35

Corps de texte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .37

Le paragraphe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .37 Surligner du texte  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .37 Barrer du texte  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .38

Souligner du texte  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .38

Mettre un texte en gras ou en italique  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .39

Alignements et transformations  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .39

Aligner du texte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .39

Transformer du texte : majuscules/minuscules  . . . . . . . . . . . . . . . . . . . . . . . . . .40

Les listes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .40 Liste non triée . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .40

Liste triée . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .41 Liste non stylisée . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .41

Liste en ligne  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .42

Liste de description  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .42

Liste de description horizontale  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .43

Autres mises en forme  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .43 Intégrer du code  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .43 Les citations  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .44 Les abréviations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .45

Le bloc adresse  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .46

CHAPITRE 6

Boutons . 47

Présentation  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .47 Les tailles  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .49 Les états . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .50


CHAPITRE 7

Navigation .. 51 tabs  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .51 pills  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .52 navbar  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .53 La balise <nav>  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .54 Les classes .container et .container-fluid  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .54 La classe .navbar-header . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .55

La classe .navbar-collapse . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .56

Les éléments additionnels . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .57 Les classes .fixed-top et .fixed-bottom . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .58 breadcrumbs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .58 pagination  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .59 Découverte de la pagination  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .59 Les états de pagination . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .60

Les tailles  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .62 pager  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .62

CHAPITRE 8

Les tableaux 65

Mise en place  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .65

Les mises en forme  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .66 table-striped  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .66 table-bordered . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .67 table-hover  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .67 table-condensed  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .68 Les classes contextuelles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .68

Le Responsive . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .69

CHAPITRE 9

Les formulaires ou formes . 71

Les différents types de formulaires  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .71 input  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .72 textarea . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .72 select  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .72 checkbox . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .73 radio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .74 La balise de classe .input-group . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .74 help-text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .76

Les alignements  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .76 form-inline . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .76 form-horizontal . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .77

Les autres alignements disponibles  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .78

Les états des formulaires  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .78 disabled  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .78 readonly  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .79

Validation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .80 Appliquer les états de validation à un input . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .  80

Appliquer les états de validation à une checkbox. . . . . . . . . . . . . . . . . . . . . . . . . . .  81

Les tailles  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .82 Augmenter la hauteur. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .  82

Augmenter la hauteur d’un élément horizontal. . . . . . . . . . . . . . . . . . . . . . . . . . . .  82

CHAPITRE 10

Les images 85

Des images Responsive  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .85

Les différents formats  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .86

DEUXIÈME PARTIE

Bootstrap, les méthodes avancées 87

CHAPITRE 11

Animer avec jQuery 89

Transitions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .89

Boutons  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .90 Définir l’état de chargement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .90

Définir l’état activé  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .91 Ajouter un menu déroulant . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .92 Cases à cocher (checkboxes)  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .94

Bouton radio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .95

Messages cachés  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .96 Messages surgissant au clic (popover)  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .96

Messages surgissant au survol  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .98

Onglets  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .99 Intégrer le code HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .99 Définir le code JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .101

Ajouter un effet fade  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .101

Effet de glissement  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .102 Activer un élément avec un lien . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .102 Activer un élément avec un bouton  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .103

Utiliser un effet accordéon  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .103

Carrousel d’images  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .105 Créer la structure . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .105 Ajouter une légende . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .108

Préciser les options  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .109 Menu fixe et navigation verticale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .109

Fenêtre dynamique  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .113 Intégrer une première fenêtre dynamique . . . . . . . . . . . . . . . . . . . . . . . . . . . . .113 Gérer les tailles  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .116 Afficher la fenêtre dynamique à l’ouverture d’une page  . . . . . . . . . . . . . . . . . . .116

CHAPITRE 12

Varier les composants 117

Liste déroulante  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 117 Modifier la balise <li> parente . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118 Modifier la balise <a> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118

Ajouter la liste déroulante . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118

Boutons groupés . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 119 Intégrer un groupe de boutons  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 119

Intégrer une barre d’outils . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 120

Contrôler la taille et l’alignement  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 121

Alertes  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 122 Créer une alerte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 122 Insérer un lien . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 123

Insérer des boutons  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 124

Étiquettes et badges . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 125 Créer des étiquettes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 125

Créer des badges  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 126

Panneau structuré  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127

Créer la structure . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127 Créer le corps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127 Créer l’en-tête . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127

Créer le bas de page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 128 Personnaliser avec les classes contextuelles . . . . . . . . . . . . . . . . . . . . . . . . . . . . 129

Quelques intégrations possibles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 130 Accroche jumbotron  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 131

Barres de progression . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 133 Créer la structure . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 133

Intégrer une étiquette . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 134 Personnaliser avec les classes contextuelles . . . . . . . . . . . . . . . . . . . . . . . . . . . . 134 Empiler les barres de progression  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 136

Animer une barre de progression . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 137

Intégration adaptable . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 137

CHAPITRE 13

Utiliser les Glyphicons 141

Comprendre la structure  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 141

Insérer une Glyphicon . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 142 Insérer dans un bouton . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 142 Insérer dans une alerte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 143

Insérer dans un formulaire  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 143

CHAPITRE 14

Modifier l’apparence graphique de Bootstrap .. 145

Créer et lier son fichier CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 145

Modifier la typographie  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 147 Modifier la taille des titres  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 147 Modifier les couleurs <code> ou <kbd>  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 148

Changer l’apparence des boutons . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .150 Modifier la classe .btn. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .  150

Modifier les classes contextuelles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .  151

Modifier l’apparence du Jumbotron . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .152 Ajouter une image d’arrière-plan . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .  153

Centrer le texte et changer sa couleur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .  154

Changer les marges internes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .  155

Créer une grille sans padding  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .156

CHAPITRE 15

Installer LESS CSS . 159

Installer LESS CSS côté client . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .160

Installer LESS CSS côté serveur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .161

Installer avec Grunt . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .161

Installer avec un compilateur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .163

CHAPITRE 16

Commencer avec LESS CSS .. 165

Structurer avec les variables  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .165 Imbriquer les règles CSS avec le nesting  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .167 Importer des propriétés avec les mixins  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .169

Aller plus loin avec les mixins avancées  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .171 Définir une propriété aléatoire  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .171

Gérer des valeurs booléennes  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .172

Varier les couleurs  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .175 Utiliser les variables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .175

Éclaircir ou assombrir  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .176

Augmenter la transparence . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .177

Choisir une couleur dans un disque chromatique  . . . . . . . . . . . . . . . . . . . . . . .178

Jouer avec les opérations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .179 La multiplication . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .180

L’addition . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .182

Importer des fichiers  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .183 Importer un fichier LESS ou CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .183 Importer des media queries . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .183

Regrouper les variables dans un unique fichier  . . . . . . . . . . . . . . . . . . . . . . . . .183

CHAPITRE 17

Modifier Bootstrap avec LESS CSS . 187

Comprendre l’organisation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .187 Le fichier  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .189 Le fichier  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .190

Le fichier  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .191

Modifier le thème couleur  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .191 Modifier l’apparence des boutons  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .193

Créer un espace de connexion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .197 Créer la structure HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .197

Modifier une balise titre . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 199 Modifier la taille de la police . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 199 Modifier la couleur du texte. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 200

Mettre le texte en majuscules . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 200

Modifier les éléments de formulaire . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 201 Modifier les couleurs générales . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 202 Intégrer la couleur des bordures pour le placeholder . . . . . . . . . . . . . . . . . . . . . . . . 203 Changer la couleur de l’ombrage lors du focus. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 203 Supprimer le border-radius . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 203

Augmenter la marge interne verticale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 203

CHAPITRE 18

Découvrir SASS .. 205

Écrire en SASS  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 205 Mixin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 206

Variable  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 206

Nesting . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 207

Le langage SCSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 207

Comparer LESS CSS et SCSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 208

CHAPITRE 19

Customiser Bootstrap 211

Changer les couleurs des boutons  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 212 Changer les media queries breakpoints  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 213

Télécharger le fichier . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 214

TROISIÈME PARTIE

Créer et intégrer avec Bootstrap 217

CHAPITRE 20

Créer un carrousel animé . 219

Créer la structure HTML  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 219

Personnaliser la classe .carousel-caption  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 222 Mettre en place le fichier  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 224 Mettre en forme la balise <h3>  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 226

Mettre en forme la balise <p> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 227

Mettre en forme le bouton d’action . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 228

CHAPITRE 21

Créer une galerie d’images . 233

Créer la structure HTML  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 234

Créer la grille  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 234

Créer la fenêtre dynamique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 237

Personnaliser avec LESS CSS  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 240 Adapter la grille . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 240 Personnaliser la fenêtre dynamique  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .242

Affiner avec les media queries . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .245

Manipuler JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .246

CHAPITRE 22

Recréer une page complexe avec LESS CSS .. 249

Mettre en place l’espace de travail  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .250

Créer la structure HTML  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .252 Créer le menu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .252

Mettre en place les sections  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .255 Créer la section 1 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .  255

Créer la section 2 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .  256 Créer les sections 3, 4 et 5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .  258

Créer la section 6 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .  260

Créer le pied de page  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .261

Créer la première ligne : liens vers les autres pages du site. . . . . . . . . . . . . . . . . . .  261

Créer la seconde ligne : liens légaux et langue . . . . . . . . . . . . . . . . . . . . . . . . . . . .  264 Personnaliser avec LESS CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .266 Modifier l’apparence de l’en-tête . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .267

Modifier l’apparence de la typographie  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .271 Adapter la balise <body>  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .273

Adapter la balise <h1>  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .273

Modifier l’apparence du bouton d’action  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .273 Adapter les variables liées au bouton  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .274 Modifier la classe .btn-lg  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .275

Définir une mixin pour le dégradé . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .275 Modifier le fichier . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .  275

Ajouter la mixin. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .  276

Modifier l’apparence du Jumbotron . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .277 Modifier la balise <h1> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .279 Modifier les balises <p> et <p> .lead  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .280 Modifier la balise <a> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .282

Ajuster les images  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .282

Modifier les balises <h2> et <h3>  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .283

Modifier l’apparence du pied de page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .284 Styliser la balise <footer>  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .284

Personnaliser les blocs de liens  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .285 Modifier le titre <h4>. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .  285

Ajuster les balises <a> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .  286

Organiser la seconde ligne  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .288

Affiner avec les media queries . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .289 Modifier l’espacement du Jumbotron . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .290

Ajuster l’apparence mobile  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .291 Adapter la navigation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .  291 Adapter le contenu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .  293 Adapter le pied de page. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .  294


XVII

Annexe : les codes sources des exemples du livre .. 299

Le carrousel animé . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 299

La galerie d’images  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 303

Une page complète avec LESS CSS  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 308

Index . 311


 

Introduction

 

Un peu d’histoire

Peut-être n’aviez-vous pas encore entendu parler de Bootstrap ; en revanche, ce n’est sûrement pas la première fois que vous entendez le nom de son créateur, Twitter. En effet, Bootstrap est un projet interne à Twitter lancé au milieu de l’année 2010 au sein de la multinationale et rendu publiquement disponible un an après, en août 2011.

Créé à l’origine par deux employés de la firme américaine, Bootstrap a dans un premier temps été pensé et adapté aux besoins de la société. Mark Otto et Jacob Thornton, les fondateurs du framework, avaient tout d’abord donné le nom de Twitter Blueprint à leur travail, en référence à l’un des précurseurs en la matière, Blueprint, créé en 2006 par Olav Frihagen Bjørkøy.

Twitter utilise Bootstrap depuis 2010 et continue de le faire pour la gestion d’outils internes qui standardisent le processus de workflow. En réglementant et standardisant les tâches du quotidien de ses développeurs, Twitter a su adapter avec Bootstrap un système proche de celui du philosophe et économiste Adam Smith : la division du travail. Chaque outil, dans le framework, a une tâche précise reliée aux autres pour concevoir, telle une production à la chaîne. Le terme « Bootstrapé » est employé couramment, au sein des start-up, pour définir un assemblage d’éléments distincts, formant une seule et même entité.

Aujourd’hui, Bootstrap est un des projets les plus suivis sur GitHub depuis 2012 et sa communauté ne cesse de croître. Le projet est édité sous une licence open source et permet à chacun d’entre nous de contribuer à l’amélioration du code et de l’utiliser de manière gratuite. En addition, une licence MIT est présente et doit être précisée dans toute utilisation du framework.

Bootstrap est actuellement disponible en version 3.3.4 et a donc subi deux évolutions significatives. Depuis la première évolution V2, Bootstrap adopte un support automatique et dynamique permettant à votre projet web de s’adapter de manière Responsive à tout type de taille d’écran. En d’autres termes, depuis 2012, votre projet web s’affiche correctement sur des supports de lecture aussi différents qu’un smartphone ou un écran d’ordinateur, grâce à la version 2+.

C’est une très grosse avancée technologique puisqu’elle touche de plus en plus de monde et cela ouvre le champ des possibles en matière de projets. Très souvent réservé à de la gestion interne, ou back office, Bootstrap se rend plus accessible à un public généraliste et offre des possibilités exhaustives pour les réalisations.

Avec l’arrivée de la version 3+, le framework devient encore plus complet. Il change tout d’abord d’aspect pour se fondre dans les tendances Flat design 2013 puis 2014. Son orientation se veut plus Responsive design, avec une ambition particulièrement prononcée pour le Mobile first. Ce dernier est une réflexion créative consistant à développer son projet du plus petit écran vers le plus grand. En connaissant l’évolution technologique de ces dernières années, il est naturel de s’orienter vers les produits mobiles. Différentes études de consommation annoncent une croissance extrêmement importante durant les dix à vingt prochaines années sur l’utilisation du mobile et l’accès à ce dernier. Aujourd’hui, Internet s’emporte déjà dans toutes les poches. Sur notre téléphone portable intelligent ou notre tablette dernier cri, qui par ailleurs séduit un public très hétérogène, plus rien ne nous échappe.

De plus, le framework offre une version CSS pré-compilée basée sur les langages LESS et SASS. Cela permet de dynamiser et générer de manière automatique vos feuilles de style. Nous ferons connaissance avec ces langages plus tard, au cours de notre découverte.

L’évolution d’une version vers une autre, c’est un peu comme refaire l’histoire ?

Nous pouvons légitimement nous poser cette question. C’est très certainement un des commentaires qui pourraient revenir le plus souvent dans la bouche des détracteurs du framework. Ils n’ont pas tort. Le changement a toujours du « bon », comme du « moins bon ». Tout dépend de la façon dont nous analysons les choses.

Oui, c’est handicapant

Il est clair que le passage d’une version à une autre n’est pas la chose la plus simple à réaliser. Dans un premier temps, cela nous oblige à nous adapter, à nous former. Même si la prise en main du framework est généralement assez rapide avec de bonnes bases HTML et CSS, le passage de la version 2 à la version 3 de Bootstrap a revu fondamentalement le système de grille. De nombreuses appellations de classes CSS ont changé, ce qui a tendance à perturber l’utilisateur durant quelques mois.

Cependant, l’apprentissage reste une étape indispensable et en perpétuelle évolution, d’autant plus dans le monde de l’informatique. Le travail déjà réalisé sous une version antérieure de Bootstrap peut être considéré comme le « vrai point noir ». Si nous souhaitons basculer notre code vers la nouvelle version, il doit suivre le nouveau système de grille, remplacer des classes CSS ou s’adapter aux autres changements fondamentaux.

Quand je parle de « travail déjà accompli », je pense surtout à de grandes, voire très grandes entreprises qui gèrent leur projets internes avec Bootstrap et même pour certains leur front office. Même si, dans la majorité des cas, les développeurs intègrent leur propre sur-couche stylistique, les fondations HTML se basent sur une version antérieure dorénavant non prise en compte par les mises à jour du framework. Lorsque le changement est radical comme entre V2 et V3, le travail de réadaptation du code peut s’avérer rapidement titanesque.

Si vous êtes dans ce cas aujourd’hui, Bootstrap ne nous oublie pas pour autant. La firme américaine propose une page spécialisée Migrating to v3.x, qui répertorie le moindre changement pour faciliter le passage à la version supérieure.

Non, il n’y a rien d’handicapant

En effet, passer à la version supérieure signifie bénéficier des dernières technologies du framework et du travail de toute une communauté. Comment s’en passer ? De plus, les changements radicaux de la version 2 à la version 3 se justifient totalement. Il est naturel, dans un premier temps, de se sentir perdu ; cependant, pour la bonne cause, Bootstrap nous remet dans le droit chemin et permet d’anticiper l’avenir du Web avec les nouvelles composantes telles que le Mobile first ou les langages LESS et SASS.

Introduction

3

 

Avancer vers la nouveauté est toujours synonyme de volonté d’amélioration du code en respectant à la lettre les bases des langages utilisés comme la version 5 de HTML ou la version 3 de CSS.

Pour terminer cette présentation, je vous invite à vous rendre sur le site Internet officiel, à l’onglet About, qui vous permettra de faire plus ample connaissance avec l’équipe, son histoire et l’orientation choisie pour la marque Bootstrap.

Qu’est-ce qu’un framework ?

Le terme framework, issu de la langue anglaise, signifie littéralement « structure ». Dans le Web, un framework est en effet un ensemble de composants organisés de manière à proposer un service technique complet à l’utilisateur. En d’autres termes, un framework est une collection d’outils techniques (HTML, CSS, JavaScript, etc.) simplifiant l’organisation ou la réalisation d’un projet web.

Il existe des centaines de frameworks destinés aux langages de programmation web comme PHP. Ces derniers s’adressent très souvent à un public averti et ciblé.

Bootstrap est un framework CSS. C’est par la suite que ce dernier a évolué vers des composants HTML et JavaScript qui permettent aujourd’hui d’offrir un service complet répondant parfaitement aux attentes du Web et de ceux qui le font évoluer. Depuis l’arrivée de Bootstrap en tant que service open source, de nouvelles possibilités s’offrent au plus grand nombre d’entre nous. N’importe quel individu est capable de réaliser sans effort particulier son projet web, qui demande pourtant en amont de nombreuses connaissances techniques.

La révolution est en marche

Aujourd’hui, dans le monde des entrepreneurs, il y a deux types de structures : les entreprises classiques (TPE, PME, PMI ou autres) et les start-up. Ces dernières se structurent de manière à avoir un rendement de croissance fortement accéléré. Cette structure colle parfaitement à l’image du framework Bootstrap. En effet, ce dernier est pensé et structuré de manière à gagner du temps dans l’exécution de projets informatiques. Il n’est donc pas étonnant que ses inventeurs travaillent dans l’une des plus grosses start-up mondiales. Il n’y a rien de surprenant non plus lorsque l’on entend parler Mélanie Archer, de la multinationale centenaire General Electric (pourtant loin d’une structure start-up), expliquer l’utilisation en interne du framework.

Bootstrap peut facilement être comparé à une grande enseigne multinationale suédoise, qui vend des meubles préfabriqués à assembler soi-même. Tout le monde a un produit de ce magasin chez soi et pourtant, nous ne sommes pas tous bricoleurs professionnels.

Comment expliquons-nous cela ? C’est très simple : nous suivons à la lettre le mode d’emploi avec un contenu étudié pour un assemblage facile et rapide. Il suffit de savoir utiliser un marteau, un tournevis et de mettre un peu d’huile de coude. Si l’on transpose cet exemple à Bootstrap, tout devient plus clair.

Ce framework est accessible à tous, et de manière extrêmement rapide. En effet, quelques journées nous suffiront à condition d’avoir un minimum de connaissances en langages HTML et CSS. Nous suivrons alors les règles d’intégration de Bootstrap à la lettre pour assembler pas à pas notre site Internet sans superflu et de manière directe.

Pour utiliser une seconde analogie, nous pouvons nous amuser à comparer Bootstrap avec de la pâtisserie. Les professionnels aiment généralement se démarquer de la cuisine en insistant sur la rigueur que demande ce métier. Encore une fois, nous devons suivre la recette au gramme près, sans quoi le résultat ne sera pas celui escompté. Même si certains ratés de la pâtisserie nous ont offert des saveurs inattendues, avec Bootstrap comme avec n’importe quel framework, les sorties de route ne sont pas autorisées.

Certes, on vient de dire que l’apprentissage est rapide et à la porté de tous. Toutefois, comme en cuisine, avec un peu de bonne volonté et d’envie, on arrive à de grandes choses.

À première vue, les avantages de Bootstrap sont les suivants :

d’un point de vue technique :

–    le Responsive design avec Mobile first ;

–    un code HTML 5 et CSS 3 riche et propre ;

–    une bibliothèque totalement open source ;

–    une architecture basée sur LESS et SASS ;

–    ;

et plus généralement :

–  une prise en main rapide ;

–  un langage régi par des règles universelles ;– un code en constante évolution ; – une communauté importante.

Les inconvénients de Bootstrap sont les suivants :

d’un point de vue technique :

–    des bases en HTML et CSS indispensables ;

–    légèrement plus lourd que la moyenne des autres frameworks ;

–    un style graphique CSS impersonnel ;

et plus généralement :

–    il faut suivre l’évolution du framework ;

–    il faut d’abord perdre du temps pour en gagner après ;

–    il existe d’autres frameworks CSS, comme Foundation ;

Introduction

5

 

–    la documentation est en anglais (même si des traductions sont disponibles) ;– il faut suivre des règles, ce qui est contraignant.

Nous venons de découvrir ensemble ce qu’est un framework, ce que représente Bootstrap, à qui et de quelle manière ce dernier s’adresse. Il est évident que Bootstrap est un outil très intéressant à utiliser dans un projet web pour de nombreuses raisons, comme le fait qu’il soit pensé Mobile first, qu’il soit basé sur LESS et SASS, et facile à prendre en main. Pour résumer, il n’est pas nécessaire d’aller plus loin que la première page du site Internet officiel de Bootstrap. On peut y lire cet enchaînement de phrases qui parlent d’elles-mêmes :

Designed for everyone, everywhere. Bootstrap makes front-end web development faster and easier. It’s made for folks of all skill levels, devices of all shapes, and projects of all sizes.

« Conçu pour tout le monde, n’importe où. Bootstrap rend le développement web plus facile et rapide. Il est pensé pour les personnes de tous niveaux, pour tous les types d’écrans et pour les projets de toutes tailles. »

B

   

 

1

Installer Bootstrap

 

Télécharger Bootstrap

Il n’y a rien de compliqué dans l’installation de Bootstrap. La première chose à faire est bien évidemment de nous rendre sur le site officiel du framework. Une fois que nous sommes sur la page de démarrage du site, trois options de téléchargement s’offrent à nous.

•   La première option de téléchargement inclut « une version compilée et minimisée » de Bootstrap. Comprenons par là que ce fichier est une version allégée qui ira au plus grand nombre de projets, proposant les fichiers principaux nécessaires au bon fonctionnement du framework.

•   La deuxième option propose, à l’inverse, une version complète comprenant les éléments de base nécessaires à l’utilisation de LESS CSS, ou la documentation de Bootstrap.

•   Enfin, la troisième et dernière option est un portage de Bootstrap vers SASS simplifiant l’intégration de projets dans Rails, Compass ou ceux basés uniquement sur SASS. Cette dernière option est peu utilisée par les web designers et intégrateurs front-end, qui préférent choisir entre les deux précédentes.

Pour finaliser cette première phase de contact avec Bootstrap, il est recommandé de télécharger le dossier compilé de la première option.

 

Petit tour du propriétaire

Maintenant que nous avons téléchargé Bootstrap, examinons sa structure. Dans un premier temps, nous pouvons observer que le framework se résume à très peu de fichiers (seulement dix dans sa version compilée). Le dossier est séparé en trois sous-parties classiques :

•   css (les fichiers de styles) ;

•   js (les fichiers JavaScript) ;

•   fonts (les icônes proposées par Bootstrap, que nous retrouverons un peu plus tard dans notre apprentissage).

Format compilé de Bootstrap

Installer Bootstrap

11

CHAPITRE 1

À l’intérieur du dossier css, nous trouvons le fichier qui est la version CSS et JavaScript compilée, ainsi que le fichier qui, en plus, est minimisé. Nous trouvons également le fichier bootstrap-theme dans les deux versions ; il sert à appliquer le style graphique de la version Bootstrap 2 dans un style moins à plat.

Exemple du style bootstrap-theme

B

Dans le dossier js sont placées les deux versions (compilée et minimisée) du fichier JavaScript de Bootstrap.

Enfin, dans le dossier fonts, il ne s’agit pas des polices de caractères, mais des icônes proposées par Bootstrap et qu’on appelle « Glyphicons ». Bootstrap mentionne sur son site qu’elles ne sont normalement pas gratuites mais que leur créateur les a généreusement rendues disponibles pour le framework.

Se procurer les Glyphicons

B

Lors de la création, nous pouvons utiliser le fichier compilé « source » tout comme le compilé et minimisé. Cependant, lors de la mise en production, je recommande fortement d’utiliser la version compilée et minimisée pour des raisons de rapidité.

Format source de Bootstrap

css js fonts examples

Dans le format source de Bootstrap, il existe plusieurs dossiers absents du format compilé. Le fichier less fait son apparition, comprenant tous les fichiers sources CSS de Bootstrap. Dans le fichier dist (qui signifie « distant »), nous retrouvons les fichiers compilés et minimisés de notre première option de téléchargement. Enfin, le dossier docs inclut la documentation Bootstrap.

2

 

Le doctype représente le code d’un document HTML type pour débuter avec Bootstrap. Il prend ainsi en charge les principaux fichiers nous permettant de commencer le développement du projet.

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

<title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->

    <link href="" rel="stylesheet">

    <!-- HTML5 shim and for IE8 support of HTML5 elements and media queries -->

    <!-- WARNING: doesn't work if you view the page via file:// -->

    <!--[if lt IE 9]>

      <script src=""></script>

      <script src=""></script>

<![endif]-->   </head>

  <body>

<h1>Hello, world!</h1>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src=" "></script>

    <!-- Include all compiled plugins (below), or include individual files as needed -->

    <script src=""></script>

  </body>

</html>

Bien entendu, Bootstrap nous propose un code HTML de version 5. Comprenons par là qu’il invite à intégrer notre projet de manière à ce que le code respecte au plus près les règles W3C.

Si nous souhaitons utiliser le doctype comme outil de démarrage, copions le code précédent ou rendons-nous sur Par la suite, ouvrons notre éditeur de texte préféré pour créer un nouveau fichier HTML en remplaçant l’intégralité du code généré par le doctype, et le tour est joué.

N’oublions pas de sauvegarder le document HTML à la source du dossier Bootstrap comme nous le montre le schéma suivant :

bootstrap css js fonts

Intéressons-nous maintenant, balise après balise, aux modifications apportées par Bootstrap.

Attention, il est important de garder la structure du dossier intacte pour que le doctype et les fichiers liés à l’intérieur soient correctement reconnus.

 <meta http-equiv="X-UA-Compatible" content="IE=edge">

Cette première balise interdit au navigateur Internet Explorer le « mode de compatibilité ». En d’autres termes, elle interdit à IE d’appliquer ses propres standards, qui ne sont optimisés que pour ce navigateur. Sinon, cela risque fortement d’endommager la lecture de votre site web.

 <meta name="viewport" content="width=device-width, initial-scale=1">

La meta viewport a été conçue par Apple pour afficher confortablement un site Internet sur les appareils mobiles. Cela applique sur tablette ou mobile un ratio similaire à celui de votre écran d’ordinateur, en prenant en compte 100 % de l’espace disponible.

Le doctype

15

CHAPITRE 2

Le scale est le niveau de « zoom initialement prévu » pour la lecture mobile. Dans l’exemple précédent, Bootstrap utilise un scale de 1, c’est-à-dire qu’il n’applique aucun zoom. Vous pouvez aller plus loin dans les réglages de cette meta, par exemple en interdisant de zoomer.

 

Figure 2–1 Nous pouvons voir sur le site l’apparence « mobile » (à gauche) et « site Internet classique » (à droite).

Pour affiner l’accessibilité mobile, nous aborderons plus tard les media queries et la grille Bootstrap, qui permettent d’adapter votre site Internet différemment. Cependant, avec cette meta viewport, même sans toucher aux media queries, votre site web est affiché de la même manière partout.

<!-- Bootstrap -->

<link href="" rel=" stylesheet">

Cette ligne de code sert à lier la feuille de style CSS à notre document HTML. La source indique qu’elle se trouve bien dans le dossier css.

<!-- HTML5 shim and for IE8 support of HTML5 elements and media queries ->

<!-- WARNING: doesn't work if you view the page via file:// -->

<!--[if lt IE 9]>

<script src=""></script>

<script src=""></script> <![endif]-->

Ces lignes permettent aux navigateurs ne prenant pas en charge le HTML 5 et les media queries de le faire. Cela concerne surtout le navigateur Internet Explorer 8.

Pour cela, nous utilisons créé par Scott Jehl en 2011 et disponible sous licence MIT sur Github.

B

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->

<script src=""></ script>

Au niveau du JavaScript, nous pouvons avoir deux points de vue différents.

Dans le doctype, Bootstrap nous invite à utiliser la bibliothèque jQuery en ligne. Entendons par là qu’il nous suggère directement la dernière version du plug-in. Concrètement, cela ne demande pas de mettre à jour la version jQuery utilisée dans le futur.

Toutefois, il n’est pas forcément recommandé d’utiliser cette option. jQuery est de ce fait sollicité à distance et non de manière locale dans notre dossier Bootstrap. C’est donc automatiquement plus lent. Si nous désirons remplacer la source jQuery en ligne par une source locale, il nous suffit de suivre le lien indiqué dans le doctype. Enregistrons alors le fichier directement via le navigateur au sein du dossier js de Bootstrap, puis lions-le à la place de celui du doctype ; sauvegardons et le tour est joué.

Attention

Il est important de bien lier le fichier jQuery avant celui de Bootstrap. Le ficher JavaScript de Bootstrap, composé des différents plug-ins, tels que Carrousel ou Collapse, nécessitent la bibliothèque jQuery pour fonctionner.

Nous devrions obtenir quelque chose comme cela :

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->

Le doctype

17

CHAPITRE 2

<script src=""></script>

De ce fait, la ligne du bas n’est plus à présenter. Elle nous confirme que le fichier est bien lié au document HTML.

<!-- Include all compiled plugins (below), or include individual files as needed --> <script src=""></script>


2