Source

Rabhaidhean

Thoir seachad teachdaireachdan fios air ais co-theacsail airson gnìomhan àbhaisteach luchd-cleachdaidh leis an dòrlach de theachdaireachdan rabhaidh sùbailte a tha rim faighinn.

Eisimpleirean

Tha rabhaidhean rim faighinn airson fad teacsa sam bith, a bharrachd air putan cuir às do roghainn. Airson stoidhle ceart, cleachd aon de na h-ochd clasaichean co-theacsail a tha a dhìth (me, .alert-success). Airson cuir às do dhreuchd in-loidhne, cleachd am plugan rabhaidhean 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>
A’ toirt brìgh do theicneòlasan cuideachail

Chan eil a bhith a’ cleachdadh dath gus brìgh a chur ris ach a’ toirt seachad sealladh lèirsinneach, nach tèid a thoirt do luchd-cleachdaidh theicneòlasan taice - leithid leughadairean sgrion. Dèan cinnteach gu bheil fiosrachadh air a chomharrachadh leis an dath an dàrna cuid follaiseach bhon t-susbaint fhèin (me an teacsa faicsinneach), no air a thoirt a-steach tro dhòighean eile, leithid teacsa a bharrachd falaichte leis a’ .sr-onlychlas.

Cleachd an .alert-linkclas goireis gus ceanglaichean dathte a thoirt seachad gu sgiobalta taobh a-staigh rabhadh sam bith.

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

Susbaint a bharrachd

Faodaidh eileamaidean HTML a bharrachd a bhith ann an rabhaidhean mar cinn, paragrafan agus luchd-sgaraidh.

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

A' cur às

Le bhith a’ cleachdadh am plugan rabhadh JavaScript, tha e comasach cuir às do rabhadh in-loidhne sam bith. Seo mar a tha:

  • Dèan cinnteach gu bheil thu air am plugan rabhaidh, no am Bootstrap JavaScript a chuir ri chèile.
  • Ma tha thu a’ togail ar JavaScript bhon tùs, feumaidhutil.js e . Tha an dreach cruinnichte a’ toirt a-steach seo.
  • Cuir putan cuir às agus an .alert-dismissibleclas, a chuireas pleadhag a bharrachd air taobh deas an rabhaidh agus a chuireas am .closeputan air dòigh.
  • Air a’ phutan cuir às, cuir am data-dismiss="alert"feart ris, a bhrosnaicheas gnìomhachd JavaScript. Dèan cinnteach gun cleachd thu an <button>eileamaid leis airson giùlan ceart thar gach inneal.
  • Gus rabhaidhean a bheothachadh nuair a thèid an cur às, bi cinnteach gun cuir thu na clasaichean .fadeagus na .showclasaichean ris.

Chì thu seo ann an gnìomh le demo beò:

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

Giùlan JavaScript

Luchd-brosnachaidh

Dèan comas air rabhadh a chuir às tro JavaScript:

$('.alert').alert()

No le databuadhan air putan taobh a-staigh an rabhaidh , mar a chithear gu h-àrd:

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

Thoir an aire gun toir dùnadh rabhadh air falbh e bhon DOM.

Dòighean-obrach

Dòigh-obrach Tuairisgeul
$().alert() A’ toirt rabhadh ag èisteachd airson tachartasan cliog air eileamaidean sliochd aig a bheil am data-dismiss="alert"feart. (Chan eil sin riatanach nuair a thathar a’ cleachdadh fèin-thòiseachadh data-api.)
$().alert('close') A’ dùnadh rabhadh le bhith ga thoirt air falbh bhon DOM. Ma tha na clasaichean .fadeagus .showan làthair air an eileamaid, falbhaidh an rabhadh mus tèid a thoirt air falbh.
$().alert('dispose') A 'sgrios rabhadh eileamaid. 
$(".alert").alert('close')

Tachartasan

Bidh plugan rabhaidh Bootstrap a’ nochdadh grunn thachartasan airson a dhol a-steach do ghnìomhachd rabhaidh.

Tachartas Tuairisgeul
close.bs.alert Bidh an tachartas seo a’ losgadh sa bhad nuair closea chanar ris an dòigh eisimpleir.
closed.bs.alert Thèid an tachartas seo a losgadh nuair a tha an rabhadh dùinte (feitheamh ri eadar-ghluasadan CSS a chrìochnachadh). 
$('#myAlert').on('closed.bs.alert', function () {
  // do something…
})