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 .

Temošo e bonolo ya mathomo—e hlahlobe!

Temošo e bonolo ya bobedi—e hlahlobe!

Temošo e bonolo ya katlego—e hlahlobe!

Temošo e bonolo ya kotsi—e hlahlobe!

Temošo e bonolo ya temošo—e hlahlobe!

Temoso e bonolo ya info—e hlahlobe!

Temošo e bonolo ya seetša—e hlahlobe!

Temošo e bonolo e lefsifsi—e hlahlobe!

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

Kgokaganya mmala

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

Temošo ya mathomo ye bonolo yeo e nago le kgokagano ya mohlala . E fe go klika ge o rata.

Temošo ya bobedi ye bonolo yeo e nago le kgokagano ya mohlala . E fe go klika ge o rata.

Temošo ye bonolo ya katlego yeo e nago le kgokagano ya mohlala . E fe go klika ge o rata.

Temošo e bonolo ya kotsi yeo e nago le kgokagano ya mohlala . E fe go klika ge o rata.

Temošo ye bonolo ya temošo yeo e nago le kgokagano ya mohlala . E fe go klika ge o rata.

Temošo ya tshedimošo ye bonolo yeo e nago le kgokagano ya mohlala . E fe go klika ge o rata.

Temošo ye bonolo ya seetša yeo e nago le kgokagano ya mohlala . E fe go klika ge o rata.

Temošo ye bonolo ya leswiswi yeo e nago le kgokagano ya mohlala . E fe go klika ge o rata.

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

O šomile gabotse!

Aww yeah, o badile ka katlego molaetša wo wa bohlokwa wa temošo. Sengwalwa se sa mohlala se ya go sepela nako ye telele go se nene gore o kgone go bona ka fao sekgoba ka gare ga temošo se šomago ka mohuta wo wa diteng.

Nako le nako ge o nyaka, kgonthišetša gore o diriša didirišwa tša ka thoko go boloka dilo di le botse e bile di rulagantšwe.

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

Guacamole e kgethwa! O swanetše go tsena go tše dingwe tša mafelo ao ka mo tlase.

<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 `.fade`le gore `.show`diklase 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 `close`mokgwa 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…
})