Source

Duýduryşlar

Elýeterli we çeýe duýduryş habarlary bilen adaty ulanyjy hereketleri üçin kontekstli jogap habarlaryny beriň.

Mysallar

Duýduryşlar tekstiň islendik uzynlygy, şeýle hem goşmaça işden aýyrmak düwmesi üçin elýeterlidir. Dogry bezemek üçin zerur sekiz kontekst synpynyň birini ulanyň (mysal üçin .alert-success). Içerki işden çykarmak üçin duýduryş jQuery pluginini ulanyň .

<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>
Kömekçi tehnologiýalara many bermek

Reňk ulanmak manysyny goşmak üçin diňe ekran okyjylary ýaly kömekçi tehnologiýalary ulanyjylara ýetirip bolmajak wizual görkezme berýär. Reňk bilen görkezilen maglumatlaryň mazmunyň özünden (meselem, görünýän tekstden) aç-açan ýa-da .sr-onlysynp bilen gizlenen goşmaça tekst ýaly alternatiw usullar arkaly girizilendigine göz ýetiriň.

.alert-linkIslendik duýduryşyň içinde gabat gelýän reňkli baglanyşyklary çalt üpjün etmek üçin peýdaly synpy ulanyň .

<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>

Goşmaça mazmun

Duýduryşlarda sözbaşylar, abzaslar we bölüjiler ýaly goşmaça HTML elementleri hem bolup biler.

<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>

Işden aýyrmak

Duýduryş JavaScript plaginini ulanyp, islendik duýduryş setirini ýatyryp bolýar. Ine:

  • Duýduryş plaginini ýa-da düzülen Bootstrap JavaScript-i ýükländigiňize göz ýetiriň.
  • JavaScriptimizi çeşmeden gurýan bolsaňyz, talap edýärutil.js . Toplanan wersiýa muny öz içine alýar.
  • .alert-dismissibleDuýduryşyň sag tarapyna goşmaça pad goşýan we düwmäni ýerleşdirýän işden aýyrmak düwmesini we synpy goşuň .close.
  • Işden aýyrmak düwmesine data-dismiss="alert"JavaScript-iň işlemegine itergi berýän atribut goşuň. <button>Elementi ähli enjamlarda dogry alyp barmak üçin ulanmagy unutmaň .
  • Işden aýrylanda duýduryşlary janlandyrmak üçin, .fadesapaklary .showgoşuň.

Muny göni efirde görüp bilersiňiz:

<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 häsiýeti

Triggerler

JavaScript arkaly duýduryşy ýatyrmaga mümkinçilik beriň:

$('.alert').alert()

Ora -da ýokarda görkezilişi ýaly duýduryşyň içindäkidata düwmäniň atributlary bilen :

<button type="button" class="close" data-dismiss="alert" aria-label="Close">
  <span aria-hidden="true">&times;</span>
</button>

Duýduryşy ýapmak ony DOM-dan aýyrjakdygyna üns beriň.

Usullar

Usul Düşündiriş
$().alert() Aýratynlygy bolan nesil elementlerine basmak hadysalaryny duýduryş diňleýär data-dismiss="alert". (Data-api-iň awtomatiki başlangyjy ulanylanda hökman däl.)
$().alert('close') DOM-dan aýyrmak bilen duýduryşy ýapýar. Eger elementde .fadewe .showsynplar bar bolsa, duýduryş aýrylmazdan ozal öçer.
$().alert('dispose') Bir elementiň duýduryşyny ýok edýär. 
$('.alert').alert('close')

Wakalar

“Bootstrap” -yň duýduryş plugin, duýduryş funksiýasyna girmek üçin birnäçe wakany paş edýär.

Waka Düşündiriş
close.bs.alert closeBu waka mysal usuly çagyrylanda derrew ýanýar .
closed.bs.alert Bu waka duýduryş ýapylanda atylýar (CSS geçişleriniň tamamlanmagyna garaşýar). 
$('#myAlert').on('closed.bs.alert', function () {
  // do something...
})