Source

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

Defnyddiwch y .alert-linkdosbarth 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.

<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 angenutil.js . Mae'r fersiwn a luniwyd yn cynnwys hyn.
  • Ychwanegu botwm diswyddo a'r .alert-dismissibledosbarth, sy'n ychwanegu padin ychwanegol i'r dde o'r rhybudd ac yn gosod y .closebotwm.
  • 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 diswyddo, gofalwch eich bod yn ychwanegu'r .fadea .showdosbarthiadau.

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">&times;</span>
  </button>
</div>

Ymddygiad JavaScript

Sbardunau

Galluogi diswyddo rhybudd trwy JavaScript:

$('.alert').alert()

Neu gyda dataphriodoleddau 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">&times;</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 disgynnol 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 .fadea .showdosbarthiadau 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 closeelwir 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...
})