Source

Ահազանգեր

Տրամադրեք համատեքստային հետադարձ կապի հաղորդագրություններ օգտատիրոջ սովորական գործողությունների համար մի քանի մատչելի և ճկուն ահազանգերի հաղորդագրություններով:

Օրինակներ

Զգուշացումները հասանելի են տեքստի ցանկացած երկարության համար, ինչպես նաև կամընտիր անջատման կոճակը: Ճիշտ ոճավորման համար օգտագործեք ութ պահանջվող համատեքստային դասերից մեկը (օրինակ՝ .alert-success): Ներքին աշխատանքից հեռացնելու համար օգտագործեք հիշեցումներ jQuery հավելվածը :

<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>
Օժանդակ տեխնոլոգիաներին իմաստ հաղորդելը

Իմաստ ավելացնելու համար գույնի օգտագործումը միայն տեսողական ցուցում է տալիս, որը չի փոխանցվի օժանդակ տեխնոլոգիաների օգտագործողներին, ինչպիսիք են էկրանի ընթերցողները: Համոզվեք, որ գույնով նշված տեղեկատվությունը կա՛մ ակնհայտ է հենց բովանդակությունից (օրինակ՝ տեսանելի տեքստից), կա՛մ ներառված է այլընտրանքային միջոցներով, ինչպիսին է .sr-onlyդասի հետ թաքցված լրացուցիչ տեքստը:

Օգտագործեք .alert-linkօգտակար դասը` ցանկացած ահազանգում արագ տրամադրելու համապատասխան գունավոր հղումներ:

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

Լրացուցիչ բովանդակություն

Զգուշացումները կարող են նաև պարունակել լրացուցիչ HTML տարրեր, ինչպիսիք են վերնագրերը, պարբերությունները և բաժանարարները:

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

Հեռացնելով

Օգտագործելով նախազգուշացման JavaScript հավելվածը, հնարավոր է անջատել ներկառուցված ցանկացած ահազանգ: Ահա թե ինչպես.

  • Համոզված եղեք, որ դուք բեռնել եք ազդանշանային հավելվածը կամ կազմված Bootstrap JavaScript-ը:
  • Եթե ​​դուք կառուցում եք մեր JavaScript-ը աղբյուրից, դա պահանջում էutil.js : Կազմված տարբերակը ներառում է սա.
  • Ավելացրե՛ք անջատման կոճակը և .alert-dismissibleդասը, որն ավելացնում է լրացուցիչ լիցք ազդարարման աջ կողմում և տեղադրում .closeկոճակը:
  • Հրաժարման կոճակի վրա ավելացրեք data-dismiss="alert"հատկանիշը, որը գործարկում է JavaScript-ի գործառույթը: Համոզվեք, որ օգտագործեք <button>տարրը դրա հետ բոլոր սարքերում պատշաճ վարքագծի համար:
  • Զգուշացումները հեռացնելիս աշխուժացնելու համար համոզվեք, որ ավելացրեք .fadeև .showդասերը:

Դուք կարող եք դա տեսնել գործողության մեջ կենդանի ցուցադրմամբ.

<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-ի վարքագիծը

Գործարկիչներ

Միացնել ծանուցման անջատումը JavaScript-ի միջոցով.

$('.alert').alert()

Կամ dataատրիբուտներով կոճակի վրա ազդանշանի ներսում , ինչպես ցույց է տրված վերևում.

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

Նկատի ունեցեք, որ ծանուցումը փակելով այն կհեռացվի DOM-ից:

Մեթոդներ

Մեթոդ Նկարագրություն
$().alert() data-dismiss="alert"Կատարում է ազդանշան, որը լսում է ատրիբուտ ունեցող ժառանգական տարրերի վրա սեղմումների իրադարձությունները : (Պետք չէ data-api-ի ավտոմատ սկզբնավորումն օգտագործելիս):
$().alert('close') Փակում է ահազանգը՝ հեռացնելով այն DOM-ից: Եթե .fade​​և .showդասերը առկա են տարրի վրա, նախքան այն հեռացնելը զգուշացումը կթուլանա:
$().alert('dispose') Ոչնչացնում է տարրի զգոնությունը:
$(".alert").alert('close')

Իրադարձություններ

Bootstrap-ի նախազգուշացման հավելվածը բացահայտում է մի քանի իրադարձություններ՝ ազդանշանային գործառույթին միանալու համար:

Իրադարձություն Նկարագրություն
close.bs.alert Այս իրադարձությունը գործարկվում է անմիջապես, երբ closeկանչվում է օրինակի մեթոդը:
closed.bs.alert Այս իրադարձությունը գործարկվում է, երբ ահազանգը փակված է (կսպասի CSS-ի անցումների ավարտին):
$('#myAlert').on('closed.bs.alert', function () {
  // do something…
})