Source

Alerts

Praebere contextual 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-successAd dimissionem inline, summis jQuery plugin utere .

<div class="alert alert-primary" role="alert">
  This is a primary alert—check it out!
</div>
<div class="alert alert-secondary" role="alert">
  This is a secondary alert—check it out!
</div>
<div class="alert alert-success" role="alert">
  This is a success alert—check it out!
</div>
<div class="alert alert-danger" role="alert">
  This is a danger alert—check it out!
</div>
<div class="alert alert-warning" role="alert">
  This is a warning alert—check it out!
</div>
<div class="alert alert-info" role="alert">
  This is a info alert—check it out!
</div>
<div class="alert alert-light" role="alert">
  This is a light alert—check it out!
</div>
<div class="alert alert-dark" role="alert">
  This is a 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-onlygenere.

Classis utilitate utere .alert-linkut cito adaptare nexus coloratos in quibusvis intenti.

<div class="alert alert-primary" role="alert">
  This is a 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">
  This is a 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">
  This is a 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">
  This is a 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">
  This is a 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">
  This is a 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">
  This is a 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">
  This is a 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.

<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, postulatutil.js . Versio compilata hoc includit.
  • Bullam dimissionis et genus adde .alert-dismissible, quod addit additamentum ad ius intenti et positionem .closepuga.
  • 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 .fadeac .showclasses 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">&times;</span>
  </button>
</div>

JavaScript mores

Triggers

Admitte dimissionem erecti per JavaScript:

$('.alert').alert()

Vel cum dataattributis per bullam intus erectis , ut supra demonstratum est;

<button type="button" class="close" data-dismiss="alert" aria-label="Close">
  <span aria-hidden="true">&times;</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 .fadeet partes .showinsunt, 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 closeinstantia 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…
})