Bootstrap - Alertas

Este capítulo discutirá sobre alertas e as classes que o Bootstrap fornece para alertas. Os alertas fornecem uma maneira de definir o estilo das mensagens para o usuário. Eles fornecem mensagens de feedback contextual para ações típicas do usuário.

Você pode adicionar um ícone opcional de fechamento para alertar. Para dispensar inline, use o plugin Alerts jQuery .

Você pode adicionar um alerta básico criando um wrapper <div> e adicionando uma classe de .alert e uma das quatro classes contextuais (por exemplo, .alert-success, .alert-info, .alert-warning, .alert-danger) O exemplo a seguir demonstra isso -

<div class = "alert alert-success">Success! Well done its submitted.</div>
<div class = "alert alert-info">Info! take this info.</div>
<div class = "alert alert-warning">Warning ! Dont submit this.</div>
<div class = "alert alert-danger">Error ! Change few things.</div>

Alertas de dispensa

Para construir um alerta de dispensa -

Adicione um alerta básico criando um wrapper <div> e adicionando uma classe de .alert e uma das quatro classes contextuais (por exemplo, .alert-success, .alert-info, .alert-warning, .alert-danger)
Também adicione opcional .alert-dismissable para a classe <div> acima.
Adicione um botão Fechar.

O exemplo a seguir demonstra isso -

<div class = "alert alert-success alert-dismissable">
   <button type = "button" class = "close" data-dismiss = "alert" aria-hidden = "true">
      &times;
   </button>
	
   Success! Well done its submitted.
</div>

<div class = "alert alert-info alert-dismissable">
   <button type = "button" class = "close" data-dismiss = "alert" aria-hidden = "true">
      &times;
   </button>
	
   Info! take this info.
</div>

<div class = "alert alert-warning alert-dismissable">
   <button type = "button" class = "close" data-dismiss = "alert" aria-hidden = "true">
      &times;
   </button>
	
   Warning ! Dont submit this.
</div>

<div class = "alert alert-danger alert-dismissable">
   <button type = "button" class = "close" data-dismiss = "alert" aria-hidden = "true">
      &times;
   </button>
	
   Error ! Change few things.
</div>

Certifique-se de usar o elemento <button> com o atributo data-CC0 = "alert" data.

Links em alertas

Para obter links em alertas -

Adicione um alerta básico criando um wrapper <div> e adicionando uma classe de .alert e uma das quatro classes contextuais (por exemplo, .alert-success, .alert-info, .alert-warning, .alert-danger)
Use o .alert-link classe de utilitário para fornecer rapidamente links coloridos correspondentes em qualquer alerta.

<div class = "alert alert-success">
   <a href = "#" class = "alert-link">Success! Well done its submitted.</a>
</div>

<div class = "alert alert-info">
   <a href = "#" class = "alert-link">Info! take this info.</a>
</div>

<div class = "alert alert-warning">
   <a href = "#" class = "alert-link">Warning ! Dont submit this.</a>
</div>

<div class = "alert alert-danger">
   <a href = "#" class = "alert-link">Error ! Change few things.</a>
</div>

↰ Previous page Next page ↱