Scribd
Importer
57 vues75 pages

Programmation IHM : HTML, CSS, Bootstrap

Le document présente un cours sur la programmation des interfaces homme-machine (IHM) à l'Université Claude Bernard Lyon 1, axé sur HTML, CSS et le framework Bootstrap. Il couvre les concepts de base de l'IHM, les rappels sur HTML et CSS, ainsi que les technologies et outils nécessaires pour le développement web. Les objectifs incluent la création d'interfaces adaptatives et la programmation d'événements en utilisant JavaScript.

Transféré par

Ammouna Hlel
Copyright
© All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
57 vues75 pages

Programmation IHM : HTML, CSS, Bootstrap

Le document présente un cours sur la programmation des interfaces homme-machine (IHM) à l'Université Claude Bernard Lyon 1, axé sur HTML, CSS et le framework Bootstrap. Il couvre les concepts de base de l'IHM, les rappels sur HTML et CSS, ainsi que les technologies et outils nécessaires pour le développement web. Les objectifs incluent la création d'interfaces adaptatives et la programmation d'événements en utilisant JavaScript.

Transféré par

Ammouna Hlel
Copyright
© All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd

LIFIHM - Interactions Humain Machine

Programmation pour l’IHM - interfaces

Fabien Duchateau

[Link] [at] [Link]


Université Claude Bernard Lyon 1

2021 - 2022

[Link]
Positionnement dans LIFIHM

Ces transparents utilisent le genre féminin (e.g., chercheuse, développeuses) plutôt


que l’écriture inclusive (moins accessible, moins concise, et pas totalement inclusive)
LIFIHM - Interactions Humain Machine // Programmation pour l’IHM - interfaces UCBL Lyon 1 2 / 72
Motivation

Rappels des cours précédents :


I Méthodes de conception pour les IHM (croquis, maquette,
prototype)

I Comment programmer les interfaces à partir des maquettes ?


I Comment programmer les interactions, notamment les
événements déclenchés par des actions sur les composants ?

Dans cette UE, nous nous focalisons sur la programmation


d’interfaces web et d’applications mobiles

LIFIHM - Interactions Humain Machine // Programmation pour l’IHM - interfaces UCBL Lyon 1 3 / 72
Rappels HTML

HTML pour HyperText Markup Language :

I Langage de balisage :
I structure (e.g., <header>, <nav>)
I contenu (e.g., <p>, <a>, <img>, <table>)

I Standard W3C depuis 1996, version 5 en 2021

I Fichiers texte avec extension .html, qui sont lus et interprétés


par le navigateur

[Link]
[Link]
Tutoriel OpenClassRooms sur HTML5 et CSS3
LIFIHM - Interactions Humain Machine // Programmation pour l’IHM - interfaces UCBL Lyon 1 4 / 72
Rappels HTML (2)

Structure générale d’un


document HTML Deux exemples de structuration
du contenu (partie <body>)
LIFIHM - Interactions Humain Machine // Programmation pour l’IHM - interfaces UCBL Lyon 1 5 / 72
Rappels HTML (3)

1 <!DOCTYPE html>
2 <html lang="fr">
3
4 <head>
5 <title >Page "hello world" </title >
6 <meta charset= "utf-8">
7 </head >
8
9 <b ody>
10 <head er>
11 <h1 >Exemple "hello world"</h1>
12 </head er>
13 <s ection>
14 <p >Hello world !</p>
15 </s ection >
16 <footer >
17 <a href="[Link]/wiki/Hello_world"
>Source </a>
18 </footer >
19 </b ody>
20
21 </html >

Un exemple de fichier HTML et son résultat dans un navigateur

LIFIHM - Interactions Humain Machine // Programmation pour l’IHM - interfaces UCBL Lyon 1 6 / 72
Rappels CSS

CSS pour Cascading Style Sheets :

I Langage de présentation/de rendu des données

I Standard W3C depuis 1996, version 3 en 2021

I Fichiers texte avec extension .css, qui sont lus et interprétés


par le navigateur

I Notion de grille (grid layout, en recommandation candidate)

[Link]
[Link]
[Link]
[Link]
[Link]
LIFIHM - Interactions Humain Machine // Programmation pour l’IHM - interfaces UCBL Lyon 1 7 / 72
Rappels CSS (2)

Trois manières (fréquentes) d’insérer des styles CSS :


I Inline (via l’attribut style d’un élément)
I Interne (via une balise <style>)
I Externe (via une balise <link>)

Un style CSS se définit par :


I Un ou plusieurs sélecteurs suivis de déclarations
I Une déclaration est une paire propriété : valeur ;

LIFIHM - Interactions Humain Machine // Programmation pour l’IHM - interfaces UCBL Lyon 1 8 / 72
Rappels CSS (3)

Structure générale d’une déclaration en CSS

Déclaration CSS avec Déclaration CSS avec Déclaration CSS avec


sélecteur par balise sélecteur par classe sélecteur par identifiant
div { .ma_classe { #un_ID {
color: #000000; color: #000000; color: #000000;
} } }

LIFIHM - Interactions Humain Machine // Programmation pour l’IHM - interfaces UCBL Lyon 1 9 / 72
Rappels CSS (3)

Comment faire le lien entre une déclaration CSS et un élément


HTML ?

I En insertion inline, accès direct à l’élément concerné

I En insertion interne ou externe, c’est le rôle du sélecteur, par


exemple :
I un sélecteur basé sur une classe (e.g., .ma_classe dans le
CSS) s’appliquera aux éléments HTML qui ont un attribut
class avec la valeur .ma_classe
I un sélecteur basé sur un identifiant (e.g., #un_id dans le CSS)
s’appliquera à l’élément HTML qui a un attribut id avec la
valeur #un_id

LIFIHM - Interactions Humain Machine // Programmation pour l’IHM - interfaces UCBL Lyon 1 10 / 72
Rappels CSS (4)

1 header {
2 background-color: #aa88cc;
3 margin-bottom: 1em;
4 width: 20em;
5 border-radius: 0.5 em;
6 }
7
8 p {
9 text-indent: 2em;
10 word-spacing: 1em;
11 text-transform: capitalize;
12 }
13
14 footer {
15 background-color: #55 cc55;
16 width: 20em;
17 text-align: center;
18 }

Un style CSS et le résultat obtenu après application sur le fichier


HTML précédent

LIFIHM - Interactions Humain Machine // Programmation pour l’IHM - interfaces UCBL Lyon 1 11 / 72
Limitations de HTML et CSS

I Des langages qui évoluent rapidement, et donc nécessité de


faire évoluer le code fréquemment

I Difficulté d’écrire un code qui s’adapte à tous les dispositifs


existants

I Des langages pour afficher et mettre en page/forme le


contenu (interfaces), mais qui ne permettent pas de
programmer des événements

Le CSS permet de programmer quelques ”événements” (e.g., au survol


d’un lien), mais cela reste très limité
LIFIHM - Interactions Humain Machine // Programmation pour l’IHM - interfaces UCBL Lyon 1 12 / 72
Paradigme de programmation événementielle
I Le programme est défini par rapport aux événements qui
peuvent survenir dans l’IHM
I Un événement étant une action utilisatrice, un message d’un
autre processus, etc.
I L’interface est au service de l’utilisatrice et non l’inverse

[Link]
[Link]
LIFIHM - Interactions Humain Machine // Programmation pour l’IHM - interfaces UCBL Lyon 1 13 / 72
Technologies pour le développement web

Interfaces :
I HTML et CSS, et des frameworks associés (e.g., Bootstrap,
Foundation, Pure, KNACSS, Gumby)

Interactions côté client (programmation événementielle, RIA pour


Rich Internet Applications) :
I JavaScript, Ajax, …

Traitements côté serveur :


I PHP, Python, JavaScript, Perl, ASP, …

[Link]
[Link]
[Link]
LIFIHM - Interactions Humain Machine // Programmation pour l’IHM - interfaces UCBL Lyon 1 14 / 72
Outils pour le développement web
Éditeurs de texte (non exhaustif, multi-OS et open-source) :
I Atom ([Link]
I Bluefish ([Link]
I Brackets ([Link]
I Emacs ([Link]
I jedit ([Link]

Un navigateur récent (e.g., Firefox, Chrome), et en option :


I Extension Firebug ([Link]
I Un validateur HTML, un sélecteur de couleurs, des outils de
mesure, des nettoyeurs de code, etc.

[Link]
[Link]
LIFIHM - Interactions Humain Machine // Programmation pour l’IHM - interfaces UCBL Lyon 1 15 / 72
Objectifs du cours

I Programmer des interfaces :


I Découvrir le framework Bootstrap et son système de grille
”responsive-design”
I Savoir utiliser les styles pré-définis pour les balises HTML
existantes
I Savoir utiliser les composants supplémentaires de Bootstrap

I Programmer des événements :


I Découvrir le Document Object Model (DOM), qui définit les
propriétés et méthodes d’un document HTML
I Connaître les types d’événements disponibles en JavaScript et
programmer les actions associées

LIFIHM - Interactions Humain Machine // Programmation pour l’IHM - interfaces UCBL Lyon 1 16 / 72
Plan

Présentation de Bootstrap

Système de grille

Styles pré-définis

Composants supplémentaires
Présentation de Bootstrap Système de grille Styles pré-définis Composants supplémentaires

Généralités

Bootstrap, une collection d’outils (framework) pour la création de


sites/applications web :

I Développé initialement par Twitter (2011)

I Projet open-source, version 5 en 2021

I Utilisé côté client (front-end)

I Interfaces adaptatives (responsive-design) et homogènes

[Link]
[Link]
[Link]
LIFIHM - Interactions Humain Machine // Programmation pour l’IHM - interfaces UCBL Lyon 1 18 / 72
Présentation de Bootstrap Système de grille Styles pré-définis Composants supplémentaires

Installation de Bootstrap

C’est dans la partie head du fichier HTML que l’on référence :


I Soit une version locale de Bootstrap (développement)
I Soit une version de Bootstrap en ligne, via un CDN

13 <li nk href=" [Link] " rel="


18 Librairies chargées à distance (CDN)
stylesheet">
pour le cours
14 <meta name="viewport" content= "
19 <meta name="viewport" content= "
width=device-width ,
width=device-width ,
initial-scale=1 , shrink-to-fit=no
initial-scale=1 ">
">
20 <li nk href="https: // [Link]/
15 <li nk href="lib/
npm/ bootstrap@5.0.0-beta1 /dist/
bootstrap-5.0.0-beta1-dist /css/
css/[Link] " rel="
[Link] " rel="
stylesheet">
stylesheet">

Utilisation de Bootstrap (fichiers CSS et JavaScript) en local et via


un CDN

Le script [Link] charge [Link] et les autres dépendances


LIFIHM - Interactions Humain Machine // Programmation pour l’IHM - interfaces UCBL Lyon 1 19 / 72
Plan

Présentation de Bootstrap

Système de grille

Styles pré-définis

Composants supplémentaires
Présentation de Bootstrap Système de grille Styles pré-définis Composants supplémentaires

Une grille adaptative


Une grille facilite l’adaptation du contenu aux différents
dispositifs :
- extra small (mobiles en portrait, <576px)
sm small (mobiles en paysage, ≥576px)
md medium (tablettes, ≥768px)
lg large (ordinateurs portables, ≥992px)
xl extra large (grand écrans, ≥1200px)
xxl extra large (grand écrans, ≥1400px)

Bootstrap est optimisé pour


les mobiles (pas de préfixe
pour xs)

[Link]
LIFIHM - Interactions Humain Machine // Programmation pour l’IHM - interfaces UCBL Lyon 1 21 / 72
Présentation de Bootstrap Système de grille Styles pré-définis Composants supplémentaires

Système de grille (2)


Le container peut s’assimiler à une grille, dans laquelle on déclare
des rangées (row). Les éléments de contenu occupent un certain
nombre de colonnes sur une rangée donnée

Comportement de la grille :
I Contenus d’abord réduits (en largeur) puis empilés (les uns
sous les autres) au fur et à mesure que le dispositif rétrécit
I Possibilité de cacher des contenus quand le dispositif rétrécit
I Comportement inverse quand le dispositif s’élargit

Ce sont des classes CSS qui transforment des balises (e.g., div,
span, article) en container, row et colonnes

[Link]
LIFIHM - Interactions Humain Machine // Programmation pour l’IHM - interfaces UCBL Lyon 1 22 / 72
Présentation de Bootstrap Système de grille Styles pré-définis Composants supplémentaires

Exemples du système de grille

La grille, définie pour tablettes


La grille, définie pour larges
(md, au milieu), élargit ses
dispositifs (lg, en haut), empile
contenus sur des dispositifs plus
ses contenus sur des dispositifs
larges (lg, en haut) et empile
de plus en plus petits (md au
ses contenus pour des dispositifs
milieu puis sm en bas)
plus petits (sm, en bas)
[Link]
LIFIHM - Interactions Humain Machine // Programmation pour l’IHM - interfaces UCBL Lyon 1 23 / 72
Présentation de Bootstrap Système de grille Styles pré-définis Composants supplémentaires

Containers

Deux types de containers :


I Une classe container qui contient et centre la grille sur une
largeur fixe (définie selon la largeur du dispositif)
I Une classe container-fluid qui permet à la grille d’occuper
toute la largeur.

Exemples avec les deux classes servant de container

[Link]
LIFIHM - Interactions Humain Machine // Programmation pour l’IHM - interfaces UCBL Lyon 1 24 / 72
Présentation de Bootstrap Système de grille Styles pré-définis Composants supplémentaires

Rangées

Les rangées servent à regrouper horizontalement des colonnes :


I Une seule classe, .row

I Les colonnes d’une rangée sont alignées correctement à partir


de leur bord haut, et les contenus volumineux s’écoulent donc
verticalement
I Une rangée occupe la hauteur du contenu de sa plus grande
colonne

Exemples avec la classe .row

LIFIHM - Interactions Humain Machine // Programmation pour l’IHM - interfaces UCBL Lyon 1 25 / 72
Présentation de Bootstrap Système de grille Styles pré-définis Composants supplémentaires

Colonnes

Le contenu se déclare à l’intérieur de colonnes :

I Les colonnes sont les seuls éléments ”enfant” des rangées

I Par défaut dans Bootstrap, on dispose de 12 colonnes par


rangée

I La taille des colonnes est automatiquement calculée (selon un


pourcentage), ce qui permet l’adaptation à la taille de l’écran

I Le contenu a des marges droite et gauche de 15px

LIFIHM - Interactions Humain Machine // Programmation pour l’IHM - interfaces UCBL Lyon 1 26 / 72
Présentation de Bootstrap Système de grille Styles pré-définis Composants supplémentaires

Colonnes (2)

I La classe indique le nombre de colonnes occupées par le


contenu (jusqu’à 12 colonnes) :
I .col-1 signifie que le contenu occupe 1 colonne en xs
I .col-sm-4 signifie que le contenu occupe 4 colonnes en sm
I .col-md-4 signifie que le contenu occupe 4 colonnes en md
I …

I Les dispositifs sont définis selon des largeurs minimales, donc


une classe de colonne s’applique à ce dispositif et aux
dispositifs plus grands
I un élément défini par la classe .col-sm-8 aura un contenu sur
8 colonnes pour les dispositifs sm, md, lg et xl

LIFIHM - Interactions Humain Machine // Programmation pour l’IHM - interfaces UCBL Lyon 1 27 / 72
Présentation de Bootstrap Système de grille Styles pré-définis Composants supplémentaires

Exemple de grille

2 <div class="row">
3 <div class="col-4 bg-success">div 4 colonnes </div >
4 <div class="col-6 bg-warning">div 6 colonnes </div >
5 <div class="col-2 bg-info">div 2 colonnes </div >
6 </div >
7 <div class="row">
8 <div class="col-3 bg-danger">div 3 colonnes </div>
9 <div class="col-2 bg-info">div 2 colonnes </div >
10 <div class="col-5 bg-success">div 5 colonnes </div >
11 </div >

Deux rangées dont les éléments (colorés avec les classes .bg-*)
occupent un certain nombre de colonnes en xs

LIFIHM - Interactions Humain Machine // Programmation pour l’IHM - interfaces UCBL Lyon 1 28 / 72
Présentation de Bootstrap Système de grille Styles pré-définis Composants supplémentaires

Enroulement de colonnes

Quand un élément (réparti sur plusieurs colonnes) n’a plus assez de


place disponible, il est placé sur une ligne en dessous (mais
toujours dans la même rangée)

Une rangée (fond marron) avec quatre éléments. Le troisième


élément qui occupe 8 colonnes n’a pas assez de place pour se
mettre sur la première ligne (12 − 6 − 2 < 8) et se retrouve donc
sur une nouvelle ligne

LIFIHM - Interactions Humain Machine // Programmation pour l’IHM - interfaces UCBL Lyon 1 29 / 72
Présentation de Bootstrap Système de grille Styles pré-définis Composants supplémentaires

Réorganisation de colonnes
Par défaut, les colonnes sont affichées dans l’ordre du flux, mais
réorganisation possible avec les classes :
I .offset-*-x pour déplacer un élément à droite de x colonnes
(≈ marge à gauche)
I .order-*-x pour réordonner visuellement en indiquant la
position de la colonne (avec x variant de 1 à 12)

Sur cette rangée (verte), le second élément (bleu) possède un


offset de 2, donc on saute deux colonnes avant de l’insérer

[Link]
LIFIHM - Interactions Humain Machine // Programmation pour l’IHM - interfaces UCBL Lyon 1 30 / 72
Présentation de Bootstrap Système de grille Styles pré-définis Composants supplémentaires

Imbrication d’éléments

Dans un groupe de colonnes, déclarer un élément de classe .row,


qui peut aussi contenir des groupes de colonnes

2 <div class="row bg-success padding-20">


3 <div class="col-md-4 bg-warning padding-10 margin-bottom-05">
4 col-md-4
5 <div class="row bg-info">
6 <div class="col-md-3 bg-danger padding-10">col-md-3 </div >
7 <div class="col-md-3 bg-danger col-lg-offset-2 padding-10">col-md-3 </div >
8 <div class="col-md-4 bg-danger padding-10">col-md-4 </div >
9 </div>
10 </div >

Une première rangée qui inclut un groupe de 4 colonnes. Ce groupe


de 4 colonnes contient une nouvelle rangée, dans laquelle on ajoute
plusieurs groupes de colonnes (code tronqué)

LIFIHM - Interactions Humain Machine // Programmation pour l’IHM - interfaces UCBL Lyon 1 31 / 72
Présentation de Bootstrap Système de grille Styles pré-définis Composants supplémentaires

En résumé

Bootstrap, un framework CSS populaire et bien documenté :


I Système de grille (12 colonnes et adaptatif)
I .container > .row (rangée) > .col-*-x (groupes de
colonnes)
I Enroulement, sauts de colonnes, imbrication, décalages

LIFIHM - Interactions Humain Machine // Programmation pour l’IHM - interfaces UCBL Lyon 1 32 / 72
Plan

Présentation de Bootstrap

Système de grille

Styles pré-définis

Composants supplémentaires
Présentation de Bootstrap Système de grille Styles pré-définis Composants supplémentaires

Des styles CSS pré-définis

Bootstrap définit des styles pour certaines balises :


I Mise en forme esthétique, sans code CSS à écrire

Conseils :
I Éviter d’utiliser des marges en haut (margin-top), dont le
comportement est parfois imprévisible
I Privilégier l’unité rem (root em)

Par convention dans ce cours :


I <x> indique une balise (éventuellement à fermer)
I .x indique une classe
I #x indique un identifiant
I * indique un dispositif (parmi xs, sm, md, lg, xl, xxl)

LIFIHM - Interactions Humain Machine // Programmation pour l’IHM - interfaces UCBL Lyon 1 34 / 72
Présentation de Bootstrap Système de grille Styles pré-définis Composants supplémentaires

Valeurs par défaut pour la page

I Taille de police = 16px (soit 1 rem)

I Utilisation de box-sizing: border-box; pour inclure


paddings et bordures dans la largeur et hauteur des éléments
I évite les éléments trop larges à cause d’un padding ou d’une
marge excessive

I Fond blanc

I Ajout/suppression de marges pour les balises de contenu (e.g.,


<h1> et <p> ont une marge en bas)

I …

[Link]
LIFIHM - Interactions Humain Machine // Programmation pour l’IHM - interfaces UCBL Lyon 1 35 / 72
Présentation de Bootstrap Système de grille Styles pré-définis Composants supplémentaires

Classes utilitaires - texte


I <em> (italique), <strong> (gras), <mark> ( fond jaune ),
<small> (taille réduite), <u> (souligné), …
I .h1, …, .h6 pour un texte avec l’apparence d’un titre (mais
en inline), .display-1, …, .display-6
I <abbr title="explication">, <code>,
I .lead pour un texte en évidence, .text-lowercase,
.text-uppercase, .text-capitalize
I .fs-1, …, .fs-6 pour la taille de police, .fw-bold, etc.

[Link]
[Link]
LIFIHM - Interactions Humain Machine // Programmation pour l’IHM - interfaces UCBL Lyon 1 36 / 72
Présentation de Bootstrap Système de grille Styles pré-définis Composants supplémentaires

Classes utilitaires - couleurs de texte


I .text-primary pour du texte important
I .text-secondary pour du texte secondaire
I .text-success pour une confirmation (e.g., succès)
I .text-info pour une information
I .text-warning pour un avertissement
I .text-danger pour un danger (e.g., erreur)
I .text-muted pour du texte grisé

4 <s pan class="text-primary">Un premier avec .text-primary. </s pan>


5 <s pan class="text-success">En deux , un .text-success. </s pan>
6 <s pan class="text-info">On continue avec .text-info. </s pan>

[Link]
LIFIHM - Interactions Humain Machine // Programmation pour l’IHM - interfaces UCBL Lyon 1 37 / 72
Présentation de Bootstrap Système de grille Styles pré-définis Composants supplémentaires

Classes utilitaires - couleurs de fond

I .bg-primary pour un fond bleu foncé


I .bg-secondary pour un fond gris
13 <s pan class="bg-primary">Un
fond avec .
I .bg-success pour un fond vert bg-primary. </s pan>
14 <s pan class="bg-success">Un
autre utile pour les
I .bg-info pour un fond bleu ciel messages de
confirmation , avec
bg-success. </s pan>
I .bg-warning pour un fond jaune 15 <s pan class="bg-info">Un
troisième informatif
avec .bg-info. </s pan>
I .bg-danger pour un fond rouge 16 <s pan class="bg-warning">Un
fond .bg-warning. </s
pan>
I .bg-light pour un fond gris clair

[Link]
LIFIHM - Interactions Humain Machine // Programmation pour l’IHM - interfaces UCBL Lyon 1 38 / 72
Présentation de Bootstrap Système de grille Styles pré-définis Composants supplémentaires

Classes utilitaires - alignement

I .text-start, .text-end, .text-center


I .text-*-start, .text-*-end et .text-*-center
I par exemple, .text-start pour aligner à gauche sur tous les
dispositifs ou .text-md-center pour centrer sur les
dispositifs moyens et supérieurs

I .text-wrap ou .text-nowrap

[Link]
LIFIHM - Interactions Humain Machine // Programmation pour l’IHM - interfaces UCBL Lyon 1 39 / 72
Présentation de Bootstrap Système de grille Styles pré-définis Composants supplémentaires

Classes utilitaires - divers

I .visible, .invisible pour rendre (in)visible un élément

I .close pour une petite croix fermante (e.g., sur les panels),
mais besoin d’associer un événement

I .visually-hidden pour afficher des éléments uniquement


pour les outils de synthèse vocale (accessibilité)

I Des classes pour faciliter les marges et paddings (e.g., .mt-2


pour margin top réduite de moitié, .p-md-auto pour tous les
paddings réglés automatiquement sur dispositifs md)

[Link]
[Link]
LIFIHM - Interactions Humain Machine // Programmation pour l’IHM - interfaces UCBL Lyon 1 40 / 72
Présentation de Bootstrap Système de grille Styles pré-définis Composants supplémentaires

Images (<img>)
I .img-fluid garantit que l’image s’adapte et ne déborde pas
de son parent
I .rounded (coins arrondis), .img-thumbnail (aperçu)
I Alignement d’une image avec .text-center, .text-end, …
dans le conteneur parent

Une image sur 1 colonne, la seconde arrondie sur 2 colonnes


et la dernière en thumbnail sur 3 colonnes

[Link]
[Link]
LIFIHM - Interactions Humain Machine // Programmation pour l’IHM - interfaces UCBL Lyon 1 41 / 72
Présentation de Bootstrap Système de grille Styles pré-définis Composants supplémentaires

Liens et boutons

Balises <a>, <button> et <input type="submit"> :


I .btn et .btn-link pour une apparence de bouton ou de lien
I Coloration avec couleurs contextuelles :
I .btn-primary pour une action principale
I .btn-secondary pour une action secondaire
I .btn-success pour une action positive / réussite
I .btn-info pour une action informative
I .btn-warning pour une action avec précaution
I .btn-danger pour une action sensible

I Coloration alternative avec .btn-outline-primary, etc.

[Link]
LIFIHM - Interactions Humain Machine // Programmation pour l’IHM - interfaces UCBL Lyon 1 42 / 72
Présentation de Bootstrap Système de grille Styles pré-définis Composants supplémentaires

Liens et boutons (2)

I .btn-block pour un bouton sur toute la largeur


I .btn-lg et .btn-sm pour un bouton plus grand ou plus petit
I .active et .disabled pour un bouton actif ou déactivé
I .btn-group et .btn-group-toggle pour les boutons radio,
cases à cocher, groupes de boutons, …

[Link]
LIFIHM - Interactions Humain Machine // Programmation pour l’IHM - interfaces UCBL Lyon 1 43 / 72
Présentation de Bootstrap Système de grille Styles pré-définis Composants supplémentaires

Listes (<ul>, <ol> et <dl>)


I .list-unstyled pour supprimer la marge et la puce d’une
liste
I .list-inline pour une liste sur une ligne :
I .list-inline-item pour les items <li>

I description <dl> avec éléments (dt et dd) alignés via la grille

Une liste sans style (gauche), une liste en ligne (milieu) et une
description (droite)

LIFIHM - Interactions Humain Machine // Programmation pour l’IHM - interfaces UCBL Lyon 1 44 / 72
Présentation de Bootstrap Système de grille Styles pré-définis Composants supplémentaires

Tableaux (<table>)

I .table pour un style de base (padding et lignes horizontales)

I .table-responsive pour les petits dispositifs (ascenseur


horizontal)

I .table-bordered pour des bordures autour de chaque cellule

I .table-sm pour un tableau compact

I .table-striped pour des lignes zébrées

I .table-hover pour un effet au survol de la souris

[Link]
LIFIHM - Interactions Humain Machine // Programmation pour l’IHM - interfaces UCBL Lyon 1 45 / 72
Présentation de Bootstrap Système de grille Styles pré-définis Composants supplémentaires

Tableaux (2)

I Classes contextuelles .table-active, .table-success,


.table-info, .table-warning et .table-danger
applicables aux lignes ou aux cellules

LIFIHM - Interactions Humain Machine // Programmation pour l’IHM - interfaces UCBL Lyon 1 46 / 72
Présentation de Bootstrap Système de grille Styles pré-définis Composants supplémentaires

Tableaux - tutoriel

[Link]
LIFIHM - Interactions Humain Machine // Programmation pour l’IHM - interfaces UCBL Lyon 1 47 / 72
Présentation de Bootstrap Système de grille Styles pré-définis Composants supplémentaires

Formulaires (<form>)

I Formulaire par défaut vertical, .form-inline pour un


formulaire horizontal
I Alignement avec la grille ou par regroupement (.form-group)

3 <form>
4 <fieldset class="form-group">
5 <label for="input1">Un premier label </label >
6 <i nput type="text" class="form-control" id="input1" placeholder= "un exemple
de valeur">
7 </fieldset >
8 <fieldset class="form-group">
9 <label for="input2">Un autre label </label >
10 <i nput type="text" class="form-control" id="input2" placeholder= "une autre
exemple">
11 </fieldset >
12 </form >

[Link]
LIFIHM - Interactions Humain Machine // Programmation pour l’IHM - interfaces UCBL Lyon 1 48 / 72
Présentation de Bootstrap Système de grille Styles pré-définis Composants supplémentaires

Formulaires (2)

I .form-control pour un contrôle (<input>, <select>,


<textarea>), .form-control-label pour son label
I .is-valid, .has-warning et .is-invalid pour indiquer un
succès ou une erreur sur un composant ou un groupe

LIFIHM - Interactions Humain Machine // Programmation pour l’IHM - interfaces UCBL Lyon 1 49 / 72
Présentation de Bootstrap Système de grille Styles pré-définis Composants supplémentaires

En résumé

I Mise en forme des éléments HTML classiques par Bootstrap :


I Listes, tableaux, images, liens/boutons, etc.
I Classes utilitaires (e.g., couleurs, alignement)
I Formulaires
I Possibilité de personnaliser ces styles (propre CSS, thèmes ou
avec LESS/SASS)

LIFIHM - Interactions Humain Machine // Programmation pour l’IHM - interfaces UCBL Lyon 1 50 / 72
Plan

Présentation de Bootstrap

Système de grille

Styles pré-définis

Composants supplémentaires
Présentation de Bootstrap Système de grille Styles pré-définis Composants supplémentaires

Composants Bootstrap

HTML ne fournit pas de composants ”sophistiqués”, mais :


I Une vingtaine de nouveaux composants dans Bootstrap
I Des centaines disponibles (e.g., formulaires d’authentification,
tableaux de prix, etc.) dans les extensions

Dans ce cours, 10 composants :


I Conteneur (panels, alertes, fenêtres modales)
I Navigation (menus, barres de menus, fil d’Ariane)
I Informations secondaires (labels, infobulles, repli)

[Link]
[Link]
LIFIHM - Interactions Humain Machine // Programmation pour l’IHM - interfaces UCBL Lyon 1 52 / 72
Présentation de Bootstrap Système de grille Styles pré-définis Composants supplémentaires

Panels (card)

Un panel est un conteneur flexible et structuré :

I .card pour déclarer le container

I .card-header et .card-footer

I .card-body pour le contenu

I .card-img-top et .card-img-bottom

[Link]
LIFIHM - Interactions Humain Machine // Programmation pour l’IHM - interfaces UCBL Lyon 1 53 / 72
Présentation de Bootstrap Système de grille Styles pré-définis Composants supplémentaires

Panels (card) - contenu


I .card-title et .card-subtitle
I .card-text, .card-link, .list-group, etc.
I Alignement, bordures, couleurs, onglets, etc.
33 <div class="row">
34 <div class="card bg-light col-3">
35 <div class="card-img-top"><img class="img-fluid" src="img/[Link]" alt="image
licorne"></div>
36 <div class="card-body">
37 <h4 class="card-title">Pull en laine de licorne </h4>
38 <p class="card-text">Idéal pour les hivers rugueux , un pull en laine de
licorne préhistorique !</p>
39 <a href="https: // [Link] /sciences/science-decalee/" class="
card-link">En savoir plus sur la licorne </a>
40 </div >
41 </div >
42 <div class="card bg-light col-3 offset-1">
43 <div class="card-img-top"><img class="img-fluid" src="img/[Link]" alt="image
singe"></div>
44 <div class="card-body">
45 <h4 class="card-title">Chaussettes en fourrure de lorax </h4>
46 <p class="card-text">Idéal pour les hivers rugueux , un pull en laine de
licorne préhistorique !</p>
47 <a href="https: // [Link] /sciences/science-decalee/" class="
card-link">En savoir plus sur le lorax </a>
48 </div >

http ://[Link]/planete/zoologie-science-decalee-62252
LIFIHM - Interactions Humain Machine // Programmation pour l’IHM - interfaces UCBL Lyon 1 54 / 72
Présentation de Bootstrap Système de grille Styles pré-définis Composants supplémentaires

Panels (card) - contenu


I .card-title et .card-subtitle
I .card-text, .card-link, .list-group, etc.
I Alignement, bordures, couleurs, onglets, etc.
33 <div class="row">
34 <div class="card bg-light col-3">
35 <div class="card-img-top"><img class="img-fluid" src="img/[Link]" alt="image
licorne"></div>
36 <div class="card-body">
37 <h4 class="card-title">Pull en laine de licorne </h4>
38 <p class="card-text">Idéal pour les hivers rugueux , un pull en laine de
licorne préhistorique !</p>
39 <a href="https: // [Link] /sciences/science-decalee/" class="
card-link">En savoir plus sur la licorne </a>
40 </div >
41 </div >
42 <div class="card bg-light col-3 offset-1">
43 <div class="card-img-top"><img class="img-fluid" src="img/[Link]" alt="image
singe"></div>
44 <div class="card-body">
45 <h4 class="card-title">Chaussettes en fourrure de lorax </h4>
46 <p class="card-text">Idéal pour les hivers rugueux , un pull en laine de
licorne préhistorique !</p>
47 <a href="https: // [Link] /sciences/science-decalee/" class="
card-link">En savoir plus sur le lorax </a>
48 </div >

http ://[Link]/planete/zoologie-science-decalee-62252
LIFIHM - Interactions Humain Machine // Programmation pour l’IHM - interfaces UCBL Lyon 1 54 / 72
Présentation de Bootstrap Système de grille Styles pré-définis Composants supplémentaires

Alertes (alert)
Une alerte fournit des messages contextuels ”inline” à
l’utilisatrice :
I .alert pour les bordures et marges
I .alert-primary, .alert-info, .alert-warning,
.alert-success, .alert-danger, etc.
I .alert-link pour des liens colorés selon le type d’alerte
I .alert-heading pour un titre, <hr> pour un séparateur

[Link]
LIFIHM - Interactions Humain Machine // Programmation pour l’IHM - interfaces UCBL Lyon 1 55 / 72
Présentation de Bootstrap Système de grille Styles pré-définis Composants supplémentaires

Alertes (alert) - options

I .alert-dismissible pour pouvoir fermer l’alerte :


I la croix est un bouton (dans l’alerte) avec les attributs
class="btn-close" et data-bs-dismiss="alert"
I classes .fade et .show pour la transition

9 <div class="alert alert-danger


alert-dismissible fade show" role="alert"
>
10 <b utton type="button" class="btn-close"
data-bs-dismiss= "alert" aria-label= "
Fermer"></b utton >
11 <s trong >Danger ! </s trong >Le dragon vous
attaque !
12 <hr >Fuuuuuuuyez !
13 </div >
14 <div class="alert alert-success" role="alert">
15 <s trong >Ouf !</s trong> Vous avez <a href="
https: // [Link] /watch?
v=jvwg1b30rsw" target= "_blank" class=
"alert-link">échappé au dragon </a> à
couvert sous la forêt.
16 </div >

LIFIHM - Interactions Humain Machine // Programmation pour l’IHM - interfaces UCBL Lyon 1 56 / 72
Présentation de Bootstrap Système de grille Styles pré-définis Composants supplémentaires

Fenêtres modales (modal)

Une fenêtre modale est une fenêtre bloquante (au premier plan) :
I Généralement une balise <div> avec la classe .modal
I Les modales de Bootstrap se ferment automatiquement quand
on clique en dehors de la fenêtre modale

Le composant qui ouvre la fenêtre modale (e.g., un bouton) doit :


I Avoir un attribut data-bs-toggle="modal" pour indiquer
qu’il déclenche une fenêtre modale
I Avoir un attribut data-bs-target="#id_modale" qui
spécifie la fenêtre modale à lancer (ici grâce à l’identifiant de
la fenêtre)

[Link]
LIFIHM - Interactions Humain Machine // Programmation pour l’IHM - interfaces UCBL Lyon 1 57 / 72
Présentation de Bootstrap Système de grille Styles pré-définis Composants supplémentaires

Fenêtres modales (modal) - structure

Dans une fenêtre modale (avec la classe .modal), plusieurs div :


I .modal-dialog spécifie la taille de fenêtre et contient :
I .modal-content précise la couleur de fond et peut contenir :
I .modal-header (e.g., la croix de fermeture ou le titre, spécifié
avec .modal-title)
I .modal-body (e.g., pour le texte principal de la modale)
I .modal-footer (e.g., pour les boutons d’interaction)

Nombreuses options : taille, agencement, scrolling, animation,


réutilisation d’une même modale avec contenu différent, etc.

LIFIHM - Interactions Humain Machine // Programmation pour l’IHM - interfaces UCBL Lyon 1 58 / 72
Présentation de Bootstrap Système de grille Styles pré-définis Composants supplémentaires

Exemple de fenêtre modale


3 <!-- bouton de lancement de la fenêtre modale -->
4 <b utton type="button" class="btn btn-primary" data-bs-toggle= "modal" data-bs-target= "
#exempleModal1">Cliquez-moi !</b utton >
5 <!-- déclaration de la fenêtre modale -->
6 <div id="exempleModal1" class="modal fade" tabindex= "-1" role="dialog">
7 <div class="modal-dialog modal-sm" role="document">
8 <div class="modal-content">
9 <div class="modal-header">
10 <h4 class="modal-title">Le titre de la modale </h4>
11 <b utton type="button" class="btn-close" data-bs-dismiss= "modal"
aria-label= "Close"></b utton>
12 </div >
13 <div class="modal-body">
14 Contenu de la modale (dans <code >.modal-body </code >)
15 </div >
16 <div class="modal-footer">
17 <b utton type="button" class="btn btn-secondary" data-bs-dismiss= "
modal">Annuler </b utton>
18 <b utton type="button" class="btn btn-primary">Valider </b utton >
19 </div >
20 </div>
21 </div >
22 </div >

LIFIHM - Interactions Humain Machine // Programmation pour l’IHM - interfaces UCBL Lyon 1 59 / 72
Présentation de Bootstrap Système de grille Styles pré-définis Composants supplémentaires

Exemple de fenêtre modale


3 <!-- bouton de lancement de la fenêtre modale -->
4 <b utton type="button" class="btn btn-primary" data-bs-toggle= "modal" data-bs-target= "
#exempleModal1">Cliquez-moi !</b utton >
5 <!-- déclaration de la fenêtre modale -->
6 <div id="exempleModal1" class="modal fade" tabindex= "-1" role="dialog">
7 <div class="modal-dialog modal-sm" role="document">
8 <div class="modal-content">
9 <div class="modal-header">
10 <h4 class="modal-title">Le titre de la modale </h4>
11 <b utton type="button" class="btn-close" data-bs-dismiss= "modal"
aria-label= "Close"></b utton>
12 </div >
13 <div class="modal-body">
14 Contenu de la modale (dans <code >.modal-body </code >)
15 </div >
16 <div class="modal-footer">
17 <b utton type="button" class="btn btn-secondary" data-bs-dismiss= "
modal">Annuler </b utton>
18 <b utton type="button" class="btn btn-primary">Valider </b utton >
19 </div >
20 </div>
21 </div >
22 </div >

LIFIHM - Interactions Humain Machine // Programmation pour l’IHM - interfaces UCBL Lyon 1 59 / 72
Présentation de Bootstrap Système de grille Styles pré-définis Composants supplémentaires

Menus (nav)

La classe .nav sert à représenter une zone de navigation (menu) :

I Sous forme de liste (horizontale par défaut)


I .flex-column (verticale), .nav-fill (étirée)
I .nav-item pour les éléments de la liste
I .nav-link pour des liens, .active et .disabled pour un
état actif ou désactivé

I Sous forme d’onglets avec .nav-tabs

I Sous forme de ”pills” avec .nav-pills

[Link]
LIFIHM - Interactions Humain Machine // Programmation pour l’IHM - interfaces UCBL Lyon 1 60 / 72
Présentation de Bootstrap Système de grille Styles pré-définis Composants supplémentaires

Barre de menus (navbar)

Une barre de menus peut contenir un logo, un menu, une barre de


recherche ou un formulaire, etc.
I .navbar pour la barre
I .navbar-brand pour la marque ou le logo
I .navbar-nav pour le menu

Options :
I Position (.fixed-top, .sticky-top, etc.)
I Couleur (.navbar-dark, .navbar-light, etc.)
I Responsive (avec .navbar-toggler et collapse)

[Link]
LIFIHM - Interactions Humain Machine // Programmation pour l’IHM - interfaces UCBL Lyon 1 61 / 72
Présentation de Bootstrap Système de grille Styles pré-définis Composants supplémentaires

Exemple de barre de menus

3 <nav class="nav navbar navbar-expand-xl bg-light navbar-light">


4 <div class="container-fluid ">
5 <s pan class="navbar-brand">
6 <a href="#"><img alt="Brand" src="img/[Link]" height= "50" width="50"></a
>
7 </s pan>
8 <b utton class="navbar-toggler" type="button" data-bs-toggle= "collapse"
data-bs-target= "#navbarMenu" aria-controls=" navbarSupportedContent "
aria-expanded="false" aria-label= "Toggle navigation">
9 <s pan class=" navbar-toggler-icon "></s pan>
10 </b utton >
11 <div class="collapse navbar-collapse" id="navbarMenu">
12 <ul class="navbar-nav me-auto mb-2 mb-lg-0">
13 <li class="nav-item active"><a href="#" class="nav-link">Menu 1</a></li>
14 <li class="nav-item"><a href="#" class="nav-link">Menu 2</a></li>
15 <li class="nav-item"><a href="#" class="nav-link">Menu 3</a></li>
16 </ul>
17 </div>
18 <form class="d-flex">
19 <div class="input-group">
20 <i nput type="search" id="query" class="form-control">
21 <b utton class="input-group-text" type="button"><img src="img/[Link]"></b utton
>
22 </div >
23 </form >
24 </div >
25 </nav >

LIFIHM - Interactions Humain Machine // Programmation pour l’IHM - interfaces UCBL Lyon 1 62 / 72
Présentation de Bootstrap Système de grille Styles pré-définis Composants supplémentaires

Fil d’Ariane (breadcrumb)

Un fil d’Ariane précise la localisation dans le site :


I Liste (<ol>) avec la classe .breadcrumb
I Éléments (<li>) avec la classe .breadcrumb-item,
généralement des liens
I Catégorie courante avec la classe .active
I Seuls les séparateurs sont ajoutés (le reste est à gérer
autrement)

2 <ol class="breadcrumb">
3 <li class="breadcrumb-item"><a href="#"
>Accueil </a></li>
4 <li class="breadcrumb-item"><a href="#"
>Articles magiques </a></li>
5 <li class="breadcrumb-item active">Parchemins
</li>
6 </ol>

LIFIHM - Interactions Humain Machine // Programmation pour l’IHM - interfaces UCBL Lyon 1 63 / 72
Présentation de Bootstrap Système de grille Styles pré-définis Composants supplémentaires

Étiquettes (badge)

Les badges mettent en avant une information courte, ponctuelle :


I Classe .badge et une classe de couleur ( .bg-primary,
.bg-success, .bg-danger, etc.)
I Taille de police de son élément parent
I Classe .rounded-pill pour des labels arrondis

7 <s pan class="badge bg-primary">badge primary </s pan>


8 <s pan class="badge bg-warning">badge warning </s pan>
9 <s pan class="badge rounded-pill bg-danger">badge
danger pill </s pan>
10 <s pan class="badge bg-info">badge info </s pan>
11 <h4><s pan class="badge bg-success">badge success dans
un &lt;h4&gt; </s pan></h4>
12 <b utton type="button" class="btn btn-primary">
13 Messages <s pan class="badge bg-secondary">3 </s pan>
14 </b utton >

LIFIHM - Interactions Humain Machine // Programmation pour l’IHM - interfaces UCBL Lyon 1 64 / 72
Présentation de Bootstrap Système de grille Styles pré-définis Composants supplémentaires

Infobulle (tooltip)

Une infobulle permet d’afficher des informations complémentaires :


I Nécessite la bibliothèque [Link] (incluse dans bundle)
I Initialisation des tooltips (individuelle ou globale)
I Tout élément (visible et non désactivé) peut avoir un tooltip
en précisant :
I un attribut data-bs-toggle="tooltip"
I un attribut title non vide (qui peut contenir du code HTML)

3 <s cript>
4 /* code JS pour initialiser tous les tooltips sur la page */
5 var tooltipElementList = []. [Link]( [Link] ('[data-bs-toggle="
tooltip "]'));
6 var tooltipList = [Link] ( function (tooltipElem) {
7 return new [Link] (tooltipElem);
8 });
9 </s cript>

[Link]
LIFIHM - Interactions Humain Machine // Programmation pour l’IHM - interfaces UCBL Lyon 1 65 / 72
Présentation de Bootstrap Système de grille Styles pré-définis Composants supplémentaires

Infobulle (tooltip) - options

I Positionnement du tooltip avec l’attribut


data-placement="left | right | top | bottom"

I Autres options disponibles (e.g., délai et durée d’apparition,


animation, container)

11 <b utton type="button" class="btn btn-info"


data-bs-toggle= "tooltip" data-bs-placement= "top"
title="Coucou , tooltip vers le haut !">
12 Un tooltip en haut
13 </b utton>

20 <i mg data-bs-toggle= "tooltip" width="10%"


data-bs-placement= "auto" title="Un tooltip placé
automatiquement , avec préférence à gauche , sur
une image d'abeille !" src="img/[Link]" alt=
"Une abeille" />

LIFIHM - Interactions Humain Machine // Programmation pour l’IHM - interfaces UCBL Lyon 1 66 / 72
Présentation de Bootstrap Système de grille Styles pré-définis Composants supplémentaires

Infobulle (tooltip) - tutoriel

[Link]
LIFIHM - Interactions Humain Machine // Programmation pour l’IHM - interfaces UCBL Lyon 1 67 / 72
Présentation de Bootstrap Système de grille Styles pré-définis Composants supplémentaires

Repli (collapse)
Un repli permet de masquer/afficher du contenu sur demande :
I Un élément déclencheur (e.g., un bouton) possède :
I un attribut data-bs-toggle="collapse"
I un attribut data-bs-target valué à un sélecteur CSS
I Un élément repliable (e.g., un panel) possède :
I la classe .collapse
I en option, la classe .show (déplié initialement)
24 <a data-bs-toggle= "collapse" href="#collapseDiv1">Lien déclencheur </a>
25 <div class="collapse bg-success" id="collapseDiv1">
26 Voilà le contenu replié et repliable pour le lien !
27 </div >

[Link]
LIFIHM - Interactions Humain Machine // Programmation pour l’IHM - interfaces UCBL Lyon 1 68 / 72
Présentation de Bootstrap Système de grille Styles pré-définis Composants supplémentaires

Repli (collapse)
Un repli permet de masquer/afficher du contenu sur demande :
I Un élément déclencheur (e.g., un bouton) possède :
I un attribut data-bs-toggle="collapse"
I un attribut data-bs-target valué à un sélecteur CSS
I Un élément repliable (e.g., un panel) possède :
I la classe .collapse
I en option, la classe .show (déplié initialement)
24 <a data-bs-toggle= "collapse" href="#collapseDiv1">Lien déclencheur </a>
25 <div class="collapse bg-success" id="collapseDiv1">
26 Voilà le contenu replié et repliable pour le lien !
27 </div >

[Link]
LIFIHM - Interactions Humain Machine // Programmation pour l’IHM - interfaces UCBL Lyon 1 68 / 72
Présentation de Bootstrap Système de grille Styles pré-définis Composants supplémentaires

Repli (collapse) - tutoriel

[Link]
LIFIHM - Interactions Humain Machine // Programmation pour l’IHM - interfaces UCBL Lyon 1 69 / 72
Présentation de Bootstrap Système de grille Styles pré-définis Composants supplémentaires

Aussi disponible avec Bootstrap

I Groupes de boutons/champs de saisie

I Jumbotron

I Barre de progression

I Pagination

I Carrousel d’images

I Scrollspy

I Media (répétition de sous-composants)

I …

LIFIHM - Interactions Humain Machine // Programmation pour l’IHM - interfaces UCBL Lyon 1 70 / 72
Présentation de Bootstrap Système de grille Styles pré-définis Composants supplémentaires

En résumé

I Bootstrap propose des composants fréquemment utilisés (e.g.,


panels, barres de menus, alertes)
I Bootstrap stylise ces composants, mais leur logique est à
programmer (e.g., fil d’Ariane, pagination)
I D’autres composants disponibles avec des extensions

LIFIHM - Interactions Humain Machine // Programmation pour l’IHM - interfaces UCBL Lyon 1 71 / 72
Bilan

I Bootstrap, un framework CSS avec un sytème de grille, des


styles pré-définis et des composants supplémentaires
I Certains composants incluent des événements, dont la
programmation est cachée (e.g., tooltip, carrousel)

Prochain cours : la programmation d’événements en JavaScript

LIFIHM - Interactions Humain Machine // Programmation pour l’IHM - interfaces UCBL Lyon 1 72 / 72

Vous aimerez peut-être aussi