1 00:00:03,650 --> 00:00:08,240 Você pode ter várias razões para chamar a atenção dos visitantes 2 00:00:08,240 --> 00:00:11,890 para certas partes do seu site ou talvez você queira alertar 3 00:00:11,890 --> 00:00:16,370 os usuários sobre algumas informações ou você pode querer manter 4 00:00:16,370 --> 00:00:22,150 os usuários informados sobre o andamento de uma operação que eles iniciam em seu site. 5 00:00:22,150 --> 00:00:25,840 Vejamos alguns mecanismos diferentes que o 6 00:00:25,840 --> 00:00:30,750 bootstrap fornece para esse tipo de operações. 7 00:00:30,750 --> 00:00:38,810 Bootstrap tem muitos componentes diferentes que nos permitem manter os usuários informados. 8 00:00:38,810 --> 00:00:42,440 Temos crachás que nos permitem chamar a atenção dos 9 00:00:42,440 --> 00:00:46,550 usuários para atualizações recentes em nossa página web. 10 00:00:46,550 --> 00:00:48,365 Temos 11 00:00:48,365 --> 00:00:52,010 mensagens de alerta, erro e aviso que podem ser entregues aos usuários caso 12 00:00:52,010 --> 00:00:56,470 eles executem operações que não são permitidas. 13 00:00:56,470 --> 00:01:01,870 Além disso, podemos usar barras de progresso para manter os usuários informados 14 00:01:01,870 --> 00:01:08,135 sobre o progresso de quaisquer operações que iniciem em nosso site. 15 00:01:08,135 --> 00:01:11,455 Vamos ver isso com um pouco mais de detalhes a seguir. 16 00:01:11,455 --> 00:01:15,800 Os emblemas são uma maneira fácil de adicionar uma pequena quantidade de 17 00:01:15,800 --> 00:01:21,085 informações ao seu site para atrair a atenção dos visitantes. 18 00:01:21,085 --> 00:01:24,710 Como exemplo, você pode ver que adicionamos alguns emblemas a 19 00:01:24,710 --> 00:01:30,890 esta descrição do prato aqui em nossa página principal para que você 20 00:01:30,890 --> 00:01:37,480 possa ver que temos o emblema de cor vermelha chamando a atenção dos usuários para 21 00:01:37,480 --> 00:01:40,495 o fato de que este é um item quente no menu 22 00:01:40,495 --> 00:01:44,605 e talvez até mesmo informá-los sobre o preço do menu. 23 00:01:44,605 --> 00:01:51,455 Esses pequenos pedaços de informação podem ser adicionados ao seu site usando um crachá. 24 00:01:51,455 --> 00:01:52,960 Um emblema, por exemplo, 25 00:01:52,960 --> 00:02:00,400 o vermelho aqui é criado usando um span com o crachá de classes e badge-danger. 26 00:02:00,400 --> 00:02:04,495 Você pode usar as várias outras cores que são incorporadas 27 00:02:04,495 --> 00:02:11,945 na estrutura de bootstrap para criar emblemas de várias cores diferentes. 28 00:02:11,945 --> 00:02:18,075 Da mesma forma, você pode usar um crachá pílula que cria um retângulo arredondado como você vê aqui, 29 00:02:18,075 --> 00:02:21,700 e isso pode ser feito aplicando o crachá, 30 00:02:21,700 --> 00:02:26,000 classe pílula emblemático a ele juntamente com a classe de crachá. 31 00:02:26,000 --> 00:02:30,655 Alertas são outra forma de informar os usuários sobre informações. 32 00:02:30,655 --> 00:02:37,245 Assim, por exemplo, um alerta pode ser criado usando o componente de alerta 33 00:02:37,245 --> 00:02:45,370 que simplesmente pode ser criado aplicando o alerta com aviso de alerta, por exemplo, 34 00:02:45,370 --> 00:02:50,285 neste exemplo, você vê o aviso criando um alerta de cor amarela. 35 00:02:50,285 --> 00:02:57,075 Você pode aplicar novamente perigo primário e outras cores bootstrap lá. 36 00:02:57,075 --> 00:02:59,955 E, em seguida, classe dispensável de alerta, 37 00:02:59,955 --> 00:03:06,190 permite que você inclua uma classe lá que o usuário pode clicar para descartar um alerta. 38 00:03:06,190 --> 00:03:08,140 Para apoiar essa operação, 39 00:03:08,140 --> 00:03:14,625 você também precisa incluir um botão em seu alerta como você pode ver dentro desta div, 40 00:03:14,625 --> 00:03:16,740 nós incluímos este botão aqui. 41 00:03:16,740 --> 00:03:23,505 E o conteúdo do alerta pode ser formatado usando HTML padrão, como você pode ver aqui. 42 00:03:23,505 --> 00:03:27,490 Então, isso nos permite criar um alerta em nossa página web. 43 00:03:27,490 --> 00:03:32,320 Então, para resumir, o Alerta pode ser criado por uma aplicação da classe de alerta 44 00:03:32,320 --> 00:03:37,585 juntamente com classes de alerta de qualificação adicionais, 45 00:03:37,585 --> 00:03:40,560 que permitem que você crie alertas em cores diferentes. 46 00:03:40,560 --> 00:03:43,145 Também podemos incluir links em nossos alertas. 47 00:03:43,145 --> 00:03:46,110 Também podemos tornar o alerta descartável usando 48 00:03:46,110 --> 00:03:51,260 a classe dispensável de alerta e incluindo um botão cruzado dentro do nosso alerta. 49 00:03:51,260 --> 00:03:55,360 Da mesma forma, as barras de progresso estão incluídas nos sites para manter 50 00:03:55,360 --> 00:03:59,680 os usuários informados sobre o progresso de qualquer coisa que tenhamos iniciado no site. 51 00:03:59,680 --> 00:04:04,100 Por exemplo, se você estiver carregando um arquivo para um site, 52 00:04:04,100 --> 00:04:08,105 talvez você queira manter o usuário informado sobre quanto do arquivo 53 00:04:08,105 --> 00:04:12,780 concluiu o upload mostrando uma barra de progresso no site. 54 00:04:12,780 --> 00:04:16,780 Assim, criar uma barra de progresso no bootstrap é 55 00:04:16,780 --> 00:04:22,155 feito aplicando a classe de progresso a uma div e dentro que podemos aplicar 56 00:04:22,155 --> 00:04:26,265 outra div interna com a barra de progresso da classe e 57 00:04:26,265 --> 00:04:30,695 também permitir que seja mais estilizado usando coisas como 58 00:04:30,695 --> 00:04:34,890 barra de progresso listrado e então você pode aplicar a cor para 59 00:04:34,890 --> 00:04:40,180 a barra de progresso especificando a cor como hífen BG e a cor. 60 00:04:40,180 --> 00:04:44,910 Então, neste caso, o bg-danger sendo aplicado a esta barra de progresso. 61 00:04:44,910 --> 00:04:47,150 Nós também podemos fazer a parte de progresso listrado, 62 00:04:47,150 --> 00:04:49,395 nós também podemos animar a barra de progresso, 63 00:04:49,395 --> 00:04:54,100 e também especificar quanto dessa barra de progresso precisa estar em forma. 64 00:04:54,100 --> 00:04:58,015 Assim, alterando este valor de largura 65 00:04:58,015 --> 00:05:04,925 dinamicamente, você pode criar uma barra de progresso que continuará se atualizando na página web. 66 00:05:04,925 --> 00:05:08,350 Assim, para resumir, uma barra de progresso pode ser criada 67 00:05:08,350 --> 00:05:12,030 aplicando uma classe de progresso para a div e dentro de 68 00:05:12,030 --> 00:05:14,260 lá uma div interna para a qual você aplicar 69 00:05:14,260 --> 00:05:18,800 a classe barra de progresso permitirá que você crie barra de progresso. 70 00:05:18,800 --> 00:05:22,450 Você pode até mesmo empilhar várias barras de progresso juntas para criar 71 00:05:22,450 --> 00:05:28,325 uma barra de progresso empilhada e também aplicar cores diferentes à barra de progresso e também 72 00:05:28,325 --> 00:05:32,865 pode ter aparência diferente para a barra de progresso usando 73 00:05:32,865 --> 00:05:36,570 a classe listrada da barra de progresso e também a classe 74 00:05:36,570 --> 00:05:41,375 animada da barra de progresso para animar o listras na nossa barra de progresso. 75 00:05:41,375 --> 00:05:45,515 Agora que analisamos várias maneiras de alertar os usuários, 76 00:05:45,515 --> 00:05:50,925 vamos fazer um exercício simples em seguida e usar emblemas 77 00:05:50,925 --> 00:05:58,090 em nossa página web para chamar a atenção dos usuários.