twitter-bootstrap
Mettere in guardia
Ricerca…
Osservazioni
Vedi di più: http://getbootstrap.com/components/#alerts
Tipi di avviso
A differenza di altri componenti Bootstrap come i pulsanti , gli avvisi non vengono forniti con uno stile default
o primary
, poiché sono pensati per avvisare l'utente in un modo specifico.
<div class="alert alert-success" role="alert">
Some action was completed successfully
</div>
<div class="alert alert-info" role="alert">
Here is some information. Just FYI.
</div>
<div class="alert alert-warning" role="alert">
Careful! You're about to do something dangerous.
</div>
<div class="alert alert-danger" role="alert">
An error (or something dangerous) happened!
</div>
Avviso di esempio di base
<div class="container">
<h2>Alerts</h2>
<div class="alert alert-success">
<strong>Success!</strong>
</div>
<div class="alert alert-info">
<strong>Info!</strong>
</div>
<div class="alert alert-warning">
<strong>Warning!</strong> All foelds are required
</div>
<div class="alert alert-danger">
The username is required and can't be empty
</div>
</div>
Avvisi animati
Le classi .fade
e .in
aggiungono un effetto di dissolvenza quando si chiude il messaggio di avviso.
<div class="alert alert-success fade in">
<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
<strong>Success!</strong> This is a good example!
</div>
Avvisi non ammissibili
Per dare una funzionalità di close alert, tutto ciò di cui abbiamo bisogno è aggiungere data-dismiss="alert"
al nostro pulsante di chiusura.
<div class="alert alert-info alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
Sphinx of black quartz, judge my vow
</div>
.alert-dismissible
e .close
classes sono facoltative, utili solo per lo stile.
Collega il colore negli avvisi
Per fornire rapidamente un colore corrispondente per i collegamenti all'interno di qualsiasi avviso, possiamo utilizzare la classe di utilità .alert-link
.
<div class="alert alert-success">
You have won! Click <a href="#" class="alert-link">here</a> to claim your prize ...
</div>
<div class="alert alert-info">
You might want to check <a href="#" class="alert-link">this</a> instead.
</div>
<div class="alert alert-warning">
You are running out of coins. Buy more <a href="#" class="alert-link">here</a>.
</div>
<div class="alert alert-danger">
Something went wrong. You can try <a href="#" class="alert-link">again</a> or ...
</div>
Modified text is an extract of the original Stack Overflow Documentation
Autorizzato sotto CC BY-SA 3.0
Non affiliato con Stack Overflow