Vous pouvez avoir plusieurs raisons d'attirer l'attention des visiteurs sur
certaines parties de votre site Web ou peut-être vous voulez alerter
les utilisateurs de certaines informations ou vous pouvez tenir
les utilisateurs informés de l'avancement d'une opération qu'ils initient sur votre site Web.
Regardons quelques mécanismes différents que
bootstrap fournit pour ce genre d'opérations.
Bootstrap dispose de nombreux composants différents qui nous permettent de tenir les utilisateurs informés.
Nous avons des badges qui nous permettent d'attirer l'attention des
utilisateurs sur les dernières mises à jour de notre page Web.
Nous avons des
messages d'alerte, d'erreur et d'avertissement qui peuvent être remis aux utilisateurs
s'ils effectuent des opérations qui ne sont pas autorisées.
De plus, nous pouvons utiliser des barres de progression pour tenir les utilisateurs
informés de l'avancement des opérations qu'ils initient sur notre site Web.
Regardons cela dans un peu plus en détail ensuite. Les
badges sont un moyen facile d'ajouter une petite quantité d'
informations à votre site Web pour attirer l'attention des visiteurs.
À titre d'exemple, vous pouvez voir que nous avons ajouté quelques badges à
cette description du plat ici sur notre page principale afin que vous
puissiez voir que nous avons le badge de couleur rouge attirant l'attention des utilisateurs
sur le fait que c'est un élément chaud dans le menu
et peut-être même les informer sur le prix du menu.
Ce type de petits éléments d'information peut être ajouté à votre site Web à l'aide d'un badge.
Un badge par exemple,
le rouge ici est créé en utilisant une plage avec le badge de classes et le badge-danger.
Vous pouvez utiliser les différentes autres couleurs qui sont intégrées dans
le cadre bootstrap pour créer des badges de plusieurs couleurs différentes.
De même, vous pouvez utiliser un badge-pilule qui crée un rectangle arrondi comme vous le voyez ici,
et cela peut être fait en appliquant le badge, la
classe de badge-pilule à elle avec la classe de badge.
Les alertes sont une autre façon d'informer les utilisateurs de l'information.
Ainsi, par exemple, une alerte peut être créée en utilisant le composant alerte
qui peut simplement être créé en appliquant l'alerte avec alerte par exemple,
dans cet exemple, vous voyez un avertissement créant une alerte de couleur jaune.
Vous pouvez appliquer à nouveau danger primaire et d'autres couleurs bootstrap là-bas.
Et puis la classe alert-dismissible,
vous permet d'inclure une classe là sur laquelle l'utilisateur peut cliquer pour rejeter une alerte.
Pour soutenir cette opération,
vous devez également inclure un bouton dans votre alerte comme vous pouvez le voir à l'intérieur de cette div,
nous avons inclus ce bouton ici.
Et le contenu de l'alerte peut être formaté en HTML standard comme vous pouvez le voir ici.
Ainsi, cela nous permet de créer une alerte sur notre page web.
Donc, pour résumer, l'alerte peut être créé par un appli de la classe d'alerte
avec des classes d'alerte qualifiées supplémentaires,
qui vous permettent de créer des alertes dans différentes couleurs.
Nous pouvons également inclure des liens dans nos alertes.
Nous pouvons également rendre l'alerte non valide en utilisant
la classe d'alerte non valide et en incluant un bouton croisé à l'intérieur de notre alerte.
De même, des barres de progression sont incluses dans les sites Web afin de tenir
les utilisateurs informés de l'avancement de tout ce que nous avons initié sur le site Web.
Par exemple, si vous téléchargez un fichier sur un site Web,
vous pouvez tenir l'utilisateur informé de la quantité de
fichier terminée en affichant une barre de progression sur le site Web.
Donc, la création d'une barre de progression dans bootstrap se
fait en appliquant la classe de progression à un div et à l'intérieur, nous pouvons appliquer
une autre div interne avec la barre de progression de la classe et
permettre également que cela soit plus stylé en utilisant des choses comme la
barre de progression rayée, puis vous pouvez appliquer la couleur pour
la barre de progression en spécifiant la couleur en tant que trait d'union BG et la couleur.
Donc, dans ce cas, le bg-danger étant appliqué à cette barre de progression.
Nous pouvons également faire rayé la partie de progression,
nous pouvons également animer la barre de progression,
et aussi spécifier la quantité de cette barre de progression doit être en forme.
Ainsi, en changeant
dynamiquement cette valeur de largeur, vous pouvez créer une barre de progression qui continuera à se mettre à jour sur la page Web.
Donc, pour résumer, une barre de progression peut être créée en
appliquant une classe de progression à la div et à l'intérieur
une div interne à laquelle vous appliquez
la classe de barre de progression vous permettra de créer une barre de progression.
Vous pouvez même empiler plusieurs barres de progression ensemble pour créer
une barre de progression empilée et également appliquer des couleurs différentes à la barre de progression et
peut également avoir une apparence différente pour la barre de progression à l'aide de
la classe rayée barre de progression et également la
classe animée barre de progression pour animer la bandes sur notre barre de progression.
Maintenant que nous avons examiné différentes façons d'alerter les utilisateurs,
faisons ensuite un exercice simple et utilisez des badges
dans notre page Web pour attirer l'attention des utilisateurs.