Rhybuddion
Darparu negeseuon adborth cyd-destunol ar gyfer gweithredoedd arferol defnyddwyr gyda llond llaw o negeseuon rhybudd hyblyg sydd ar gael.
Enghreifftiau
Mae rhybuddion ar gael ar gyfer unrhyw hyd o destun, yn ogystal â botwm diswyddo dewisol. Ar gyfer steilio cywir, defnyddiwch un o'r wyth dosbarth cyd-destunol gofynnol.alert-success
(ee, ). Ar gyfer diswyddo mewnol, defnyddiwch yr ategyn rhybuddion 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>
Cyfleu ystyr i dechnolegau cynorthwyol
Mae defnyddio lliw i ychwanegu ystyr yn rhoi arwydd gweledol yn unig, na fydd yn cael ei gyfleu i ddefnyddwyr technolegau cynorthwyol - megis darllenwyr sgrin. Sicrhewch fod gwybodaeth a ddynodir gan y lliw naill ai'n amlwg o'r cynnwys ei hun (ee y testun gweladwy), neu'n cael ei chynnwys trwy ddulliau amgen, megis testun ychwanegol wedi'i guddio gyda'r .sr-only
dosbarth.
Lliw cyswllt
Defnyddiwch y .alert-link
dosbarth cyfleustodau i ddarparu dolenni lliw cyfatebol yn gyflym o fewn unrhyw rybudd.
<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>
Cynnwys ychwanegol
Gall rhybuddion hefyd gynnwys elfennau HTML ychwanegol fel penawdau, paragraffau a rhanwyr.
Da iawn!
Aww ie, rydych chi wedi darllen y neges rhybuddio bwysig hon yn llwyddiannus. Mae'r testun enghreifftiol hwn yn mynd i redeg ychydig yn hirach fel y gallwch weld sut mae bylchau o fewn rhybudd yn gweithio gyda'r math hwn o gynnwys.
Pryd bynnag y bydd angen, gwnewch yn siŵr eich bod chi'n defnyddio cyfleustodau ymyl i gadw pethau'n braf ac yn daclus.
<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>
Diswyddo
Gan ddefnyddio'r ategyn rhybuddio JavaScript, mae'n bosibl diystyru unrhyw rybudd ar-lein. Dyma sut:
- Gwnewch yn siŵr eich bod wedi llwytho'r ategyn rhybuddio, neu'r Bootstrap JavaScript a luniwyd.
- Os ydych chi'n adeiladu ein JavaScript o'r ffynhonnell, mae angen
util.js
. Mae'r fersiwn a luniwyd yn cynnwys hyn. - Ychwanegu botwm diswyddo a'r
.alert-dismissible
dosbarth, sy'n ychwanegu padin ychwanegol i'r dde o'r rhybudd ac yn gosod y.close
botwm. - Ar y botwm diswyddo, ychwanegwch y
data-dismiss="alert"
priodoledd, sy'n sbarduno ymarferoldeb JavaScript. Byddwch yn siwr i ddefnyddio'r<button>
elfen ag ef ar gyfer ymddygiad priodol ar draws pob dyfais. - I animeiddio rhybuddion wrth eu diystyru, gofalwch eich bod yn ychwanegu'r
.fade
a.show
dosbarthiadau.
Gallwch weld hyn ar waith gyda demo byw:
<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>
Ymddygiad JavaScript
Sbardunau
Galluogi diswyddo rhybudd trwy JavaScript:
$('.alert').alert()
Neu gyda data
phriodoleddau ar fotwm o fewn y rhybudd , fel y dangosir uchod:
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
Sylwch y bydd cau rhybudd yn ei dynnu o'r DOM.
Dulliau
Dull | Disgrifiad |
---|---|
$().alert() |
Yn gwneud rhybudd yn gwrando am ddigwyddiadau clicio ar elfennau disgynnydd sydd â'r data-dismiss="alert" priodoledd. (Ddim yn angenrheidiol wrth ddefnyddio awto-gychwyn y data-api.) |
$().alert('close') |
Yn cau rhybudd trwy ei dynnu o'r DOM. Os yw'r .fade a .show dosbarthiadau yn bresennol ar yr elfen, bydd y rhybudd yn diflannu cyn iddo gael ei dynnu. |
$().alert('dispose') |
Yn dinistrio rhybudd elfen. |
$('.alert').alert('close')
Digwyddiadau
Mae ategyn rhybuddio Bootstrap yn datgelu rhai digwyddiadau i'w cysylltu â swyddogaethau rhybuddio.
Digwyddiad | Disgrifiad |
---|---|
close.bs.alert |
Mae'r digwyddiad hwn yn tanio ar unwaith pan close elwir y dull enghraifft. |
closed.bs.alert |
Mae'r digwyddiad hwn yn cael ei danio pan fydd y rhybudd wedi'i gau (bydd yn aros i'r trawsnewidiadau CSS gael eu cwblhau). |
$('#myAlert').on('closed.bs.alert', function () {
// do something...
})