Você pode ter várias razões para chamar a atenção dos visitantes
para certas partes do seu site ou talvez você queira alertar
os usuários sobre algumas informações ou você pode querer manter
os usuários informados sobre o andamento de uma operação que eles iniciam em seu site.
Vejamos alguns mecanismos diferentes que o
bootstrap fornece para esse tipo de operações.
Bootstrap tem muitos componentes diferentes que nos permitem manter os usuários informados.
Temos crachás que nos permitem chamar a atenção dos
usuários para atualizações recentes em nossa página web.
Temos
mensagens de alerta, erro e aviso que podem ser entregues aos usuários caso
eles executem operações que não são permitidas.
Além disso, podemos usar barras de progresso para manter os usuários informados
sobre o progresso de quaisquer operações que iniciem em nosso site.
Vamos ver isso com um pouco mais de detalhes a seguir.
Os emblemas são uma maneira fácil de adicionar uma pequena quantidade de
informações ao seu site para atrair a atenção dos visitantes.
Como exemplo, você pode ver que adicionamos alguns emblemas a
esta descrição do prato aqui em nossa página principal para que você
possa ver que temos o emblema de cor vermelha chamando a atenção dos usuários para
o fato de que este é um item quente no menu
e talvez até mesmo informá-los sobre o preço do menu.
Esses pequenos pedaços de informação podem ser adicionados ao seu site usando um crachá.
Um emblema, por exemplo,
o vermelho aqui é criado usando um span com o crachá de classes e badge-danger.
Você pode usar as várias outras cores que são incorporadas
na estrutura de bootstrap para criar emblemas de várias cores diferentes.
Da mesma forma, você pode usar um crachá pílula que cria um retângulo arredondado como você vê aqui,
e isso pode ser feito aplicando o crachá,
classe pílula emblemático a ele juntamente com a classe de crachá.
Alertas são outra forma de informar os usuários sobre informações.
Assim, por exemplo, um alerta pode ser criado usando o componente de alerta
que simplesmente pode ser criado aplicando o alerta com aviso de alerta, por exemplo,
neste exemplo, você vê o aviso criando um alerta de cor amarela.
Você pode aplicar novamente perigo primário e outras cores bootstrap lá.
E, em seguida, classe dispensável de alerta,
permite que você inclua uma classe lá que o usuário pode clicar para descartar um alerta.
Para apoiar essa operação,
você também precisa incluir um botão em seu alerta como você pode ver dentro desta div,
nós incluímos este botão aqui.
E o conteúdo do alerta pode ser formatado usando HTML padrão, como você pode ver aqui.
Então, isso nos permite criar um alerta em nossa página web.
Então, para resumir, o Alerta pode ser criado por uma aplicação da classe de alerta
juntamente com classes de alerta de qualificação adicionais,
que permitem que você crie alertas em cores diferentes.
Também podemos incluir links em nossos alertas.
Também podemos tornar o alerta descartável usando
a classe dispensável de alerta e incluindo um botão cruzado dentro do nosso alerta.
Da mesma forma, as barras de progresso estão incluídas nos sites para manter
os usuários informados sobre o progresso de qualquer coisa que tenhamos iniciado no site.
Por exemplo, se você estiver carregando um arquivo para um site,
talvez você queira manter o usuário informado sobre quanto do arquivo
concluiu o upload mostrando uma barra de progresso no site.
Assim, criar uma barra de progresso no bootstrap é
feito aplicando a classe de progresso a uma div e dentro que podemos aplicar
outra div interna com a barra de progresso da classe e
também permitir que seja mais estilizado usando coisas como
barra de progresso listrado e então você pode aplicar a cor para
a barra de progresso especificando a cor como hífen BG e a cor.
Então, neste caso, o bg-danger sendo aplicado a esta barra de progresso.
Nós também podemos fazer a parte de progresso listrado,
nós também podemos animar a barra de progresso,
e também especificar quanto dessa barra de progresso precisa estar em forma.
Assim, alterando este valor de largura
dinamicamente, você pode criar uma barra de progresso que continuará se atualizando na página web.
Assim, para resumir, uma barra de progresso pode ser criada
aplicando uma classe de progresso para a div e dentro de
lá uma div interna para a qual você aplicar
a classe barra de progresso permitirá que você crie barra de progresso.
Você pode até mesmo empilhar várias barras de progresso juntas para criar
uma barra de progresso empilhada e também aplicar cores diferentes à barra de progresso e também
pode ter aparência diferente para a barra de progresso usando
a classe listrada da barra de progresso e também a classe
animada da barra de progresso para animar o listras na nossa barra de progresso.
Agora que analisamos várias maneiras de alertar os usuários,
vamos fazer um exercício simples em seguida e usar emblemas
em nossa página web para chamar a atenção dos usuários.