1 00:00:03,650 --> 00:00:08,240 Vous pouvez avoir plusieurs raisons d'attirer l'attention des visiteurs sur 2 00:00:08,240 --> 00:00:11,890 certaines parties de votre site Web ou peut-être vous voulez alerter 3 00:00:11,890 --> 00:00:16,370 les utilisateurs de certaines informations ou vous pouvez tenir 4 00:00:16,370 --> 00:00:22,150 les utilisateurs informés de l'avancement d'une opération qu'ils initient sur votre site Web. 5 00:00:22,150 --> 00:00:25,840 Regardons quelques mécanismes différents que 6 00:00:25,840 --> 00:00:30,750 bootstrap fournit pour ce genre d'opérations. 7 00:00:30,750 --> 00:00:38,810 Bootstrap dispose de nombreux composants différents qui nous permettent de tenir les utilisateurs informés. 8 00:00:38,810 --> 00:00:42,440 Nous avons des badges qui nous permettent d'attirer l'attention des 9 00:00:42,440 --> 00:00:46,550 utilisateurs sur les dernières mises à jour de notre page Web. 10 00:00:46,550 --> 00:00:48,365 Nous avons des 11 00:00:48,365 --> 00:00:52,010 messages d'alerte, d'erreur et d'avertissement qui peuvent être remis aux utilisateurs 12 00:00:52,010 --> 00:00:56,470 s'ils effectuent des opérations qui ne sont pas autorisées. 13 00:00:56,470 --> 00:01:01,870 De plus, nous pouvons utiliser des barres de progression pour tenir les utilisateurs 14 00:01:01,870 --> 00:01:08,135 informés de l'avancement des opérations qu'ils initient sur notre site Web. 15 00:01:08,135 --> 00:01:11,455 Regardons cela dans un peu plus en détail ensuite. Les 16 00:01:11,455 --> 00:01:15,800 badges sont un moyen facile d'ajouter une petite quantité d' 17 00:01:15,800 --> 00:01:21,085 informations à votre site Web pour attirer l'attention des visiteurs. 18 00:01:21,085 --> 00:01:24,710 À titre d'exemple, vous pouvez voir que nous avons ajouté quelques badges à 19 00:01:24,710 --> 00:01:30,890 cette description du plat ici sur notre page principale afin que vous 20 00:01:30,890 --> 00:01:37,480 puissiez voir que nous avons le badge de couleur rouge attirant l'attention des utilisateurs 21 00:01:37,480 --> 00:01:40,495 sur le fait que c'est un élément chaud dans le menu 22 00:01:40,495 --> 00:01:44,605 et peut-être même les informer sur le prix du menu. 23 00:01:44,605 --> 00:01:51,455 Ce type de petits éléments d'information peut être ajouté à votre site Web à l'aide d'un badge. 24 00:01:51,455 --> 00:01:52,960 Un badge par exemple, 25 00:01:52,960 --> 00:02:00,400 le rouge ici est créé en utilisant une plage avec le badge de classes et le badge-danger. 26 00:02:00,400 --> 00:02:04,495 Vous pouvez utiliser les différentes autres couleurs qui sont intégrées dans 27 00:02:04,495 --> 00:02:11,945 le cadre bootstrap pour créer des badges de plusieurs couleurs différentes. 28 00:02:11,945 --> 00:02:18,075 De même, vous pouvez utiliser un badge-pilule qui crée un rectangle arrondi comme vous le voyez ici, 29 00:02:18,075 --> 00:02:21,700 et cela peut être fait en appliquant le badge, la 30 00:02:21,700 --> 00:02:26,000 classe de badge-pilule à elle avec la classe de badge. 31 00:02:26,000 --> 00:02:30,655 Les alertes sont une autre façon d'informer les utilisateurs de l'information. 32 00:02:30,655 --> 00:02:37,245 Ainsi, par exemple, une alerte peut être créée en utilisant le composant alerte 33 00:02:37,245 --> 00:02:45,370 qui peut simplement être créé en appliquant l'alerte avec alerte par exemple, 34 00:02:45,370 --> 00:02:50,285 dans cet exemple, vous voyez un avertissement créant une alerte de couleur jaune. 35 00:02:50,285 --> 00:02:57,075 Vous pouvez appliquer à nouveau danger primaire et d'autres couleurs bootstrap là-bas. 36 00:02:57,075 --> 00:02:59,955 Et puis la classe alert-dismissible, 37 00:02:59,955 --> 00:03:06,190 vous permet d'inclure une classe là sur laquelle l'utilisateur peut cliquer pour rejeter une alerte. 38 00:03:06,190 --> 00:03:08,140 Pour soutenir cette opération, 39 00:03:08,140 --> 00:03:14,625 vous devez également inclure un bouton dans votre alerte comme vous pouvez le voir à l'intérieur de cette div, 40 00:03:14,625 --> 00:03:16,740 nous avons inclus ce bouton ici. 41 00:03:16,740 --> 00:03:23,505 Et le contenu de l'alerte peut être formaté en HTML standard comme vous pouvez le voir ici. 42 00:03:23,505 --> 00:03:27,490 Ainsi, cela nous permet de créer une alerte sur notre page web. 43 00:03:27,490 --> 00:03:32,320 Donc, pour résumer, l'alerte peut être créé par un appli de la classe d'alerte 44 00:03:32,320 --> 00:03:37,585 avec des classes d'alerte qualifiées supplémentaires, 45 00:03:37,585 --> 00:03:40,560 qui vous permettent de créer des alertes dans différentes couleurs. 46 00:03:40,560 --> 00:03:43,145 Nous pouvons également inclure des liens dans nos alertes. 47 00:03:43,145 --> 00:03:46,110 Nous pouvons également rendre l'alerte non valide en utilisant 48 00:03:46,110 --> 00:03:51,260 la classe d'alerte non valide et en incluant un bouton croisé à l'intérieur de notre alerte. 49 00:03:51,260 --> 00:03:55,360 De même, des barres de progression sont incluses dans les sites Web afin de tenir 50 00:03:55,360 --> 00:03:59,680 les utilisateurs informés de l'avancement de tout ce que nous avons initié sur le site Web. 51 00:03:59,680 --> 00:04:04,100 Par exemple, si vous téléchargez un fichier sur un site Web, 52 00:04:04,100 --> 00:04:08,105 vous pouvez tenir l'utilisateur informé de la quantité de 53 00:04:08,105 --> 00:04:12,780 fichier terminée en affichant une barre de progression sur le site Web. 54 00:04:12,780 --> 00:04:16,780 Donc, la création d'une barre de progression dans bootstrap se 55 00:04:16,780 --> 00:04:22,155 fait en appliquant la classe de progression à un div et à l'intérieur, nous pouvons appliquer 56 00:04:22,155 --> 00:04:26,265 une autre div interne avec la barre de progression de la classe et 57 00:04:26,265 --> 00:04:30,695 permettre également que cela soit plus stylé en utilisant des choses comme la 58 00:04:30,695 --> 00:04:34,890 barre de progression rayée, puis vous pouvez appliquer la couleur pour 59 00:04:34,890 --> 00:04:40,180 la barre de progression en spécifiant la couleur en tant que trait d'union BG et la couleur. 60 00:04:40,180 --> 00:04:44,910 Donc, dans ce cas, le bg-danger étant appliqué à cette barre de progression. 61 00:04:44,910 --> 00:04:47,150 Nous pouvons également faire rayé la partie de progression, 62 00:04:47,150 --> 00:04:49,395 nous pouvons également animer la barre de progression, 63 00:04:49,395 --> 00:04:54,100 et aussi spécifier la quantité de cette barre de progression doit être en forme. 64 00:04:54,100 --> 00:04:58,015 Ainsi, en changeant 65 00:04:58,015 --> 00:05:04,925 dynamiquement cette valeur de largeur, vous pouvez créer une barre de progression qui continuera à se mettre à jour sur la page Web. 66 00:05:04,925 --> 00:05:08,350 Donc, pour résumer, une barre de progression peut être créée en 67 00:05:08,350 --> 00:05:12,030 appliquant une classe de progression à la div et à l'intérieur 68 00:05:12,030 --> 00:05:14,260 une div interne à laquelle vous appliquez 69 00:05:14,260 --> 00:05:18,800 la classe de barre de progression vous permettra de créer une barre de progression. 70 00:05:18,800 --> 00:05:22,450 Vous pouvez même empiler plusieurs barres de progression ensemble pour créer 71 00:05:22,450 --> 00:05:28,325 une barre de progression empilée et également appliquer des couleurs différentes à la barre de progression et 72 00:05:28,325 --> 00:05:32,865 peut également avoir une apparence différente pour la barre de progression à l'aide de 73 00:05:32,865 --> 00:05:36,570 la classe rayée barre de progression et également la 74 00:05:36,570 --> 00:05:41,375 classe animée barre de progression pour animer la bandes sur notre barre de progression. 75 00:05:41,375 --> 00:05:45,515 Maintenant que nous avons examiné différentes façons d'alerter les utilisateurs, 76 00:05:45,515 --> 00:05:50,925 faisons ensuite un exercice simple et utilisez des badges 77 00:05:50,925 --> 00:05:58,090 dans notre page Web pour attirer l'attention des utilisateurs.