LE WEB 2.

0
Programmation
LE WEB 2.0
CHAPITRE VII
Création de site web avec Bootstrap (responsive)

AnnéeUniversitaire 2020/2021 Pr.Naziha LAAZ

 FRAMEWORK ?

 Le développement web présente de nombreux défis.

 Exemples:
 Faire vite des sites web (industrialiser)
 Faire des sites web jolis
 Faire des sites web utilisables
 Faire des sites web accessibles (ordinateurs/smartphones/tablettes, etc.)
 Réutiliser les éléments déjà conçus
 FRAMEWORK ?
 Un des moyens de relever ces défis est de se fonder
sur les bonnes pratiques qui existent déjà pour :

 accélérer le développement

 bien faire (joli, utilisable, accessible : navigateurs, écrans, personnes)

 QU’EST CE QU’UN FRAMEWORK?
 Dans le Web, un framework est en effet un ensemble de
composants organisés de manière à proposer un service
technique complet à l’utilisateur.
 En d’autres termes, un framework web est une collection
d’outils techniques (HTML, CSS, JavaScript, etc.) simplifiant
l’organisation ou la réalisation d’un projet web.
 Réutiliser ce qui a déjà été réussi, le framework est un outil qui
peut être défini par :
Un framework est un cadre pour organiser et faciliter le développement grâce à
des concepts clairs, des méthodes efficaces, des morceaux de code, et des
éléments graphiques préconçus qui fonctionnent partout.
 DÉFINITION DE BOOTSTRAP

 Bootstrap est un framework CSS (notamment) très utilisé (développé par Twitter)
 C’est un service open source, de nouvelles possibilités s’offrent au plus grand nombre
de développeurs.
 Ce framework est accessible à tous, et de manière extrêmement rapide.
AVANTAGES DE BOOTSTRAP
 les avantages de Bootstrap sont les suivants :

 d’un point de vue technique :

 le Responsive design avec Mobile first ;

 un code HTML 5 et CSS 3 riche et propre ;
 une bibliothèque totalement open source.

 et plus généralement :

 une prise en main rapide ;

 un langage qui est basé sur des règles universelles ;
 un code en constante évolution ;
 une communauté importante.
 INCONVÉNIENTS DE BOOTSTRAP

 d’un point de vue technique :

 des bases en HTML et CSS indispensables ;

 légèrement plus lourd que la moyenne des autres frameworks ;
 un style graphique CSS impersonnel ;

 et plus généralement :

 il faut suivre l’évolution du framework ;

 il faut d’abord perdre du temps pour en gagner après ;
 il existe d’autres frameworks CSS, comme Foundation ;
POINTS FORTS DE BOOTSTRAP

 le CSS: toute une

librairie de classes
prédéfinies (h2, form,
…)

 les composants: toute

une librairie d’objets
prédéfinis (nav
boutons…).

 le javascript: toute une

librairie de scripts
prédéfinis (scroll,
transition,carousel…)
LE CONTENU DE BOOTSTRAP
 Le framework est à récupérer ici:
http://getbootstrap.com/getting-started#download
 Il contient différents fichiers ventilés dans des répertoires :

 des fichiers CSS (qui décrivent tous les blocs de règles)

 des fichiers d’icônes dans divers formats (pour compatibilité)
 des fichiers JavaScript (pour gérer la compatibilité avec tous les
navigateurs et pour ajouter des fonctionnalités).
 Ces fichiers utilisent la bibliothèque JavaScript jQuery qu’il
faut télécharger aussi :
http://code.jquery.com/jquery-2.1.1.min.js
 LE CONTENU DE BOOTSTRAP
 bootstrap.css comporte les classes de base de Bootstrap ;
 bootstrap.min.css comporte les mêmes classes de base que bootstrap.css mais
compressé ;
 bootstrap-theme.css contient des règles de styles particulières pour créer un thème
spécifique pour Bootstrap ;
 bootstrap-theme.min.css est identique à bootstrap-theme.css mais compressé ;
 glyphicons-halflings-regular.svg comporte la collection d'icônes au format svg ;
 glyphicons-halflings-regular.ttf comporte la collection d'icônes au format ttf ;
 glyphicons-halflings-regular.woff comporte la collection d'icônes au format woff ;
 glyphicons-halflings-regular.eot comporte la collection d'icônes au format eot ;
 bootstrap.js contient le code JavaScript des composants de Bootstrap ;
 bootstrap.min.js contient le même code JavaScript mais compressé ;
 HTML5 ET BOOTSTRAP
DOM
 Bootstrap propose un DOM de base pour les fichiers HTML. Il faut
l’utiliser pour profiter des avantages du framework.Voici cette base :

<!DOCTYPE html>
<html>
<head>
<title>Base de bootstrap</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">

<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>Titre du contenu</h1>
... contenu...
<script src="jquery/jquery-2.1.1.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
HTML5 ET BOOTSTRAP
DOM

 On y reconnaît le doctype du HTML5 (obligatoire

pour Bootstrap), et des éléments particuliers dans le
head :
 La balise meta permet de définir quelle est le type d’écran par défaut
 La balise link renvoie vers les CSS de Bootstrap
 Les balises script renvoient vers les programmes en JavaScript de Bootstrap qui rendent
certains navigateurs compatibles HTML5

 On retrouve aussi des balises script dans le body qui

permettent d’activer d’autres programmes en
JavaScript de Bootstrap.
Positionnement CSS, et décoration avec Bootstrap
Utilisation de la grille d’un framework

 Le système de grille fonctionne sur une ligne de plusieurs colonnes.

 Ces colonnes s’étirent de manière Responsive, ce qui permet à notre site Internet de
s’adapter aux différentes résolutions d’écrans (ordinateurs, tablettes, smartphones).
Positionnement CSS, et décoration avec Bootstrap
Avantages de la grille

 Elle facilite l’organisation des contenus

 Elle permet de respecter des proportions équilibrées entre les contenus

 Elle permet de respecter les marges qui conviennent à la lecture (rythme des blancs)
Positionnement CSS, et décoration avec Bootstrap
Système de fonctionnement de la grille BOOTSTRAP
 Imaginons un système de boites à trois niveaux A, B et C.
Ce système a la particularité de fonctionner de la même
manière que la grille Bootstrap par imbrication.

C
Colonnes

B
Row

A
Container
Positionnement CSS, et décoration avec Bootstrap
Système de fonctionnement de la grille BOOTSTRAP
 Le conteneur est l’élément principal de la grille : il
comprend l’ensemble de nos lignes de code et, donc, de
notre grille.
 Il existe deux sortes de conteneurs:
 container : il possède une largeur fixe d’un maximum de 1 200
pixels (largeur de 1 170 pixels et 15 pixels de marge interne de
chaque côté). Si nous affichons le site Internet au-delà de cette
résolution, le conteneur sera fixé et centré de manière
automatique.
 container-fluid : à l’inverse de container, il n’a pas de largeur
maximale fixée. Il prend donc tout l’espace disponible, quelle que
soit la résolution de l’écran
Positionnement CSS, et décoration avec Bootstrap
grille BOOTSTRAP : Ligne
 La ligne, row en anglais, nous permet de créer un groupement
horizontal de douze colonnes.

Elle annule les marges internes (appelées « gouttières », ou padding

en anglais) des première et dernière colonnes créées par la grille.
 Positionnement CSS, et décoration avec Bootstrap
grille BOOTSTRAP : Colonnes
 Chaque ligne est formée de douze colonnes, lesquelles contiennent
les éléments de notre site.

 Pour réaliser correctement notre grille, le framework demande de

préciser sur quel écran nous souhaitons adapter cette dernière.

 La grille de Bootstrap est composée de 12 colonnes. On

l’utilise grâce à des classes CSS particulières qui déterminent la
largeur d’un contenu en nombre de colonnes: col-md-* où « * »
correspond au nombre de colonnes.
 Positionnement CSS, et décoration avec Bootstrap
Options de grille
 Le système de grille comporte quatre classes:

Extra small Small device Medium device Large device

Taille max de Auto 750px 970px 1170px
l’écran

Type appareil Téléphones Tablettes Ordinateurs bureau Grands postes

de travail

Préfixe de classe .col-xs- .col-sm- .col-md- .col-lg-

Taille max de la Auto 60px 78px 95px
colonne
Structure de page
Structure de page
 Exemple1:

Exemple2:
 Classes CSS spécifiques de Bootstrap
Des classes pour positionner sur la grille
 Les frameworks CSS fournissent donc des classes CSS qui facilitent le travail
des concepteurs.
 Des classes pour positionner sur la grille
 Voici quelques exemples avec « * » correspondant à un nombre de
colonnes.
 col-md-* permet de choisir la largeur d’un contenu en nombre de
colonnes
 row désigne une ligne de la grille : les lignes se superposent dans une
colonne
 col-md-offset-* permet de choisir à partir de quelle colonne
commence un contenu
 col-md-pull-* permet de décaler un contenu de « * » colonnes à
gauche de sa position normale
 col-md-push-* permet de décaler un contenu de « * » colonnes à
droite de sa position normale
 Les deux dernières classes (col-md-pull-* et col-md-push-*) permettent
donc de choisir l’ordre des colonnes.
 Classes CSS spécifiques de Bootstrap
Des classes typographiques et décoratives
 D’autres classes proposées par Bootstrap permettent de
s’intéresser à l’aspect des contenus et à la typographie. Voici
quelques exemples :

 h* où « * » : est compris entre 1 à 6 permet de donner le

même style qu’un élément titre
 (<h*>) : à n’importe quel contenu

 lead permet de mettre en évidence un contenu (il sera

notamment en plus gros)
 text-uppercase, text-lowercase, text-capitalize
permettent de choisir la casse du texte (majuscules ou
non).
 Classes CSS spécifiques de Bootstrap
Des classes pour le TEXTE
 La taille par défaut des caractères en bootstrap est 14px.
 Bootstrap sera le style des balises HTML ( <h1> à <h6> ) de la manière
suivante:
h1 h2 h3 h4 h5 h6
36px 30px 24px 18px 14px 12px

 Bootstrap sera le style du HTML <dl> élément de la manière suivante:

 Le code HTML <small> élément est utilisé pour créer un texte secondaire
plus léger en toute position:
 Classes CSS spécifiques de Bootstrap
Des classes pour le TEXTE

 Bootstrap a aussi quelques classes contextuelles qui peuvent être utilisés

pour fournir des "sens à travers des couleurs".
 Les classes pour les couleurs de texte sont:
 .text-muted , texte coupé.
 .text-primary , texte important.
 .text-success , indique le succès.
 .text-info , texte représentant des informations.
 .text-warning: représentant un avertissement.

 .text-danger : texte qui représente le danger.

 Classes CSS spécifiques de Bootstrap
Des classes pour le TEXTE
 Les classes pour les couleurs d'arrière plan sont: .bg-
primary , .bg-success , bg-info , bg-warning , et .bg-danger:
 Utilisez les classes d'arrière-plan contextuelles pour fournir
"sens par couleurs"
 Classes CSS spécifiques de Bootstrap
Des classes pour le TEXTE

.text-left Indique le texte aligné à gauche

.text-center Indique le texte aligné au centre

.text-right Indique le texte aligné à droite

.text-justify Indique un texte justifié

.text-lowercase Indique le texte en minuscules

.text-uppercase Indique le texte en majuscule

.text-capitalize Indique le texte capitalisée

 Classes CSS spécifiques de Bootstrap
Des classes typographiques et décoratives

 Des icônes, obtenues en donnant une classe glyphicon

accompagnée d’une classe spécifique de l’icône

 http://getbootstrap.com/components/#glyphicons
par exemple :
<span class="glyphicon glyphicon-info-sign"></span>

 Il y en a beaucoup d’autres que vous pouvez

découvrir en anglais dans la documentation de
Bootstrap : http://getbootstrap.com/css/#type
 Bootstrap
Les glyphicons: Définition
 Glyphicons peuvent être utilisés dans le texte, les boutons, les barres d' outils,
navigation, formulaires, etc.
 Exemple:

 glyphicon Enveloppe:

 Imprimer glyphicon:

 Recherche glyphicon:

 Télécharger glyphicon:
Bootstrap
Les glyphicons: Syntaxe

 Une glyphicon est insérée avec la syntaxe suivante:

 <span class="glyphicon glyphicon-nom "></span>
 La partie nom dans la syntaxe ci - dessus doit être remplacé par le nom propre du
glyphicon.
 Exemple:

 <p>Envelope icon: <span class="glyphicon glyphicon-

envelope"></span></p>
 Classes CSS spécifiques de Bootstrap
Des classes pour les listes
 Liste non stylée
 La liste non stylisée masque les puces de texte tout en gardant l’organisation
sémantique du code.
 <ul class="list-unstyled">
 Liste en ligne
 La liste en ligne affiche tous les éléments en ligne, et non un élément par
ligne.
 <ul class="list-inline">
 Liste de description horizontale
 La liste de description horizontale aligne chaque balise <dt> et la balise
<dd> correspondante. Pour rendre horizontale la liste de description, nous
devons ajouter la classe CSS "dl-horizontal".
 <dl class="dl-horizontal">
 Bootstrap
Les images : Responsivité
 le Responsive se traduit pour l’image par une faculté
d’adaptation technique en fonction de l’écran final de
l’utilisateur.
 Peu importe avec quel type de produit on travaille. Avec la
classe .img-responsive, nous déterminons en CSS une largeur
égale à 100 % du contenant et une hauteur automatique

 L’image suit le redimensionnement de la page du navigateur à

tout moment.

 Pour intégrer une image en HTML, il nous faut utiliser une

balise <img>, comme dans l’exemple qui suit.

 <img src="" class="img-responsive" alt="mon image">

 Bootstrap
Les images : Formats
 Il existe trois formats d’image :
 arrondi (.img-rounded),
 rond (.img-circle)
 carré (.img-thumbnail).
 img-rounded, img-circle, img-thumbnail : permettent d’encadrer les
images de différentes façons (cette classe se réserve donc à des contenus
de ce type) : à bords arrondis, dans un cercle, dans une vignette.
 Bootstrap
Les images : Exemple
 img-rounded:

 img-circle:

 img-thumbnail :
 Bootstrap
Les boutons : Style
 Pour définir un bouton, nous devons appliquer la classe CSS
.btn
 Bootstrap fournit sept styles de boutons:
Par défaut primaire infos succès avertissement danger lien

btn-default btn- btn-info btn- btn-warning btn- btn-link

primary success danger

 Exemple:
<button type=« button» class=«btn btn-default » default </button>
<a href="#" class="btn btn-info" role="button">Link Button</a>
 Bootstrap
Les boutons : Taille
 Les classes qui définissent les différentes tailles sont:
 btn-lg : bouton grand
 btn-md : bouton moyen
 btn-sm : bouton petit
 btn-xs : bouton plus petit

 Exemple:
 Bootstrap
Les boutons : Taille

 Un bouton de niveau bloc couvre toute la largeur de l'élément parent.

 La classe .btn-block permet de créer un bouton de niveau bloc

 Exemple:
 Bootstrap
Les boutons : Etats
 Il existe deux états distincts pour les boutons : active et disabled.
 L’état active leur donne l’apparence d’un bouton sélectionné. Le second état,
disabled, signifie que le bouton est inutilisable : aucune action n’est donc
possible.
 Notons que ces états peuvent s’appliquer aux balises HTML <button> et
<a>
 Pour transformer un bouton en état active , nous devons ajouter la classe
.active:
 Exemple:
<button type="button" class="btn btn-primary btn-lg active">Bouton</button>
<a href="#" class="btn btn-default btn-lg active " role="button">Lien</a>
 Bootstrap
Les boutons : Etats
 Pour transformer un bouton en état disabled, nous devons faire attention à
la balise utilisée. En effet, cet état ne s’applique pas de la même manière pour
<button> et <a>.
 Exemple:
➢ Appliquer un état disabled à une balise <button> :
<button type="button" class="btn btn-lg btn-primary"
disabled="disabled">Bouton</button>
➢ Appliquer un état disabled à une balise <a> :

<a href="#" class="btn btn-default btn-lg disabled" role="button">Lien</a>

 Bootstrap
Les boutons : Groupe
 Bootstrap vous permet de regrouper une série de boutons en même temps (sur une
seule ligne) dans un groupe de boutons.
 Pour créer un groupe de boutons utiliser une division ayant une classe .btn-group

 Exemple:
<div class="btn-group">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<button type="button" class="btn btn-primary">Sony</button>
</div>
 Bootstrap
Les boutons : Groupe vertical
 Bootstrap prend également en charge des groupes de boutons verticaux:

 Exemple:

<div class="btn-group-vertical">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-
primary">Samsung</button>
<button type="button" class="btn btn-primary">Sony</button>
</div>
 Bootstrap
Les boutons : Groupe drop down
 On utilise un groupe de boutons pour créer des menus déroulants:

 Exemple:
<div class="btn-group">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-
toggle="dropdown">
Sony <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Tablet</a></li>
<li><a href="#">Smartphone</a></li>
</ul>
</div>
</div>
 Bootstrap
Les tableaux: Syntaxe

 Pour intégrer un tableau avec Bootstrap, il nous faut d’abord définir une balise HTML
<table> agrémentée d’une classe CSS .table.
 Sans cette classe stylistique, notre tableau ne pourra reconnaître les éléments
graphiques proposés.
<table class="table"></table>
Bootstrap
Les tableaux: Mise en forme tableau rayé
 Un arrière-plan coloré différemment une ligne sur deux
facilite la lecture d’un tableau
 Pour intégrer ce système « zébré », il nous faut ajouter la
classe CSS .table-striped à la balise<table>:
 <table class="table table-striped"></table>
 Bootstrap
Les tableaux: Mise en forme tableau bordé
 La classe .table-bordered ajoute une bordure englobant notre
tableau.
 Elle ajoute des frontières de tous les côtés de la table et les
cellules:
 <table class="table table-bordered"></table>
Bootstrap
Les tableaux: Mise en forme table-hover
 La classe .table-hover permet un état stationnaire sur les lignes
de table.
 ajoute un surlignage lors du passage de la souris de l’utilisateur.

 <table class="table table-hover"></table>

 Bootstrap
Les tableaux: Mise en forme Classes contextuelles
 Les cinq classes contextuelles servent à guider le regard de
l’utilisateur vers une information primordiale. Elles se
matérialisent par des couleurs différentes selon le contexte :
 active (grise) alerte l’utilisateur sur une ligne activée ;
 success (verte) indique un succès ;
 info (bleue) fournit une information. ;
 warning (jaune) s’interprète comme une alerte ;
 danger (rouge) signifie un danger, une erreur.

Par ailleurs, nous avons la possibilité d’administrer ces différentes classes

contextuelles sur une balise <tr> (une ligne), <td> ou <th> (une cellule
spécifique).
 Bootstrap
Les tableaux: Mise en forme Classes contextuelles

Exemples:

Résultat
Bootstrap
Les tableaux: Mise en forme tableau responsive
 Nous avons la possibilité d’ajouter une classe .table-responsive pour
rendre notre tableau adaptable aux différents tailles d’écrans.
 L’intégration de cette classe est différente d’une stylisation classique qui
s’applique sur la balise <table>.
 Ici, nous devons englober le tableau avec une nouvelle balise HTML de
classe .table-responsive :
<div class="table-responsive">
<table class="table">
...
</table>
</div>
 Bootstrap
Les Étiquettes et badges: Les étiquettes

 Les étiquettes et badges servent à mettre en avant un mot ou un chiffre contenu dans un menu,
un tableau ou un simple paragraphe.
 Créer des étiquettes
 Les étiquettes ont la particularité de proposer l’utilisation des classes CSS de mise en forme
telles que .label-success ou .label-warning.
 Elles sont régulièrement utilisées en remplacement des tags et keywords (« mots-clés ») par les
web designers.

 Exemple: Elles peuvent afficher

 différents statuts de livraison
 l’évolution d’un paiement ou l’indisponibilité d’un produit sur un site de vente en ligne.
 Nous définissons une balise <span> de classe .label et nous fixons son apparence grâce à une
des classes contextuelles disponibles.
 Bootstrap
Les Étiquettes et badges: Les étiquettes
 Exemple:
 Elles peuvent afficher différents statuts de livraison, l’évolution d’un paiement ou
l’indisponibilité d’un produit sur un site de vente en ligne. Nous définissons une balise
<span> de classe .label et nous fixons son apparence grâce à une des classes
contextuelles disponibles.
<span class="label label-default">Défaut</span>
<span class="label label-primary">Primaire</span>
<span class="label label-success">Succès</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Alerte</span>
<span class="label label-danger">Danger</span>
 Bootstrap
Les Étiquettes et badges: Les étiquettes

 Nous avons la possibilité d’intégrer une étiquette au sein

même d’une balise titre <h1> à <h6>.
 Exemple:
<h3>Je suis un titre h3 avec une
<span class="label label-default"> Étiquette</span>
</h3>
 Bootstrap
Les Étiquettes et badges: Les badges
 Créer des badges
 Contrairement aux étiquettes, les badges ne proposent pas les classes
contextuelles.
 Leur utilisation reste très ciblée.
 Utilisez la classe .badge dans les éléments <span> pour créer des badges:
 Exemple: Mettre en évidence un nombre de nouveautés et commentaires
non lus:
 Bootstrap
Les Étiquettes et badges: Les badges
 Nous avons la possibilité d’intégrer une étiquette au sein même d’une balise
 Les badges ont une apparence graphique aux bords arrondis plus prononcés que les étiquettes.
 Nous pouvons intégrer des badges à l’intérieur d’une balise <button> ou <a> sans autre ajout.
<a href="#">Boîte de réception <span class="badge">42</span></a>
<button class="btn btn-primary" type="button"> Boîte d’envoi <span
class="badge">1</span></button>
Les badges s’intègrent aussi facilement au sein d’une liste (.liste-group). Lorsqu’un élément .list-group-
item est soumis à une classe CSS .active, le badge s’affiche en
corrélation avec cet élément.
<ul class="list-group"> <li class="list-group-item active"> <span class="badge">14</span
Boîte de réception</li>
<li class="list-group-item"><span class="badge">0</span>Boîte d’envoi </li></ul>
 Bootstrap
Les alertes : Syntaxe
 L’intérêt du composant alert est qu’il peut accueillir tout type de texte et boutons
pour une utilisation maximale.
 Nous devons dans un premier temps définir une balise de classe .alert en lui fixant
l’attribut role="alert".

 Syntaxe:
<div class="alert" role="alert">
Ceci est une alerte.
</div>
 Bootstrap
Les alertes: Classes prédéfinies
 Bootstrap fournit un moyen facile de créer des messages d'alerte prédéfinis:
 Bootstrap
Les alertes: Classes prédéfinies
 Bootstrap offre différents niveaux d’importance, avec les classes
CSS .alert-success, .alert-warning, .alert-info et .alert-danger à
ajouter au sein de la balise HTML.
 Exemple:
 Bootstrap
Les alertes: Clôture
 Le framework nous permet de proposer à l’utilisateur de
masquer le message d’alerte par l’intermédiaire d’une croix.
 Cette dernière s’intègre avec une balise <button> composée
d’une classe CSS .close, de l’attribut data-dismiss="alert" pour
relier le script du plug-in Java-Script utilisé par Bootstrap, et de
l’attribut aria-label="Fermer" qui informe l’utilisateur et enrichit
l’accessibilité.
 Exemple:

<div class="alert alert-success">

<a href="#" class="close" data-dismiss="alert" aria-label="close">
&times;</a>
<strong>Success!</strong>
</div>
 Bootstrap
Les alertes: Insertion de boutons
 le framework nous permet d’intégrer des boutons. Très souvent, nous utiliserons cette
option via une question fermée « Oui/Non », par exemple « Souhaitez-vous confirmer
les changements de configuration ? »
 Il est préférable d’utiliser une balise paragraphe <p> pour aligner correctement notre
contenu. Nous pouvons aussi ajouter l’attribut data-dismiss="alert" au bouton annulant
l’action.
 Ainsi, l’utilisateur masquera l’alerte de deux manières différentes (par le bouton Non ou
via la croix).
 Exemple:
<div class="alert alert-warning alert-dismissible " role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label ="fermer"> ×</button>
<p>Souhaitez-vous confirmer les changements de configuration ?</p>
<p> <button type="button" class="btn btn-warning">Oui !</button>
<button type="button" data-dismiss="alert" class="btn btn-default">Non merci</button></p></div>
 Bootstrap
Les alertes: Effets

 Le .fade et .in ajoute un effet de fondu lors de la

fermeture du message d' alerte:

 Exemple:
<div class="alert alert-success fade in">
LE WEB 2.0
CHAPITRE VII
Création de site web avec Bootstrap (responsive)

AnnéeUniversitaire 2020/2021 Pr.Naziha LAAZ