Source

Ditemošo

Fana ka melaetša ya ditshwaotshwao tša seemo bakeng sa ditiro tše di tlwaelegilego tša modiriši ka seatla sa melaetša ya temošo ye e lego gona le ye e fetofetogago.

Mehlala

Ditemošo di hwetšagala bakeng sa botelele bjo bofe goba bofe bja sengwalwa, gammogo le konope ya go raka ya boikhethelo. Bakeng sa setaele se se swanetšego, šomiša e nngwe ya diklase tše seswai tše di nyakegago tša diteng (mohlala, .alert-success). Bakeng sa go rakwa ka gare ga mothaladi, diriša ditemošo tša jQuery plugin .

<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>
Go fetišetša tlhalošo go theknolotši ya go thuša

Go šomiša mmala go oketša tlhalošo go fa fela taetšo ya go bonwa, yeo e ka se fetišwego go badiriši ba theknolotši ya go thuša – go swana le babadi ba skrine. Netefatša gore tshedimošo yeo e bontšhitšwego ka mmala e ka ba e bonagala gabotse go tšwa diteng ka botšona (mohlala, sengwalwa se se bonagalago), goba e akaretšwa ka mekgwa ye mengwe, go swana le sengwalwa sa tlaleletšo seo se utilwego le .sr-onlysehlopha.

Šomiša .alert-linksehlopha sa utility go fa ka pela dikgokagano tša mebala ye e swanago ka gare ga temošo efe goba efe.

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

Diteng tša tlaleletšo

Ditemošo di ka ba le gape le dielemente tša tlaleletšo tša HTML go swana le dihlogo, ditemana le dikarolwana.

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

Go raka mošomong

Ka go diriša plugin ya JavaScript ya temošo, go a kgonega go lahla temošo efe goba efe ka gare ga mothaladi. Ke kamoo:

  • Kgonthiša gore o laeditše plugin ya temošo, goba JavaScript ya Bootstrap yeo e kgobokeditšwego.
  • Ge e ba o aga JavaScript ya rena go tšwa mothopong, e nyakautil.js . Phetolelo e kgobokeditšwego e akaretša se.
  • Oketša konope ya go raka le .alert-dismissiblesehlopha, seo se tlaleletšago ka padding e oketšegilego ka go le letona la temošo gomme e bea .closekonope.
  • Go konope ya go raka, oketša data-dismiss="alert"seka, seo se hlohleletšago mošomo wa JavaScript. Kgonthiša gore o šomiša <button>elemente le yona bakeng sa boitshwaro bjo bo swanetšego go ralala le didirišwa ka moka.
  • Go phediša ditemošo ge o di raka, kgonthišetša gore o tlaleletša ka .fadele .showdiklase.

O ka bona se se šoma ka demo ya go phela:

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

Boitshwaro bja JavaScript

Dihlohleletši

Kgontšha go rakwa ga temošo ka JavaScript:

$('.alert').alert()

Goba ka datadika go konope ka gare ga temošo , bjalo ka ge go bontšhitšwe ka mo godimo:

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

Hlokomela gore go tswalela temošo go tla e tloša go DOM.

Mekgwa ya go šoma

Mokgwa Tlhalošo
$().alert() E dira gore temošo e theeletša ditiragalo tša go klika go dielemente tša setlogolo tšeo di nago le data-dismiss="alert"seka. (Ga go nyakege ge o diriša go thoma ga go itiriša ga data-api.)
$().alert('close') E tswalela temošo ka go e tloša go DOM. Ge e .fadele gore .showdiklase tša le di gona godimo ga elemente, temošo e tla fifala pele e tlošwa.
$().alert('dispose') E senya temošo ya elemente. 
$(".alert").alert('close')

Ditiragalo

Bootstrap o temošo plugin pepentšha ditiragalo tše mmalwa bakeng sa hooking ka temošo tshebetso.

Tiragalo Tlhalošo
close.bs.alert Tiragalo ye e thunya ka pela ge closemokgwa wa mohlala o bitšwa.
closed.bs.alert Tiragalo ye e thuntšhwa ge temošo e tswaletšwe (e tla emela gore diphetogo tša CSS di phethe). 
$('#myAlert').on('closed.bs.alert', function () {
  // do something…
})