Ահազանգեր
Տրամադրեք համատեքստային հետադարձ կապի հաղորդագրություններ օգտատիրոջ սովորական գործողությունների համար մի քանի մատչելի և ճկուն ահազանգերի հաղորդագրություններով:
Զգուշացումները հասանելի են տեքստի ցանկացած երկարության համար, ինչպես նաև կամընտիր անջատման կոճակը: Ճիշտ ոճավորման համար օգտագործեք ութ պահանջվող համատեքստային դասերից մեկը (օրինակ՝ .alert-success
): Ներքին աշխատանքից հեռացնելու համար օգտագործեք հիշեցումներ jQuery հավելվածը :
<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>
Օժանդակ տեխնոլոգիաներին իմաստ հաղորդելը
Իմաստ ավելացնելու համար գույնի օգտագործումը միայն տեսողական ցուցում է տալիս, որը չի փոխանցվի օժանդակ տեխնոլոգիաների օգտագործողներին, ինչպիսիք են էկրանի ընթերցողները: Համոզվեք, որ գույնով նշված տեղեկատվությունը կա՛մ ակնհայտ է հենց բովանդակությունից (օրինակ՝ տեսանելի տեքստից), կա՛մ ներառված է այլընտրանքային միջոցներով, ինչպիսին է .sr-only
դասի հետ թաքցված լրացուցիչ տեքստը:
Օգտագործեք .alert-link
օգտակար դասը` ցանկացած ահազանգում արագ տրամադրելու համապատասխան գունավոր հղումներ:
<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>
Զգուշացումները կարող են նաև պարունակել լրացուցիչ 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-ի միջոցով.
Կամ data
ատրիբուտներով կոճակի վրա ազդանշանի ներսում , ինչպես ցույց է տրված վերևում.
Նկատի ունեցեք, որ ծանուցումը փակելով այն կհեռացվի DOM-ից:
Մեթոդ | Նկարագրություն |
---|---|
$().alert() |
data-dismiss="alert" Կատարում է ազդանշան, որը լսում է ատրիբուտ ունեցող ժառանգական տարրերի վրա սեղմումների իրադարձությունները : (Պետք չէ data-api-ի ավտոմատ սկզբնավորումն օգտագործելիս): |
$().alert('close') |
Փակում է ահազանգը՝ հեռացնելով այն DOM-ից: Եթե .fade և .show դասերը առկա են տարրի վրա, նախքան այն հեռացնելը զգուշացումը կթուլանա: |
$().alert('dispose') |
Ոչնչացնում է տարրի զգոնությունը: |
Bootstrap-ի նախազգուշացման հավելվածը բացահայտում է մի քանի իրադարձություններ՝ ազդանշանային գործառույթին միանալու համար:
Իրադարձություն | Նկարագրություն |
---|---|
close.bs.alert |
Այս իրադարձությունը գործարկվում է անմիջապես, երբ close կանչվում է օրինակի մեթոդը: |
closed.bs.alert |
Այս իրադարձությունը գործարկվում է, երբ ահազանգը փակված է (կսպասի CSS-ի անցումների ավարտին): |