SlideShare une entreprise Scribd logo
1  sur  30
Initiation à Bootstrap
Mai 2018Abdoulaye Dieng
ESMT / LIPMEN 3 M@RDI (Marketing Digital)
Objectif
Prendre en main le framework CSS le plus utilisé
Objectifs opérationnels
• Positionner du contenu avec le système de grille
• Créer des barres de navigation
• Créer un fil d’Ariane
• Mettre en forme des listes
• Mettre en forme des tableaux
• Créer des formulaires
• Créer des boutons
• Mettre en forme des images
• Créer une page d’atterrissage
Sommaire
1) Grille
2) Barres de navigation
3) Fil d’Ariane
4) Listes
5) Tableaux
6) Formulaires
7) Boutons
8) Images
9) Page d’atterrissage
Présentation de Bootstrap
• Pb : comment standardiser la boîte à outils
de mise en forme des pages Web ?
• Framework HTML, CSS et JavaScript
contenant de nombreux composants prêts à
l’emploi : menus, boutons, tableaux, images,
formulaires, icônes, etc.
• Bootstrap est dévelopé par des ex-employés
de Twitter : Mark Otto et Jacob Thornton
• Bootstrap est publié en 2011 sur Github et en
devient le projet open source le plus
populaire en 2012
• Bootstrap est « mobile first » et permet le
responsive design
Installation de Bootstrap
• En local
1) Téléchargez la dernière version stable actuelle (11/05/18)
https://github.com/twbs/bootstrap/releases/download/v4.
1.0/bootstrap-4.1.0-dist.zip
2) Désarchivez dans votre répertoire racine
3) Fichiers de base à lier avec les pages HTML
• css/bootstrap.min.css
• js/ bootstrap.min.js (dépend de jQuery)
• En ligne
CDN (Content Network Delivery)
https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstr
ap.min.css
https://code.jquery.com/jquery-3.3.1.slim.min.js
https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstra
p.min.js
Grille
présentation
• Grille = découpage en lignes et en colonnes de la page
• Objectif : créer une mise en page en attribuant une ou
+sieurs colonne(s) aux contenus
• Nombre maximal de colonnes dans une ligne = 12
• Au delà de 12, les colonnes d’une ligne s’empilent grâce au
responsive
1 2 3 4 5 6 7 8 9 10 11 12
Largeur totale
1/2 1/2
2/3 1/3
Grille
devices
Très petit écran
(Smartphone)
Petit écran
(Tablette)
Écran moyen
(Ordinateur)
Écran large
(Ordinateur)
Valeur de
référence
< 768 px >= 768 px >= 992 px >= 1200 px
Prefixe de
classe
.col-xs- .col-sm- .col-md- .col-lg-
Conteneur
maximum
Automatique 750 px 970 px 1170 px
Grille
quelques règles
• Toute ligne (classe row dans une <div>) doit être incluse dans un
conteneur (classe container ou container-fluid dans une <div>)
• Seules les colonnes (<div> munie de la classe col-device-n avec
device = xs, sm, md ou lg et n = nombre de colonnes) doivent
être des enfants d’une ligne
• Tout contenu doit être inclus dans une colonne
• Une ligne contenant des colonnes peut être incluse dans une autre
colonne
• Décaler (.col-device-offset-n) un contenu de n colonnes vers la
droite
Grille
exemple
Grille
TP
• Ajoutez la classe well de Bootstrap à toute ligne
• Créez une classe box-col (fond blanc et bordure noire) à
ajouter à toute colonne
Barres de navigation
par défaut
• Syntaxe
 les classes navbar et navbar-default dans une <nav>
 Inclure, entre les balises de nav, une <ul> avec la classe nav
accompagnée de la classe navbar-nav
 li pour les items de navigation dont l’actif est repéré par la
classe active
• Exemple
Barres de navigation
à fond noir
• Syntaxe
Dans la <nav>, remplacez la classe navbar-default par la
classe navbar-inverse
• Exemple
Barres de navigation
fixées
• Syntaxe
Dans la <nav>, ajoutez la classe navbar-fixed-top ou la
classe navbar-fixed-bottom
Fil d’Ariane
• Fil d’Ariane : aide à la navigation permettant à l’internaute de se
localiser dans le site
• Syntaxe
 Classe breadcrumb dans <ul>
 Classe active pour définir l'élément actif de la liste
 Inclure une ancre dans chaque élément non-actif de la liste
• Exemple
Listes
sans style
• Syntaxe
classe .list-unstyled dans <ul> ou <ol>
• Exemple (à faire)
Listes
en ligne
• Syntaxe
classe .list-inline dans <ul> ou <ol>
• Exemple
Tableaux
lignes de séparation horizontales
• Classe table dans <table>
• Exemple
Tableaux
à rayures
• Classe table-striped dans <table>
• Exemple
Tableaux
bordures
• Classe table-bordered dans <table>
• Exemple (à faire)
Formulaires
contrôles occupent toute la largeur disponible
• Classe form-control dans text, textarea ou select
• Exemple
Formulaires
espacement des contrôles
• Classe form-group dans une <div> contenant un contrôle
et son label
• Exemple (à faire)
Formulaires
en ligne
• Classe form-inline dans <form>
• Exemple
Formulaires
horizontales
• Classe form-horizontal dans form
• Classe control-label dans label
• Utiliser les classes de grille pour aligner les labels et les
champs dans une disposition horizontale
• Exemple (à faire)
Boutons
types
• À la balise <button>, ajouter la classe btn accompagnée de
l’une des classes btn-default, btn-primary, btn-success,
btn-info, btn-warning, btn-danger ou btn-link
• Exemples
Boutons
dimensions
• Aux classes de base précédentes (exple : btn btn-default),
ajoutez l’une des classes btn-lg, btn-sm ou btn-xs
• La classe btn-block permet au bouton de s’étendre sur
toute la largeur de son conteneur
• Exemples
Images
bordures
• Ajouter à img l’une des classes img-rounded, img-circle ou
img-thumbnail
• Exemples
Images
responsive - centrage
• Classe img-responsive à img pour que l’image
s’adapte à son conteneur
• Classe center-block à img pour centrer l’image dans
son conteneur
Page d’atterrissage
présentation
• Page d’atterrissage (landing page) : page Web visant à accomplir
un objectif de conversion
• Qlq objectifs de conversion : vendre un produit ou un service,
inscrire à un newsletter, faire remplir un formulaire, abonner à un
blog, …
• Principaux contenus
 Contenus pertinents p/r à la page référente ou de provenance
 Titre qui incite l’internaute à poursuivre
 Bénéfices que retirera l’internaute
 Image illustrative du produit ou du service
 Bouton d’appel à l’action bien visible
Page d’atterrissage
à réaliser
Avec Bootstrap, créez une page d’atterrissage inspirée d’une
autre, trouvée sur le Web

Contenu connexe

Tendances

Développement d'un site web jee de e commerce basé sur spring (m.youssfi)
Développement d'un site web jee de e commerce basé sur spring (m.youssfi)Développement d'un site web jee de e commerce basé sur spring (m.youssfi)
Développement d'un site web jee de e commerce basé sur spring (m.youssfi)ENSET, Université Hassan II Casablanca
 
Fondamentaux java
Fondamentaux javaFondamentaux java
Fondamentaux javaInes Ouaz
 
Cours : les listes chainées Prof. KHALIFA MANSOURI
Cours : les listes chainées  Prof. KHALIFA MANSOURI Cours : les listes chainées  Prof. KHALIFA MANSOURI
Cours : les listes chainées Prof. KHALIFA MANSOURI Mansouri Khalifa
 
Cours complet Base de donne Bac
Cours complet Base de donne Bac Cours complet Base de donne Bac
Cours complet Base de donne Bac Amri Ossama
 
Les bases de l'HTML / CSS
Les bases de l'HTML / CSSLes bases de l'HTML / CSS
Les bases de l'HTML / CSSSamuel Robert
 
Créer des applications Java avec MongoDB
Créer des applications Java avec MongoDBCréer des applications Java avec MongoDB
Créer des applications Java avec MongoDBMongoDB
 
Examen principal- php - correction
Examen principal- php - correctionExamen principal- php - correction
Examen principal- php - correctionInes Ouaz
 
cours javascript.pptx
cours javascript.pptxcours javascript.pptx
cours javascript.pptxYaminaGh1
 
Cours python avancé
Cours python avancéCours python avancé
Cours python avancépierrepo
 
exposé en HTML
exposé en HTMLexposé en HTML
exposé en HTMLYaya Im
 
TP Git avancé DevoxxFR 2018 (exercices)
TP Git avancé DevoxxFR 2018 (exercices)TP Git avancé DevoxxFR 2018 (exercices)
TP Git avancé DevoxxFR 2018 (exercices)Jérôme Tamborini
 
Formation PHP
Formation PHPFormation PHP
Formation PHPkemenaran
 
Présentation de RMI Java
Présentation de RMI JavaPrésentation de RMI Java
Présentation de RMI JavaZakaria Bouazza
 

Tendances (20)

Développement d'un site web jee de e commerce basé sur spring (m.youssfi)
Développement d'un site web jee de e commerce basé sur spring (m.youssfi)Développement d'un site web jee de e commerce basé sur spring (m.youssfi)
Développement d'un site web jee de e commerce basé sur spring (m.youssfi)
 
Support de cours technologie et application m.youssfi
Support de cours technologie et application m.youssfiSupport de cours technologie et application m.youssfi
Support de cours technologie et application m.youssfi
 
Fondamentaux java
Fondamentaux javaFondamentaux java
Fondamentaux java
 
Cours : les listes chainées Prof. KHALIFA MANSOURI
Cours : les listes chainées  Prof. KHALIFA MANSOURI Cours : les listes chainées  Prof. KHALIFA MANSOURI
Cours : les listes chainées Prof. KHALIFA MANSOURI
 
Cours complet Base de donne Bac
Cours complet Base de donne Bac Cours complet Base de donne Bac
Cours complet Base de donne Bac
 
Les bases de l'HTML / CSS
Les bases de l'HTML / CSSLes bases de l'HTML / CSS
Les bases de l'HTML / CSS
 
Créer des applications Java avec MongoDB
Créer des applications Java avec MongoDBCréer des applications Java avec MongoDB
Créer des applications Java avec MongoDB
 
Examen principal- php - correction
Examen principal- php - correctionExamen principal- php - correction
Examen principal- php - correction
 
Introduction à Laravel
Introduction à LaravelIntroduction à Laravel
Introduction à Laravel
 
Html css
Html cssHtml css
Html css
 
Introduction à React
Introduction à ReactIntroduction à React
Introduction à React
 
Initiation html css
Initiation html cssInitiation html css
Initiation html css
 
cours javascript.pptx
cours javascript.pptxcours javascript.pptx
cours javascript.pptx
 
Bootstrap
BootstrapBootstrap
Bootstrap
 
Introduction JavaEE
Introduction JavaEEIntroduction JavaEE
Introduction JavaEE
 
Cours python avancé
Cours python avancéCours python avancé
Cours python avancé
 
exposé en HTML
exposé en HTMLexposé en HTML
exposé en HTML
 
TP Git avancé DevoxxFR 2018 (exercices)
TP Git avancé DevoxxFR 2018 (exercices)TP Git avancé DevoxxFR 2018 (exercices)
TP Git avancé DevoxxFR 2018 (exercices)
 
Formation PHP
Formation PHPFormation PHP
Formation PHP
 
Présentation de RMI Java
Présentation de RMI JavaPrésentation de RMI Java
Présentation de RMI Java
 

Similaire à Initiation à Bootstrap

Boots formation-bootstrap-sites-web-adaptatifs
Boots formation-bootstrap-sites-web-adaptatifsBoots formation-bootstrap-sites-web-adaptatifs
Boots formation-bootstrap-sites-web-adaptatifsCERTyou Formation
 
technologie web - part2
technologie web - part2technologie web - part2
technologie web - part2Benoît Simard
 
Dw005 formation-dreamweaver-cc-les-bases
Dw005 formation-dreamweaver-cc-les-basesDw005 formation-dreamweaver-cc-les-bases
Dw005 formation-dreamweaver-cc-les-basesCERTyou Formation
 
0 g170g formation-presentation-des-donnees-avec-le-module-tableau-de-ibm-spss
0 g170g formation-presentation-des-donnees-avec-le-module-tableau-de-ibm-spss0 g170g formation-presentation-des-donnees-avec-le-module-tableau-de-ibm-spss
0 g170g formation-presentation-des-donnees-avec-le-module-tableau-de-ibm-spssCERTyou Formation
 
Intégrer correctement un e-mail, c'est possible ! Démonstration en 1h30
Intégrer correctement un e-mail, c'est possible ! Démonstration en 1h30Intégrer correctement un e-mail, c'est possible ! Démonstration en 1h30
Intégrer correctement un e-mail, c'est possible ! Démonstration en 1h30Sébastien Lejeune
 
Dw008 formation-dreamweaver-csx-les-bases
Dw008 formation-dreamweaver-csx-les-basesDw008 formation-dreamweaver-csx-les-bases
Dw008 formation-dreamweaver-csx-les-basesCERTyou Formation
 
Drupal en bibliothèque (2008)
Drupal en bibliothèque (2008)Drupal en bibliothèque (2008)
Drupal en bibliothèque (2008)Nicolas Morin
 
BOOTSTRAP.pptx
BOOTSTRAP.pptxBOOTSTRAP.pptx
BOOTSTRAP.pptxtokikun
 
Panels, une autre façon de construire. DrupalCamp Paris 2013
Panels, une autre façon de construire. DrupalCamp Paris 2013Panels, une autre façon de construire. DrupalCamp Paris 2013
Panels, une autre façon de construire. DrupalCamp Paris 2013bellesmanieres
 
Drupal en bibliothèque (2009)
Drupal en bibliothèque (2009)Drupal en bibliothèque (2009)
Drupal en bibliothèque (2009)Nicolas Morin
 
Comment évaluer la qualité d'un site web selon les techniques d'intégration w...
Comment évaluer la qualité d'un site web selon les techniques d'intégration w...Comment évaluer la qualité d'un site web selon les techniques d'intégration w...
Comment évaluer la qualité d'un site web selon les techniques d'intégration w...Renoir Boulanger
 
Dw009 formation-dreamweaver-csx-les-bases-et-perfectionnement
Dw009 formation-dreamweaver-csx-les-bases-et-perfectionnementDw009 formation-dreamweaver-csx-les-bases-et-perfectionnement
Dw009 formation-dreamweaver-csx-les-bases-et-perfectionnementCERTyou Formation
 
Projet de semestre / 3ème partie / partage de contenus multimédia
Projet de semestre / 3ème partie / partage de contenus multimédiaProjet de semestre / 3ème partie / partage de contenus multimédia
Projet de semestre / 3ème partie / partage de contenus multimédiaLaurent Moccozet
 
Theming drupal8 - Meetup Paris - 26-mars-2015
Theming drupal8 - Meetup Paris - 26-mars-2015Theming drupal8 - Meetup Paris - 26-mars-2015
Theming drupal8 - Meetup Paris - 26-mars-2015Romain Jarraud
 
Desig formation-design-web-avec-photoshop-et-illustrator
Desig formation-design-web-avec-photoshop-et-illustratorDesig formation-design-web-avec-photoshop-et-illustrator
Desig formation-design-web-avec-photoshop-et-illustratorCERTyou Formation
 

Similaire à Initiation à Bootstrap (20)

Initiation à Bootstrap
Initiation à BootstrapInitiation à Bootstrap
Initiation à Bootstrap
 
Boots formation-bootstrap-sites-web-adaptatifs
Boots formation-bootstrap-sites-web-adaptatifsBoots formation-bootstrap-sites-web-adaptatifs
Boots formation-bootstrap-sites-web-adaptatifs
 
technologie web - part2
technologie web - part2technologie web - part2
technologie web - part2
 
Une Introduction à R
Une Introduction à RUne Introduction à R
Une Introduction à R
 
Dw005 formation-dreamweaver-cc-les-bases
Dw005 formation-dreamweaver-cc-les-basesDw005 formation-dreamweaver-cc-les-bases
Dw005 formation-dreamweaver-cc-les-bases
 
0 g170g formation-presentation-des-donnees-avec-le-module-tableau-de-ibm-spss
0 g170g formation-presentation-des-donnees-avec-le-module-tableau-de-ibm-spss0 g170g formation-presentation-des-donnees-avec-le-module-tableau-de-ibm-spss
0 g170g formation-presentation-des-donnees-avec-le-module-tableau-de-ibm-spss
 
Intégrer correctement un e-mail, c'est possible ! Démonstration en 1h30
Intégrer correctement un e-mail, c'est possible ! Démonstration en 1h30Intégrer correctement un e-mail, c'est possible ! Démonstration en 1h30
Intégrer correctement un e-mail, c'est possible ! Démonstration en 1h30
 
Dw008 formation-dreamweaver-csx-les-bases
Dw008 formation-dreamweaver-csx-les-basesDw008 formation-dreamweaver-csx-les-bases
Dw008 formation-dreamweaver-csx-les-bases
 
Drupal en bibliothèque (2008)
Drupal en bibliothèque (2008)Drupal en bibliothèque (2008)
Drupal en bibliothèque (2008)
 
BOOTSTRAP.pptx
BOOTSTRAP.pptxBOOTSTRAP.pptx
BOOTSTRAP.pptx
 
Panels, une autre façon de construire. DrupalCamp Paris 2013
Panels, une autre façon de construire. DrupalCamp Paris 2013Panels, une autre façon de construire. DrupalCamp Paris 2013
Panels, une autre façon de construire. DrupalCamp Paris 2013
 
Formulaires
FormulairesFormulaires
Formulaires
 
Drupal en bibliothèque (2009)
Drupal en bibliothèque (2009)Drupal en bibliothèque (2009)
Drupal en bibliothèque (2009)
 
Comment évaluer la qualité d'un site web selon les techniques d'intégration w...
Comment évaluer la qualité d'un site web selon les techniques d'intégration w...Comment évaluer la qualité d'un site web selon les techniques d'intégration w...
Comment évaluer la qualité d'un site web selon les techniques d'intégration w...
 
Dw009 formation-dreamweaver-csx-les-bases-et-perfectionnement
Dw009 formation-dreamweaver-csx-les-bases-et-perfectionnementDw009 formation-dreamweaver-csx-les-bases-et-perfectionnement
Dw009 formation-dreamweaver-csx-les-bases-et-perfectionnement
 
Projet de semestre / 3ème partie / partage de contenus multimédia
Projet de semestre / 3ème partie / partage de contenus multimédiaProjet de semestre / 3ème partie / partage de contenus multimédia
Projet de semestre / 3ème partie / partage de contenus multimédia
 
Theming drupal8 - Meetup Paris - 26-mars-2015
Theming drupal8 - Meetup Paris - 26-mars-2015Theming drupal8 - Meetup Paris - 26-mars-2015
Theming drupal8 - Meetup Paris - 26-mars-2015
 
Desig formation-design-web-avec-photoshop-et-illustrator
Desig formation-design-web-avec-photoshop-et-illustratorDesig formation-design-web-avec-photoshop-et-illustrator
Desig formation-design-web-avec-photoshop-et-illustrator
 
CSS et CSS3
CSS et CSS3CSS et CSS3
CSS et CSS3
 
Initiation au css
Initiation au cssInitiation au css
Initiation au css
 

Plus de Abdoulaye Dieng

Fondamentaux du Référencement naturel
Fondamentaux du Référencement naturelFondamentaux du Référencement naturel
Fondamentaux du Référencement naturelAbdoulaye Dieng
 
Panorama des Technologies mobiles
Panorama des Technologies mobilesPanorama des Technologies mobiles
Panorama des Technologies mobilesAbdoulaye Dieng
 
Prise en main de WordPress
Prise en main de WordPressPrise en main de WordPress
Prise en main de WordPressAbdoulaye Dieng
 
Fondamentaux d’une API REST
Fondamentaux d’une API RESTFondamentaux d’une API REST
Fondamentaux d’une API RESTAbdoulaye Dieng
 
Introduction à JavaScript
Introduction à JavaScriptIntroduction à JavaScript
Introduction à JavaScriptAbdoulaye Dieng
 
Introduction à l’orienté objet en Python
Introduction à l’orienté objet en PythonIntroduction à l’orienté objet en Python
Introduction à l’orienté objet en PythonAbdoulaye Dieng
 
Initiation à l'algorithmique
Initiation à l'algorithmiqueInitiation à l'algorithmique
Initiation à l'algorithmiqueAbdoulaye Dieng
 
Requêtes HTTP synchrones et asynchrones
Requêtes HTTPsynchrones et asynchronesRequêtes HTTPsynchrones et asynchrones
Requêtes HTTP synchrones et asynchronesAbdoulaye Dieng
 
Introduction à JavaScript
Introduction à JavaScriptIntroduction à JavaScript
Introduction à JavaScriptAbdoulaye Dieng
 
Initiation à l'algorithmique
Initiation à l'algorithmiqueInitiation à l'algorithmique
Initiation à l'algorithmiqueAbdoulaye Dieng
 
Introduction à AngularJS
Introduction à AngularJSIntroduction à AngularJS
Introduction à AngularJSAbdoulaye Dieng
 
Initiation à Express js
Initiation à Express jsInitiation à Express js
Initiation à Express jsAbdoulaye Dieng
 
Cours référencement naturel supdeco techonologie avril-15
Cours référencement naturel supdeco techonologie avril-15Cours référencement naturel supdeco techonologie avril-15
Cours référencement naturel supdeco techonologie avril-15Abdoulaye Dieng
 

Plus de Abdoulaye Dieng (20)

Fondamentaux du Référencement naturel
Fondamentaux du Référencement naturelFondamentaux du Référencement naturel
Fondamentaux du Référencement naturel
 
Introduction à Symfony
Introduction à SymfonyIntroduction à Symfony
Introduction à Symfony
 
Panorama des Technologies mobiles
Panorama des Technologies mobilesPanorama des Technologies mobiles
Panorama des Technologies mobiles
 
Prise en main de WordPress
Prise en main de WordPressPrise en main de WordPress
Prise en main de WordPress
 
Fondamentaux d’une API REST
Fondamentaux d’une API RESTFondamentaux d’une API REST
Fondamentaux d’une API REST
 
Introduction à Angular
Introduction à AngularIntroduction à Angular
Introduction à Angular
 
Introduction à JavaScript
Introduction à JavaScriptIntroduction à JavaScript
Introduction à JavaScript
 
Introduction à l’orienté objet en Python
Introduction à l’orienté objet en PythonIntroduction à l’orienté objet en Python
Introduction à l’orienté objet en Python
 
Introduction à Python
Introduction à PythonIntroduction à Python
Introduction à Python
 
Initiation à l'algorithmique
Initiation à l'algorithmiqueInitiation à l'algorithmique
Initiation à l'algorithmique
 
Introduction à Symfony
Introduction à SymfonyIntroduction à Symfony
Introduction à Symfony
 
Requêtes HTTP synchrones et asynchrones
Requêtes HTTPsynchrones et asynchronesRequêtes HTTPsynchrones et asynchrones
Requêtes HTTP synchrones et asynchrones
 
Introduction à jQuery
Introduction à jQueryIntroduction à jQuery
Introduction à jQuery
 
Introduction à JavaScript
Introduction à JavaScriptIntroduction à JavaScript
Introduction à JavaScript
 
Initiation à l'algorithmique
Initiation à l'algorithmiqueInitiation à l'algorithmique
Initiation à l'algorithmique
 
Introduction à HTML 5
Introduction à HTML 5Introduction à HTML 5
Introduction à HTML 5
 
Introduction à AngularJS
Introduction à AngularJSIntroduction à AngularJS
Introduction à AngularJS
 
Initiation à Express js
Initiation à Express jsInitiation à Express js
Initiation à Express js
 
introduction à MongoDB
introduction à MongoDBintroduction à MongoDB
introduction à MongoDB
 
Cours référencement naturel supdeco techonologie avril-15
Cours référencement naturel supdeco techonologie avril-15Cours référencement naturel supdeco techonologie avril-15
Cours référencement naturel supdeco techonologie avril-15
 

Initiation à Bootstrap

  • 1. Initiation à Bootstrap Mai 2018Abdoulaye Dieng ESMT / LIPMEN 3 M@RDI (Marketing Digital)
  • 2. Objectif Prendre en main le framework CSS le plus utilisé
  • 3. Objectifs opérationnels • Positionner du contenu avec le système de grille • Créer des barres de navigation • Créer un fil d’Ariane • Mettre en forme des listes • Mettre en forme des tableaux • Créer des formulaires • Créer des boutons • Mettre en forme des images • Créer une page d’atterrissage
  • 4. Sommaire 1) Grille 2) Barres de navigation 3) Fil d’Ariane 4) Listes 5) Tableaux 6) Formulaires 7) Boutons 8) Images 9) Page d’atterrissage
  • 5. Présentation de Bootstrap • Pb : comment standardiser la boîte à outils de mise en forme des pages Web ? • Framework HTML, CSS et JavaScript contenant de nombreux composants prêts à l’emploi : menus, boutons, tableaux, images, formulaires, icônes, etc. • Bootstrap est dévelopé par des ex-employés de Twitter : Mark Otto et Jacob Thornton • Bootstrap est publié en 2011 sur Github et en devient le projet open source le plus populaire en 2012 • Bootstrap est « mobile first » et permet le responsive design
  • 6. Installation de Bootstrap • En local 1) Téléchargez la dernière version stable actuelle (11/05/18) https://github.com/twbs/bootstrap/releases/download/v4. 1.0/bootstrap-4.1.0-dist.zip 2) Désarchivez dans votre répertoire racine 3) Fichiers de base à lier avec les pages HTML • css/bootstrap.min.css • js/ bootstrap.min.js (dépend de jQuery) • En ligne CDN (Content Network Delivery) https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstr ap.min.css https://code.jquery.com/jquery-3.3.1.slim.min.js https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstra p.min.js
  • 7. Grille présentation • Grille = découpage en lignes et en colonnes de la page • Objectif : créer une mise en page en attribuant une ou +sieurs colonne(s) aux contenus • Nombre maximal de colonnes dans une ligne = 12 • Au delà de 12, les colonnes d’une ligne s’empilent grâce au responsive 1 2 3 4 5 6 7 8 9 10 11 12 Largeur totale 1/2 1/2 2/3 1/3
  • 8. Grille devices Très petit écran (Smartphone) Petit écran (Tablette) Écran moyen (Ordinateur) Écran large (Ordinateur) Valeur de référence < 768 px >= 768 px >= 992 px >= 1200 px Prefixe de classe .col-xs- .col-sm- .col-md- .col-lg- Conteneur maximum Automatique 750 px 970 px 1170 px
  • 9. Grille quelques règles • Toute ligne (classe row dans une <div>) doit être incluse dans un conteneur (classe container ou container-fluid dans une <div>) • Seules les colonnes (<div> munie de la classe col-device-n avec device = xs, sm, md ou lg et n = nombre de colonnes) doivent être des enfants d’une ligne • Tout contenu doit être inclus dans une colonne • Une ligne contenant des colonnes peut être incluse dans une autre colonne • Décaler (.col-device-offset-n) un contenu de n colonnes vers la droite
  • 11. Grille TP • Ajoutez la classe well de Bootstrap à toute ligne • Créez une classe box-col (fond blanc et bordure noire) à ajouter à toute colonne
  • 12. Barres de navigation par défaut • Syntaxe  les classes navbar et navbar-default dans une <nav>  Inclure, entre les balises de nav, une <ul> avec la classe nav accompagnée de la classe navbar-nav  li pour les items de navigation dont l’actif est repéré par la classe active • Exemple
  • 13. Barres de navigation à fond noir • Syntaxe Dans la <nav>, remplacez la classe navbar-default par la classe navbar-inverse • Exemple
  • 14. Barres de navigation fixées • Syntaxe Dans la <nav>, ajoutez la classe navbar-fixed-top ou la classe navbar-fixed-bottom
  • 15. Fil d’Ariane • Fil d’Ariane : aide à la navigation permettant à l’internaute de se localiser dans le site • Syntaxe  Classe breadcrumb dans <ul>  Classe active pour définir l'élément actif de la liste  Inclure une ancre dans chaque élément non-actif de la liste • Exemple
  • 16. Listes sans style • Syntaxe classe .list-unstyled dans <ul> ou <ol> • Exemple (à faire)
  • 17. Listes en ligne • Syntaxe classe .list-inline dans <ul> ou <ol> • Exemple
  • 18. Tableaux lignes de séparation horizontales • Classe table dans <table> • Exemple
  • 19. Tableaux à rayures • Classe table-striped dans <table> • Exemple
  • 20. Tableaux bordures • Classe table-bordered dans <table> • Exemple (à faire)
  • 21. Formulaires contrôles occupent toute la largeur disponible • Classe form-control dans text, textarea ou select • Exemple
  • 22. Formulaires espacement des contrôles • Classe form-group dans une <div> contenant un contrôle et son label • Exemple (à faire)
  • 23. Formulaires en ligne • Classe form-inline dans <form> • Exemple
  • 24. Formulaires horizontales • Classe form-horizontal dans form • Classe control-label dans label • Utiliser les classes de grille pour aligner les labels et les champs dans une disposition horizontale • Exemple (à faire)
  • 25. Boutons types • À la balise <button>, ajouter la classe btn accompagnée de l’une des classes btn-default, btn-primary, btn-success, btn-info, btn-warning, btn-danger ou btn-link • Exemples
  • 26. Boutons dimensions • Aux classes de base précédentes (exple : btn btn-default), ajoutez l’une des classes btn-lg, btn-sm ou btn-xs • La classe btn-block permet au bouton de s’étendre sur toute la largeur de son conteneur • Exemples
  • 27. Images bordures • Ajouter à img l’une des classes img-rounded, img-circle ou img-thumbnail • Exemples
  • 28. Images responsive - centrage • Classe img-responsive à img pour que l’image s’adapte à son conteneur • Classe center-block à img pour centrer l’image dans son conteneur
  • 29. Page d’atterrissage présentation • Page d’atterrissage (landing page) : page Web visant à accomplir un objectif de conversion • Qlq objectifs de conversion : vendre un produit ou un service, inscrire à un newsletter, faire remplir un formulaire, abonner à un blog, … • Principaux contenus  Contenus pertinents p/r à la page référente ou de provenance  Titre qui incite l’internaute à poursuivre  Bénéfices que retirera l’internaute  Image illustrative du produit ou du service  Bouton d’appel à l’action bien visible
  • 30. Page d’atterrissage à réaliser Avec Bootstrap, créez une page d’atterrissage inspirée d’une autre, trouvée sur le Web

Notes de l'éditeur

  1. .container permet de centrer le contenu de la page .container-fluid permet au contenud d’occuper la totaité de la page en largeur
  2. https://fr.wix.com/blog/2015/03/31/que-sont-landing-pages-comment-utiliser/
  3. https://fr.wix.com/blog/2015/03/31/que-sont-landing-pages-comment-utiliser/