SlideShare une entreprise Scribd logo
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

Presentation of bootstrap
Presentation of bootstrapPresentation of bootstrap
Presentation of bootstrap
1amitgupta
 
Chapitre 5 classes abstraites et interfaces
Chapitre 5  classes abstraites et interfacesChapitre 5  classes abstraites et interfaces
Chapitre 5 classes abstraites et interfaces
Amir Souissi
 
Examen principal- php - correction
Examen principal- php - correctionExamen principal- php - correction
Examen principal- php - correction
Ines Ouaz
 
Bootstrap
BootstrapBootstrap
Bootstrap
Romdhani Asma
 
Formation PHP
Formation PHPFormation PHP
Formation PHP
kemenaran
 
eServices-Tp1: Web Services
eServices-Tp1: Web ServiceseServices-Tp1: Web Services
eServices-Tp1: Web Services
Lilia Sfaxi
 
HTML, CSS et Javascript
HTML, CSS et JavascriptHTML, CSS et Javascript
HTML, CSS et Javascript
ECAM Brussels Engineering School
 
Cours php bac info
Cours php bac infoCours php bac info
Cours php bac info
borhen boukthir
 
Introduction à React
Introduction à ReactIntroduction à React
Introduction à React
Abdoulaye Dieng
 
Introduction à React JS
Introduction à React JSIntroduction à React JS
Introduction à React JS
Abdoulaye Dieng
 
Fiche de TP 1 sur les Feuilles de calculs avec les Tableurs
Fiche de TP 1 sur les Feuilles de calculs avec les Tableurs Fiche de TP 1 sur les Feuilles de calculs avec les Tableurs
Fiche de TP 1 sur les Feuilles de calculs avec les Tableurs
ATPENSC-Group
 
Application web php5 html5 css3 bootstrap
Application web php5 html5 css3 bootstrapApplication web php5 html5 css3 bootstrap
Application web php5 html5 css3 bootstrap
Bassem ABCHA
 
Examen principal - PHP
Examen principal - PHPExamen principal - PHP
Examen principal - PHP
Ines Ouaz
 
Cours php
Cours php Cours php
Cours php
Yassine Badri
 
Support de cours angular
Support de cours angularSupport de cours angular
Support de cours angular
ENSET, Université Hassan II Casablanca
 
Le langage plsql
Le langage plsqlLe langage plsql
Le langage plsql
kati_f87
 
Mohamed youssfi support architectures logicielles distribuées basées sue les ...
Mohamed youssfi support architectures logicielles distribuées basées sue les ...Mohamed youssfi support architectures logicielles distribuées basées sue les ...
Mohamed youssfi support architectures logicielles distribuées basées sue les ...
ENSET, Université Hassan II Casablanca
 
Javascript pour les Développeurs WEB
Javascript pour les Développeurs WEBJavascript pour les Développeurs WEB
Javascript pour les Développeurs WEB
Abbes Rharrab
 
cours Php
cours Phpcours Php
cours Php
mohamednacim
 
Bootstrap 5 ppt
Bootstrap 5 pptBootstrap 5 ppt
Bootstrap 5 ppt
Mallikarjuna G D
 

Tendances (20)

Presentation of bootstrap
Presentation of bootstrapPresentation of bootstrap
Presentation of bootstrap
 
Chapitre 5 classes abstraites et interfaces
Chapitre 5  classes abstraites et interfacesChapitre 5  classes abstraites et interfaces
Chapitre 5 classes abstraites et interfaces
 
Examen principal- php - correction
Examen principal- php - correctionExamen principal- php - correction
Examen principal- php - correction
 
Bootstrap
BootstrapBootstrap
Bootstrap
 
Formation PHP
Formation PHPFormation PHP
Formation PHP
 
eServices-Tp1: Web Services
eServices-Tp1: Web ServiceseServices-Tp1: Web Services
eServices-Tp1: Web Services
 
HTML, CSS et Javascript
HTML, CSS et JavascriptHTML, CSS et Javascript
HTML, CSS et Javascript
 
Cours php bac info
Cours php bac infoCours php bac info
Cours php bac info
 
Introduction à React
Introduction à ReactIntroduction à React
Introduction à React
 
Introduction à React JS
Introduction à React JSIntroduction à React JS
Introduction à React JS
 
Fiche de TP 1 sur les Feuilles de calculs avec les Tableurs
Fiche de TP 1 sur les Feuilles de calculs avec les Tableurs Fiche de TP 1 sur les Feuilles de calculs avec les Tableurs
Fiche de TP 1 sur les Feuilles de calculs avec les Tableurs
 
Application web php5 html5 css3 bootstrap
Application web php5 html5 css3 bootstrapApplication web php5 html5 css3 bootstrap
Application web php5 html5 css3 bootstrap
 
Examen principal - PHP
Examen principal - PHPExamen principal - PHP
Examen principal - PHP
 
Cours php
Cours php Cours php
Cours php
 
Support de cours angular
Support de cours angularSupport de cours angular
Support de cours angular
 
Le langage plsql
Le langage plsqlLe langage plsql
Le langage plsql
 
Mohamed youssfi support architectures logicielles distribuées basées sue les ...
Mohamed youssfi support architectures logicielles distribuées basées sue les ...Mohamed youssfi support architectures logicielles distribuées basées sue les ...
Mohamed youssfi support architectures logicielles distribuées basées sue les ...
 
Javascript pour les Développeurs WEB
Javascript pour les Développeurs WEBJavascript pour les Développeurs WEB
Javascript pour les Développeurs WEB
 
cours Php
cours Phpcours Php
cours Php
 
Bootstrap 5 ppt
Bootstrap 5 pptBootstrap 5 ppt
Bootstrap 5 ppt
 

Similaire à Initiation à Bootstrap

Initiation à Bootstrap
Initiation à BootstrapInitiation à Bootstrap
Initiation à Bootstrap
Abdoulaye Dieng
 
Boots formation-bootstrap-sites-web-adaptatifs
Boots formation-bootstrap-sites-web-adaptatifsBoots formation-bootstrap-sites-web-adaptatifs
Boots formation-bootstrap-sites-web-adaptatifs
CERTyou Formation
 
technologie web - part2
technologie web - part2technologie web - part2
technologie web - part2
Benoît Simard
 
Une Introduction à R
Une Introduction à RUne Introduction à R
Une Introduction à R
François Guillem
 
Dw005 formation-dreamweaver-cc-les-bases
Dw005 formation-dreamweaver-cc-les-basesDw005 formation-dreamweaver-cc-les-bases
Dw005 formation-dreamweaver-cc-les-bases
CERTyou 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-spss
CERTyou 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 1h30
Sébastien Lejeune
 
Dw008 formation-dreamweaver-csx-les-bases
Dw008 formation-dreamweaver-csx-les-basesDw008 formation-dreamweaver-csx-les-bases
Dw008 formation-dreamweaver-csx-les-bases
CERTyou 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.pptx
tokikun
 
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
bellesmanieres
 
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-perfectionnement
CERTyou 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édia
Laurent 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-2015
Romain 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-illustrator
CERTyou Formation
 
CSS et CSS3
CSS et CSS3CSS et CSS3
CSS et CSS3
Voyelle Voyelle
 
Initiation au css
Initiation au cssInitiation au css
Initiation au css
Abdoulaye Dieng
 

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 naturel
Abdoulaye Dieng
 
Introduction à Symfony
Introduction à SymfonyIntroduction à Symfony
Introduction à Symfony
Abdoulaye Dieng
 
Panorama des Technologies mobiles
Panorama des Technologies mobilesPanorama des Technologies mobiles
Panorama des Technologies mobiles
Abdoulaye Dieng
 
Prise en main de WordPress
Prise en main de WordPressPrise en main de WordPress
Prise en main de WordPress
Abdoulaye Dieng
 
Fondamentaux d’une API REST
Fondamentaux d’une API RESTFondamentaux d’une API REST
Fondamentaux d’une API REST
Abdoulaye Dieng
 
Introduction à Angular
Introduction à AngularIntroduction à Angular
Introduction à Angular
Abdoulaye Dieng
 
Introduction à JavaScript
Introduction à JavaScriptIntroduction à JavaScript
Introduction à JavaScript
Abdoulaye Dieng
 
Introduction à l’orienté objet en Python
Introduction à l’orienté objet en PythonIntroduction à l’orienté objet en Python
Introduction à l’orienté objet en Python
Abdoulaye Dieng
 
Introduction à Python
Introduction à PythonIntroduction à Python
Introduction à Python
Abdoulaye Dieng
 
Initiation à l'algorithmique
Initiation à l'algorithmiqueInitiation à l'algorithmique
Initiation à l'algorithmique
Abdoulaye Dieng
 
Introduction à Symfony
Introduction à SymfonyIntroduction à Symfony
Introduction à Symfony
Abdoulaye Dieng
 
Requêtes HTTP synchrones et asynchrones
Requêtes HTTPsynchrones et asynchronesRequêtes HTTPsynchrones et asynchrones
Requêtes HTTP synchrones et asynchrones
Abdoulaye Dieng
 
Introduction à jQuery
Introduction à jQueryIntroduction à jQuery
Introduction à jQuery
Abdoulaye Dieng
 
Introduction à JavaScript
Introduction à JavaScriptIntroduction à JavaScript
Introduction à JavaScript
Abdoulaye Dieng
 
Initiation à l'algorithmique
Initiation à l'algorithmiqueInitiation à l'algorithmique
Initiation à l'algorithmique
Abdoulaye Dieng
 
Introduction à HTML 5
Introduction à HTML 5Introduction à HTML 5
Introduction à HTML 5
Abdoulaye Dieng
 
Introduction à AngularJS
Introduction à AngularJSIntroduction à AngularJS
Introduction à AngularJS
Abdoulaye Dieng
 
Initiation à Express js
Initiation à Express jsInitiation à Express js
Initiation à Express js
Abdoulaye Dieng
 
introduction à MongoDB
introduction à MongoDBintroduction à MongoDB
introduction à MongoDB
Abdoulaye 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-15
Abdoulaye 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/