SlideShare une entreprise Scribd logo
1  sur  32
Initiation à Bootstrap
Sept. 2021
1
Abdoulaye Dieng
Objectif général
Prendre en main le framework CSS le plus utilisé
2
Objectifs opérationnels
• Positionner du contenu avec le système de grille
• Créer des barres de navigation
• Mettre en forme des tableaux
• Créer des formulaires
• Créer des boutons
• Mettre en forme des images
3
Méthodologie du cours
• Alternance théorie et pratique
• Nombreux exemples de code permettant d’illustrer le
fonctionnement et les effets de chaque fonctionnalité de
manière pratique.
• Éviter de copier-coller les codes : « coder s’apprend en codant »
• Modifier ensuite les codes pour s’en approprier
4
Sommaire
1) Grille
2) Barres de navigation
3) Tables
4) Formulaires
5) Boutons
6) Images
5
Présentation de Bootstrap
• Pb : comment mettre en forme efficacement
(rapidité, facilité, portabilité, responsive, …)
le contenu Web ?
• Sol : Framework HTML, CSS et JavaScript
contenant de nombreux composants prêts à
l’emploi : menus, boutons, tableaux, images,
formulaires, icônes, etc.
• Bootstrap est développé 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 intègre le
responsive design 6
Environnement de travail
étapes
1) Créez un dossier de travail nommé par exemple
exemples-bootstrap
2) Téléchargez bootstrap-4.x.x-dist.zip
3) Désarchivez bootstrap-4.x.x-dist.zip
4) Copiez les répertoires css, js et font dans le dossier de travail
5) Téléchargez et ajoutez jquery-x.x.x.min.js au sous-dossier js du
dossier de travail
6) Créez, dans le dossier de travail, le fichier index.html avec le
contenu présenté à la diapo suivante
7
Environnement de travail
template de base
8
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
9
1 2 3 4 5 6 7 8 9 10 11 12
Largeur totale
1/2 1/2
2/3 1/3
Grille
devices
Extra small
(phone
portrait)
Small
(phone
paysage)
Medium
(Tablette)
Large
(Ordi)
Extra large
(large
Ordi)
Valeur de
référence
< 576 px >= 576 px >= 768 px >= 992 px >= 1200 px
lettres de
classe
xs sm md lg xl
10
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>)
• Une ligne permet de créer une rangée de colonnes (<div> avec la
classe col-device-n
 device = sm, md, lg ou xl ; par défaut = xs
 n = nombre de colonnes ; par défaut = nbr de col disponibles.
• Une classe .col-device affecte l’écran correspondant mais aussi
tout autre écran plus grand dont la classe est absente
• Seules les colonnes doivent être des fils d’une ligne
• Une ligne contenant des colonnes peut être incluse dans une autre
colonne
• Décaler (.offset-device-n) un contenu de n colonnes vers la droite
• .col-{breakpoint}-auto affecte les colonnes en fonction du contenu
11
Grille
exemple-grille.html
12
Barres de navigation
minimale
• Syntaxe
 Classe navbar dans une <nav>
 Classe navbar-light ou navbar-dark : couleur de texte
foncée ou claire de la barre
 .navbar-expand{-xl|-lg|-md|-sm} : afficher le menu
horizontalement en fonction de l’écran
 .navbar-nav dans une <ul>, enfant de nav
 .nav-item dans chaque li dont l’actif est repéré par la
classe active
 Une ancre avec .nav-link dans chaque élément de liste
• Exemple
13
Barres de navigation
placement et contenus
• Placement : .fixed-{top|bottom} dans nav
• Nom de marque : .navbar-brand
• Texte : .navbar-text
• Formulaire de recherche : .form-online dans form
14
Barres de navigation
exemple-barre-navigation.html
15
Tableaux
lignes de séparation horizontales
• Classe table dans <table>
• Exemple
16
Tableaux
couleurs
• .table à table
• Inverser les couleurs (avant et arrière plan) par défaut :
.table-dark à table
• Couleur de fond de l’entête :
.thead-light (gris-clair) ou .thead-dark (noir) à thead
• Tableau zébré : .table-striped à table
• Exemple
17
Tableaux
exemple-couleurs-tableau.html
18
Tableaux
bordures
• .table à table
• Ajouter des bordures aux cellules et autour du tableau :
.table-bordered à table
• Supprimer les bordures des cellules et du tableau :
.table-borderless à table
• Exemples
19
Tableaux
adaptables
• Ajouter une barre de défilement horizontale interne aux
tableaux dont les lignes seraient plus grandes que leur
conteneur
• .table-responsive au conteneur (une div par exemple) du
table
20
Formulaires
contrôles occupent toute la largeur disponible
• Classe form-control dans text, textarea ou select
• Exemple (à faire)
21
Formulaires
espacement des contrôles
• Classe form-group dans une <div> contenant un contrôle
et son label
• Exemple (à faire)
22
Formulaires
horizontales
• .form-group et .row à une div contenant un contrôle et son label
• .col-device-n à label
• .col-form-label à label : centrer verticalement le label et son
contrôle
• .col-device-n à une div contenant le contrôle
• Exemple (à faire)
23
Formulaires
exemple-horizontal-form.html
24
Formulaires
radio & checkbox
• .form-check à une div contenant un input et son label
• .form-check-input à input
• .form-check-label à label
• Exemple (à faire)
25
Formulaires
exemple-radio-checkbox.html
26
Boutons
types
• À la balise <button>, ajoutez la classe btn accompagnée de
l’une des classes btn-primary, btn-secondary, btn-success,
btn-danger, btn-warning, btn-info, btn-light, btn-dark
ou btn-link
• Exemples
27
Boutons
bordures
• À la balise <button>, ajoutez la classe btn accompagnée de
l’une des classes btn-outline-primary, btn-outline-secondary,
btn-outline-success, btn-outline-danger, btn-outline-
warning, btn-outline-info, btn-outline-light ou btn-outline-
dark
• Exemples
28
Boutons
dimensions et affichage
• Aux classes de base précédentes, ajoutez l’une des classes
btn-lg (large), btn-sm (petit) ou btn-block (type bloc)
• Exemples (à faire)
29
Images
bordures
• Ajouter à img l’une des classes rounded, rounded-circle ou
img-thumbnail
• Exemples (à faire)
30
Images
responsive - alignement
• .img-fluid à img pour que l’image s’adapte à son conteneur
• Centrer une image avec les options
• .text-center à un conteneur de l’image
• .d-block (pour « display : block ») et .mx-auto (marges
latérales à auto) à l’mage dont la largeur doit être fixée
• faire flotter une image à gauche ou à droite avec .float-
left ou .float-right.
31
Documentation
• https://getbootstrap.com/docs/4.5/layout/grid/
• https://getbootstrap.com/docs/4.5/components/navbar/
• https://getbootstrap.com/docs/4.5/content/tables/
• https://getbootstrap.com/docs/4.5/components/forms/
• https://getbootstrap.com/docs/4.5/components/buttons/
• https://getbootstrap.com/docs/4.5/content/images/
32

Contenu connexe

Tendances

Ionic, AngularJS,Cordova,NodeJS,Sass
Ionic, AngularJS,Cordova,NodeJS,SassIonic, AngularJS,Cordova,NodeJS,Sass
Ionic, AngularJS,Cordova,NodeJS,Sassmarwa baich
 
Reseaux+info+bac+lettres
Reseaux+info+bac+lettresReseaux+info+bac+lettres
Reseaux+info+bac+lettresHouas Makram
 
Cours php & Mysql - 1ére partie
Cours php & Mysql - 1ére partieCours php & Mysql - 1ére partie
Cours php & Mysql - 1ére partiekadzaki
 
Presentation Symfony
Presentation SymfonyPresentation Symfony
Presentation SymfonyJeremy Gachet
 
Telecharger Exercices corrigés PL/SQL
Telecharger Exercices corrigés PL/SQLTelecharger Exercices corrigés PL/SQL
Telecharger Exercices corrigés PL/SQLwebreaker
 
Héberger son site web
Héberger son site webHéberger son site web
Héberger son site webStrasWeb
 
Introduction à spring boot
Introduction à spring bootIntroduction à spring boot
Introduction à spring bootAntoine Rey
 
Les bases de l'HTML / CSS
Les bases de l'HTML / CSSLes bases de l'HTML / CSS
Les bases de l'HTML / CSSSamuel Robert
 
Correction Examen 2016-2017 POO .pdf
Correction Examen 2016-2017 POO .pdfCorrection Examen 2016-2017 POO .pdf
Correction Examen 2016-2017 POO .pdfslimyaich3
 

Tendances (20)

Ionic, AngularJS,Cordova,NodeJS,Sass
Ionic, AngularJS,Cordova,NodeJS,SassIonic, AngularJS,Cordova,NodeJS,Sass
Ionic, AngularJS,Cordova,NodeJS,Sass
 
Cours JavaScript
Cours JavaScriptCours JavaScript
Cours JavaScript
 
Introduction à Angular
Introduction à AngularIntroduction à Angular
Introduction à Angular
 
Reseaux+info+bac+lettres
Reseaux+info+bac+lettresReseaux+info+bac+lettres
Reseaux+info+bac+lettres
 
Introduction à Symfony
Introduction à SymfonyIntroduction à Symfony
Introduction à Symfony
 
Introduction à React
Introduction à ReactIntroduction à React
Introduction à React
 
Cours php & Mysql - 1ére partie
Cours php & Mysql - 1ére partieCours php & Mysql - 1ére partie
Cours php & Mysql - 1ére partie
 
Développement d'un site web de E-Commerce avec PHP (Première Partie)
Développement d'un site web de E-Commerce avec PHP (Première Partie)Développement d'un site web de E-Commerce avec PHP (Première Partie)
Développement d'un site web de E-Commerce avec PHP (Première Partie)
 
React-cours.pdf
React-cours.pdfReact-cours.pdf
React-cours.pdf
 
Programmation sous Android
Programmation sous AndroidProgrammation sous Android
Programmation sous Android
 
Cours 2 les composants
Cours 2 les composantsCours 2 les composants
Cours 2 les composants
 
Tp java ee.pptx
Tp java ee.pptxTp java ee.pptx
Tp java ee.pptx
 
Presentation Symfony
Presentation SymfonyPresentation Symfony
Presentation Symfony
 
Telecharger Exercices corrigés PL/SQL
Telecharger Exercices corrigés PL/SQLTelecharger Exercices corrigés PL/SQL
Telecharger Exercices corrigés PL/SQL
 
Héberger son site web
Héberger son site webHéberger son site web
Héberger son site web
 
Support developpement applications mobiles avec ionic v3 et v4
Support developpement applications mobiles avec ionic v3 et v4Support developpement applications mobiles avec ionic v3 et v4
Support developpement applications mobiles avec ionic v3 et v4
 
Introduction à spring boot
Introduction à spring bootIntroduction à spring boot
Introduction à spring boot
 
Les bases de l'HTML / CSS
Les bases de l'HTML / CSSLes bases de l'HTML / CSS
Les bases de l'HTML / CSS
 
Cours 1 introduction
Cours 1 introductionCours 1 introduction
Cours 1 introduction
 
Correction Examen 2016-2017 POO .pdf
Correction Examen 2016-2017 POO .pdfCorrection Examen 2016-2017 POO .pdf
Correction Examen 2016-2017 POO .pdf
 

Similaire à Initiation à Bootstrap

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
 
04 visual basic .net - exploitation des nouveaux controles windows forms et r...
04 visual basic .net - exploitation des nouveaux controles windows forms et r...04 visual basic .net - exploitation des nouveaux controles windows forms et r...
04 visual basic .net - exploitation des nouveaux controles windows forms et r...Hamza SAID
 
Drupal 7 - Fondamentaux et ateliers
Drupal 7 - Fondamentaux et ateliersDrupal 7 - Fondamentaux et ateliers
Drupal 7 - Fondamentaux et ateliersFrédéric Simonet
 
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
 
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
 
cours-introduction-dfggghhha-html-5.pptx
cours-introduction-dfggghhha-html-5.pptxcours-introduction-dfggghhha-html-5.pptx
cours-introduction-dfggghhha-html-5.pptxradjadjouambi1
 
technologie web - part2
technologie web - part2technologie web - part2
technologie web - part2Benoît Simard
 
Réussir son projet Drupal
Réussir son projet DrupalRéussir son projet Drupal
Réussir son projet DrupalAdyax
 
4IPDW - projet personnel.docx
4IPDW - projet personnel.docx4IPDW - projet personnel.docx
4IPDW - projet personnel.docxTarikElMahtouchi1
 
Meilleures pratiques pour construire un site web Drupal
Meilleures pratiques pour construire un site web DrupalMeilleures pratiques pour construire un site web Drupal
Meilleures pratiques pour construire un site web DrupalSuzanne Dergacheva
 
Dw005 formation-dreamweaver-cc-les-bases
Dw005 formation-dreamweaver-cc-les-basesDw005 formation-dreamweaver-cc-les-bases
Dw005 formation-dreamweaver-cc-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
 
Mappingobjetrelationnel[1]
Mappingobjetrelationnel[1]Mappingobjetrelationnel[1]
Mappingobjetrelationnel[1]linasafaa
 
templates.iafactory, guide de prise en main
templates.iafactory, guide de prise en maintemplates.iafactory, guide de prise en main
templates.iafactory, guide de prise en mainiafactory
 
Projet de semestre / 1ére partie / partage de contenus multimédias
Projet de semestre / 1ére partie / partage de contenus multimédiasProjet de semestre / 1ére partie / partage de contenus multimédias
Projet de semestre / 1ére partie / partage de contenus multimédiasLaurent Moccozet
 

Similaire à Initiation à Bootstrap (20)

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...
 
04 visual basic .net - exploitation des nouveaux controles windows forms et r...
04 visual basic .net - exploitation des nouveaux controles windows forms et r...04 visual basic .net - exploitation des nouveaux controles windows forms et r...
04 visual basic .net - exploitation des nouveaux controles windows forms et r...
 
Pentaho Ctools : tips & tricks
Pentaho Ctools : tips & tricks Pentaho Ctools : tips & tricks
Pentaho Ctools : tips & tricks
 
Pentaho Ctools : tips & tricks
Pentaho Ctools : tips & tricksPentaho Ctools : tips & tricks
Pentaho Ctools : tips & tricks
 
Drupal 7 - Fondamentaux et ateliers
Drupal 7 - Fondamentaux et ateliersDrupal 7 - Fondamentaux et ateliers
Drupal 7 - Fondamentaux et ateliers
 
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
 
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
 
cours-introduction-dfggghhha-html-5.pptx
cours-introduction-dfggghhha-html-5.pptxcours-introduction-dfggghhha-html-5.pptx
cours-introduction-dfggghhha-html-5.pptx
 
technologie web - part2
technologie web - part2technologie web - part2
technologie web - part2
 
Réussir son projet Drupal
Réussir son projet DrupalRéussir son projet Drupal
Réussir son projet Drupal
 
4IPDW - projet personnel.docx
4IPDW - projet personnel.docx4IPDW - projet personnel.docx
4IPDW - projet personnel.docx
 
Meilleures pratiques pour construire un site web Drupal
Meilleures pratiques pour construire un site web DrupalMeilleures pratiques pour construire un site web Drupal
Meilleures pratiques pour construire un site web Drupal
 
Dw005 formation-dreamweaver-cc-les-bases
Dw005 formation-dreamweaver-cc-les-basesDw005 formation-dreamweaver-cc-les-bases
Dw005 formation-dreamweaver-cc-les-bases
 
Drupal en bibliothèque (2008)
Drupal en bibliothèque (2008)Drupal en bibliothèque (2008)
Drupal en bibliothèque (2008)
 
HTML5 & CSS3 : Jeux
HTML5 & CSS3 : Jeux HTML5 & CSS3 : Jeux
HTML5 & CSS3 : Jeux
 
Mappingobjetrelationnel[1]
Mappingobjetrelationnel[1]Mappingobjetrelationnel[1]
Mappingobjetrelationnel[1]
 
templates.iafactory, guide de prise en main
templates.iafactory, guide de prise en maintemplates.iafactory, guide de prise en main
templates.iafactory, guide de prise en main
 
Projet de semestre / 1ére partie / partage de contenus multimédias
Projet de semestre / 1ére partie / partage de contenus multimédiasProjet de semestre / 1ére partie / partage de contenus multimédias
Projet de semestre / 1ére partie / partage de contenus multimédias
 
Formation cakephp
Formation cakephpFormation cakephp
Formation cakephp
 
HTML & CSS
HTML & CSSHTML & CSS
HTML & 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
 
Introduction à React JS
Introduction à React JSIntroduction à React JS
Introduction à React JSAbdoulaye 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
 
Cours CSS feuilles de style en cascade- mars 2015
Cours CSS feuilles de style en cascade- mars 2015Cours CSS feuilles de style en cascade- mars 2015
Cours CSS feuilles de style en cascade- mars 2015Abdoulaye Dieng
 
Architecture ordinateur-echange-de-donnees
Architecture ordinateur-echange-de-donneesArchitecture ordinateur-echange-de-donnees
Architecture ordinateur-echange-de-donneesAbdoulaye 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
 
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 à 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
 
Introduction à React JS
Introduction à React JSIntroduction à React JS
Introduction à React JS
 
Initiation à l'algorithmique
Initiation à l'algorithmiqueInitiation à l'algorithmique
Initiation à l'algorithmique
 
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
 
Cours CSS feuilles de style en cascade- mars 2015
Cours CSS feuilles de style en cascade- mars 2015Cours CSS feuilles de style en cascade- mars 2015
Cours CSS feuilles de style en cascade- mars 2015
 
Architecture ordinateur-echange-de-donnees
Architecture ordinateur-echange-de-donneesArchitecture ordinateur-echange-de-donnees
Architecture ordinateur-echange-de-donnees
 

Initiation à Bootstrap

  • 1. Initiation à Bootstrap Sept. 2021 1 Abdoulaye Dieng
  • 2. Objectif général Prendre en main le framework CSS le plus utilisé 2
  • 3. Objectifs opérationnels • Positionner du contenu avec le système de grille • Créer des barres de navigation • Mettre en forme des tableaux • Créer des formulaires • Créer des boutons • Mettre en forme des images 3
  • 4. Méthodologie du cours • Alternance théorie et pratique • Nombreux exemples de code permettant d’illustrer le fonctionnement et les effets de chaque fonctionnalité de manière pratique. • Éviter de copier-coller les codes : « coder s’apprend en codant » • Modifier ensuite les codes pour s’en approprier 4
  • 5. Sommaire 1) Grille 2) Barres de navigation 3) Tables 4) Formulaires 5) Boutons 6) Images 5
  • 6. Présentation de Bootstrap • Pb : comment mettre en forme efficacement (rapidité, facilité, portabilité, responsive, …) le contenu Web ? • Sol : Framework HTML, CSS et JavaScript contenant de nombreux composants prêts à l’emploi : menus, boutons, tableaux, images, formulaires, icônes, etc. • Bootstrap est développé 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 intègre le responsive design 6
  • 7. Environnement de travail étapes 1) Créez un dossier de travail nommé par exemple exemples-bootstrap 2) Téléchargez bootstrap-4.x.x-dist.zip 3) Désarchivez bootstrap-4.x.x-dist.zip 4) Copiez les répertoires css, js et font dans le dossier de travail 5) Téléchargez et ajoutez jquery-x.x.x.min.js au sous-dossier js du dossier de travail 6) Créez, dans le dossier de travail, le fichier index.html avec le contenu présenté à la diapo suivante 7
  • 9. 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 9 1 2 3 4 5 6 7 8 9 10 11 12 Largeur totale 1/2 1/2 2/3 1/3
  • 10. Grille devices Extra small (phone portrait) Small (phone paysage) Medium (Tablette) Large (Ordi) Extra large (large Ordi) Valeur de référence < 576 px >= 576 px >= 768 px >= 992 px >= 1200 px lettres de classe xs sm md lg xl 10
  • 11. 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>) • Une ligne permet de créer une rangée de colonnes (<div> avec la classe col-device-n  device = sm, md, lg ou xl ; par défaut = xs  n = nombre de colonnes ; par défaut = nbr de col disponibles. • Une classe .col-device affecte l’écran correspondant mais aussi tout autre écran plus grand dont la classe est absente • Seules les colonnes doivent être des fils d’une ligne • Une ligne contenant des colonnes peut être incluse dans une autre colonne • Décaler (.offset-device-n) un contenu de n colonnes vers la droite • .col-{breakpoint}-auto affecte les colonnes en fonction du contenu 11
  • 13. Barres de navigation minimale • Syntaxe  Classe navbar dans une <nav>  Classe navbar-light ou navbar-dark : couleur de texte foncée ou claire de la barre  .navbar-expand{-xl|-lg|-md|-sm} : afficher le menu horizontalement en fonction de l’écran  .navbar-nav dans une <ul>, enfant de nav  .nav-item dans chaque li dont l’actif est repéré par la classe active  Une ancre avec .nav-link dans chaque élément de liste • Exemple 13
  • 14. Barres de navigation placement et contenus • Placement : .fixed-{top|bottom} dans nav • Nom de marque : .navbar-brand • Texte : .navbar-text • Formulaire de recherche : .form-online dans form 14
  • 16. Tableaux lignes de séparation horizontales • Classe table dans <table> • Exemple 16
  • 17. Tableaux couleurs • .table à table • Inverser les couleurs (avant et arrière plan) par défaut : .table-dark à table • Couleur de fond de l’entête : .thead-light (gris-clair) ou .thead-dark (noir) à thead • Tableau zébré : .table-striped à table • Exemple 17
  • 19. Tableaux bordures • .table à table • Ajouter des bordures aux cellules et autour du tableau : .table-bordered à table • Supprimer les bordures des cellules et du tableau : .table-borderless à table • Exemples 19
  • 20. Tableaux adaptables • Ajouter une barre de défilement horizontale interne aux tableaux dont les lignes seraient plus grandes que leur conteneur • .table-responsive au conteneur (une div par exemple) du table 20
  • 21. Formulaires contrôles occupent toute la largeur disponible • Classe form-control dans text, textarea ou select • Exemple (à faire) 21
  • 22. Formulaires espacement des contrôles • Classe form-group dans une <div> contenant un contrôle et son label • Exemple (à faire) 22
  • 23. Formulaires horizontales • .form-group et .row à une div contenant un contrôle et son label • .col-device-n à label • .col-form-label à label : centrer verticalement le label et son contrôle • .col-device-n à une div contenant le contrôle • Exemple (à faire) 23
  • 25. Formulaires radio & checkbox • .form-check à une div contenant un input et son label • .form-check-input à input • .form-check-label à label • Exemple (à faire) 25
  • 27. Boutons types • À la balise <button>, ajoutez la classe btn accompagnée de l’une des classes btn-primary, btn-secondary, btn-success, btn-danger, btn-warning, btn-info, btn-light, btn-dark ou btn-link • Exemples 27
  • 28. Boutons bordures • À la balise <button>, ajoutez la classe btn accompagnée de l’une des classes btn-outline-primary, btn-outline-secondary, btn-outline-success, btn-outline-danger, btn-outline- warning, btn-outline-info, btn-outline-light ou btn-outline- dark • Exemples 28
  • 29. Boutons dimensions et affichage • Aux classes de base précédentes, ajoutez l’une des classes btn-lg (large), btn-sm (petit) ou btn-block (type bloc) • Exemples (à faire) 29
  • 30. Images bordures • Ajouter à img l’une des classes rounded, rounded-circle ou img-thumbnail • Exemples (à faire) 30
  • 31. Images responsive - alignement • .img-fluid à img pour que l’image s’adapte à son conteneur • Centrer une image avec les options • .text-center à un conteneur de l’image • .d-block (pour « display : block ») et .mx-auto (marges latérales à auto) à l’mage dont la largeur doit être fixée • faire flotter une image à gauche ou à droite avec .float- left ou .float-right. 31
  • 32. Documentation • https://getbootstrap.com/docs/4.5/layout/grid/ • https://getbootstrap.com/docs/4.5/components/navbar/ • https://getbootstrap.com/docs/4.5/content/tables/ • https://getbootstrap.com/docs/4.5/components/forms/ • https://getbootstrap.com/docs/4.5/components/buttons/ • https://getbootstrap.com/docs/4.5/content/images/ 32

Notes de l'éditeur

  1. <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  2. <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  3. https://getbootstrap.com/docs/4.4/layout/grid/
  4. https://getbootstrap.com/docs/4.4/components/navbar/