Alerts
Praebere contextuales feedback nuntios pro usuario actuum typicorum cum paucis nuntiis promptorum et flexibilium erectorum.
Exempla
Artes in promptu sunt cuilibet textus longitudinis, necnon bullarum ad libitum dimittendi. Ad propriam phrasim, uti una ex octo classibus contextualis (eg, ) requiritur . .alert-success
Ad dimissionem inline, summis jQuery plugin utere .
<div class="alert alert-primary" role="alert">
A simple primary alert—check it out!
</div>
<div class="alert alert-secondary" role="alert">
A simple secondary alert—check it out!
</div>
<div class="alert alert-success" role="alert">
A simple success alert—check it out!
</div>
<div class="alert alert-danger" role="alert">
A simple danger alert—check it out!
</div>
<div class="alert alert-warning" role="alert">
A simple warning alert—check it out!
</div>
<div class="alert alert-info" role="alert">
A simple info alert—check it out!
</div>
<div class="alert alert-light" role="alert">
A simple light alert—check it out!
</div>
<div class="alert alert-dark" role="alert">
A simple dark alert—check it out!
</div>
Deferre significatio technologiae adiuvandae
Color usus ad significationem addere tantum praebet indicationem visualem, quae utentibus technologiarum adiuvantium - sicut lectorum tegumentum. Ut informationes colore notatae sint vel ex ipso contento perspicuae (exempli gratia textus visibilis), vel per medium includi alterum, sicut textus additus occultus cum .sr-only
genere.
Link color
Classis utilitate utere .alert-link
ut cito adaptare nexus coloratos in quibusvis intenti.
<div class="alert alert-primary" role="alert">
A simple primary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-secondary" role="alert">
A simple secondary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-success" role="alert">
A simple success alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-danger" role="alert">
A simple danger alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-warning" role="alert">
A simple warning alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-info" role="alert">
A simple info alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-light" role="alert">
A simple light alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-dark" role="alert">
A simple dark alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
Additional content
Alerts etiam elementa HTML additamenta continere possunt sicut capita, paragraphos et divisores.
Bene factum!
Aww yeah, feliciter hoc nuntium intentum magnum lege. Hoc exemplum textum paulo longiorem futurum est ut videre potes quomodo intra intenti opera cum huiusmodi contenti spacia perspicias.
Quotiens opus est, scito margine utilitatum ad res conservandas lepida et luculenta uti.
<div class="alert alert-success" role="alert">
<h4 class="alert-heading">Well done!</h4>
<p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
<hr>
<p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
</div>
dimissis
Plugin utens intento JavaScript, possibile est aliquem intentum inlineare. Ecce quomodo:
- Vide plugin intenti te onustum vel JavaScript Bootstrap compilavit.
- Si JavaScript a fonte aedificas, postulat
util.js
. Versio compilata hoc includit. - Bullam dimissionis et genus adde
.alert-dismissible
, quod addit additamentum ad ius intenti et positionem.close
puga. - In Bulla dimissionis,
data-dismiss="alert"
attributum adde, quod JavaScript functionality efficit. Fac uti<button>
elementum cum eo ad mores per omnes machinas. - Animas erectas dimittentes, certas
.fade
ac.show
classes addere.
Hoc in actu videre potes cum demo vivam:
<div class="alert alert-warning alert-dismissible fade show" role="alert">
<strong>Holy guacamole!</strong> You should check in on some of those fields below.
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
JavaScript mores
Triggers
Admitte dimissionem erecti per JavaScript:
$('.alert').alert()
Vel cum data
attributis per bullam intus erectis , ut supra demonstratum est;
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
Nota quod clausula evigilans removebit a dom.
Methodi
Methodus | Descriptio |
---|---|
$().alert() |
Intenti audientiam facit per click eventus de elementis descendentibus quae data-dismiss="alert" attributum habent. (Non necesse est cum usura notitia-api scriptoris auto- initializationis). |
$().alert('close') |
Claudit erectum a dom. Si classes .fade et partes .show insunt, intenti deficiant antequam removeatur. |
$().alert('dispose') |
Elementum destruit intentus. |
$('.alert').alert('close')
Events
Bootstrap plugin vigilans paucas eventus exponit pro hamo in ad functionem intenti.
Eventus | Descriptio |
---|---|
close.bs.alert |
Huius rei accendit statim cum close instantia methodus appellatur. |
closed.bs.alert |
Eventus hic accensus est cum intentus clausus est (expectabo CSS transitus ad perficiendum). |
$('#myAlert').on('closed.bs.alert', function () {
// do something...
})