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 .

Ye ke temošo ya motheo—e hlahlobe!

Ye ke temošo ya bobedi—e hlahlobe!

Ye ke temošo ya katlego—e hlahlobje!

Ye ke temošo ya kotsi—e hlahlobe!

Ye ke temošo ya temošo—e hlahlobje!

Ye ke temošo ya info—e hlahlobe!

Ye ke temošo e bofefo—e hlahlobe!

Ye ke temošo ya leswiswi—e hlahlobje!

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

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.

Ye ke temošo ya mathomo yeo e nago le kgokagano ya mohlala . E fe go klika ge o rata.

Ye ke temošo ya bobedi yeo e nago le kgokagano ya mohlala . E fe go klika ge o rata.

Ye ke temošo ya katlego yeo e nago le kgokagano ya mohlala . E fe go klika ge o rata.

Ye ke temošo ya kotsi yeo e nago le kgokagano ya mohlala . E fe go klika ge o rata.

Ye ke temošo ya temošo yeo e nago le kgokagano ya mohlala . E fe go klika ge o rata.

Ye ke temošo ya tshedimošo yeo e nago le kgokagano ya mohlala . E fe go klika ge o rata.

Ye ke temošo ya seetša yeo e nago le kgokagano ya mohlala . E fe go klika ge o rata.

Ye ke temošo ya leswiswi yeo e nago le kgokagano ya mohlala . E fe go klika ge o rata.

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

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…
})