Bootstrap 3

Benoît Philibert

Description

Conçu en 2011 par les équipes du réseau social Twitter, Bootstrap a su au fil 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 afin 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.

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 afin 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 enfin 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.

• 
  Premiers pas avec Bootstrap
  
  
  
  • 
    Installer Bootstrap
  
  
  • 
    Le doctype
  
  
  • 
    Des exemples de pré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
  
  
  • 
    Modifier l'apparence graphique de Bootstrap
  
  
  • 
    Installer LESS CSS
  
  
  • 
    Commencer avec LESS CSS
  
  
  • 
    Modifier 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
  
  
  • 
    Annexe : Les codes sources des exemples du livre
  
  
  
  

Sujets

• Sciences & Techniques
• Informatique
• Web Design
• Computers
• Conception de site Web

Informations

• Publié par: Editions Eyrolles
• Date de parution: 03 septembre 2015
• Nombre de lectures: 13
• EAN13: 9782212270822
• Langue: Français
• Poids de l'ouvrage: 1 Mo

Extrait

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.
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
À qui s’adresse cet ouvrage ? Aux développeurs et chefs de projet web qui souhaitent découvrir et mieux utiliser ce framework. Aux développeurs et administrateurs de sites et d’applications web ou mobiles Responsive . Aux étudiants en informatique souhaitant appréhender les techniques du Web.

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 tuto.com . 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
Benoît Philibert
ÉDITIONS EYROLLES 61, bd Saint-Germain 75240 Paris Cedex 05 www.editions-eyrolles.com
Attention : la version originale de cet ebook est en couleur, lire ce livre numérique sur un support de lecture noir et blanc peut en réduire la pertinence et la compréhension.
Attention pour lire les exemples de code présentés dans cet ebook, sélectionnez la police de votre support (smartphone, tablette, liseuse, etc) au minimum.
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.
DANS LA MÊME COLLECTION
C. C AMIN . – Développer avec Symfony2.
N°14131, 2015, 474 pages.
S. P ITTION , B. S IEBMAN . – Applications mobiles avec Cordova et PhoneGap.
N°14052, 2015, 184 pages.
H. G IRAUDEL , R. G OETTER . – CSS 3 : pratique du design web.
N°14023, 2015, 372 pages.
C. D ELANNOY . – Le guide complet du langage C.
N°14012, 2014, 844 pages.
K. A YARI . – Scripting avancé avec Windows PowerShell.
N°13788, 2013, 358 pages.
W. B ORIES , O. M IRIAL , S. P APP . – Déploiement et migration Windows 8.
N°13645, 2013, 480 pages.
W. B ORIES , A. L AACHIR , D. T HIBLEMONT , P. L AFEIL , F.-X. V ITRANT . – Virtualisation du poste de travail Windows 7 et 8 avec Windows Server 2012.
N°13644, 2013, 218 pages.
J.-M. D EFRANCE . – jQuery-Ajax avec PHP.
N°13720, 4 e édition, 2013, 488 pages.
L.-G. M ORAND , L. V O V AN , A. Z ANCHETTA . – Développement Windows 8 - Créer des applications pour le Windows Store.
N°13643, 2013, 284 pages.
Y. G ABORY , N. F ERRARI , T. P ETILLON . – Django avancé.
N°13415, 2013, 402 pages.
P. R OQUES . – Modélisation de systèmes complexes avec SysML.
N°13641, 2013, 188 pages.
SUR LE MÊME THÈME
R. R IMELÉ , R. G OETTER . – HTML 5 – Une référence pour le développeur web.
N°13638, 2 e édition, 2013, 752 pages.
E. D ASPET , C. P IERRE D E G EYER . – PHP5 avancé.
N°13435, 6 e édition, 2012, 870 pages.
S. P OLLET-VILLARD . – Créer un seul site pour toutes les plates-formes.
N°13986, 2014, 144 pages.
E. M ARCOTTE . – Responsive web design.
N°13331, 2011, 160 pages.
F. D RAILLARD . – Premiers pas en CSS 3 et HTML 5.
N°13944, 6 e édition, 2015, 472 pages.
Retrouvez nos bundles (livres papier + e-book) et livres numériques sur http://izibook.eyrolles.com
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 Tuto.com , 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
Un peu d’histoire
L’évolution d’une version vers une autre, c’est un peu comme refaire l’histoire ?
Qu’est-ce qu’un framework ?
La révolution est en marche
P REMIÈRE PARTIE Premiers pas avec Bootstrap
C HAPITRE 1 Installer Bootstrap
Télécharger Bootstrap
Petit tour du propriétaire
Format compilé de Bootstrap
Format source de Bootstrap
C HAPITRE 2 Le doctype
Présentation
La balise <head>
Les balises <meta>
Le CSS
Respond.js
Le JavaScript
C HAPITRE 3 Des exemples de présentation
Sur le s