Ահազանգեր
Տրամադրեք համատեքստային հետադարձ կապի հաղորդագրություններ օգտատիրոջ սովորական գործողությունների համար մի քանի մատչելի և ճկուն ահազանգերի հաղորդագրություններով:
Օրինակներ
Զգուշացումները հասանելի են տեքստի ցանկացած երկարության համար, ինչպես նաև կամընտիր անջատման կոճակը: Ճիշտ ոճավորման համար օգտագործեք ութ պահանջվող համատեքստային դասերից մեկը (օրինակ՝ .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">×</span>
  </button>
</div>JavaScript-ի վարքագիծը
Գործարկիչներ
Միացնել ծանուցման անջատումը JavaScript-ի միջոցով.
$('.alert').alert()Կամ dataատրիբուտներով կոճակի վրա ազդանշանի ներսում , ինչպես ցույց է տրված վերևում.
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
  <span aria-hidden="true">×</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…
})