Source

Litlhokomeliso

Fana ka melaetsa ea maikutlo bakeng sa liketso tse tloaelehileng tsa basebelisi ka melaetsa e seng mekae e fumanehang le e bonolo.

Mehlala

Litlhokomeliso li teng bakeng sa bolelele bofe kapa bofe ba mongolo, hammoho le konopo ea boikhethelo ea ho qhala. Bakeng sa setaele se nepahetseng, sebelisa e 'ngoe ea lihlopha tse robeli tse hlokahalang tsa maemo (mohlala, .alert-success). Bakeng sa ho leleka ka har'a marang-rang, sebelisa plugin ea tlhokomeliso ea 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>
Ho fetisa moelelo ho litheknoloji tse thusang

Ho sebelisa mebala ho eketsa moelelo ho fana feela ka pontšo ea pono, e ke keng ea fetisetsoa ho basebelisi ba theknoloji e thusang - joalo ka sebali sa skrine. Netefatsa hore tlhahisoleseding e hlahisitsweng ke mmala e ka ba e totobetseng ho tswa ho dikahare ka boyona (mohlala, mongolo o bonahalang), kapa e kenyeleditswe ka mekgwa e meng, e kang mongolo o tlatsetso o patilweng le .sr-onlysehlopha.

Sebelisa sehlopha sa .alert-linklisebelisoa ho fana ka lihokelo tsa mebala tse nyallanang ka har'a tlhokomeliso efe kapa efe.

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

Litaba tse ling

Litlhokomeliso li ka boela tsa ba le likarolo tse ling tsa HTML tse kang lihlooho, lirapa le likarohano.

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

Ho qhala

Ka ho sebelisa plugin ea temoso ea JavaScript, hoa khonahala ho tlosa tlhokomeliso efe kapa efe e ka har'a mohala. Mokhoa ona ke ona:

  • Etsa bonnete ba hore u kentse plugin ea tlhokomeliso, kapa Bootstrap JavaScript e hlophisitsoeng.
  • Haeba u theha JavaScript ea rona ho tsoa mohloling, e hlokautil.js . Phetolelo e hlophisitsoeng e kenyelletsa sena.
  • Kenya konopo ea ho qhala le .alert-dismissiblesehlopha, e leng se eketsang padding ka letsohong le letona la tlhokomeliso le ho beha .closekonopo.
  • Ho konopo ea ho tlosa, eketsa data-dismiss="alert"tšobotsi, e hlahisang ts'ebetso ea JavaScript. Etsa bonnete ba hore o sebelisa <button>element le eona bakeng sa boitšoaro bo nepahetseng ho lisebelisoa tsohle.
  • Ho phelisa litlhokomeliso ha u li leleka, etsa bonnete ba hore u eketsa .fadele .showlitlelase.

U ka bona sena ts'ebetsong ka demo e phelang:

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

Boitšoaro ba JavaScript

Lintho tse susumetsang

Lumella ho tlosoa ha tlhokomeliso ka JavaScript:

$('.alert').alert()

Kapa ka datalitšoaneleho konopo ka har'a tlhokomeliso , joalo ka ha ho bonts'itsoe ka holimo:

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

Hlokomela hore ho koala tlhokomeliso ho tla e tlosa ho DOM.

Mekhoa

Mokhoa Tlhaloso
$().alert() E fana ka tlhokomeliso bakeng sa diketsahalo tsa ho tobetsa lintho tse hlahang tse nang le data-dismiss="alert"tšobotsi. (Ha ho hlokahale ha o sebelisa data-api's auto-initialization.)
$().alert('close') E koala tlhokomeliso ka ho e tlosa ho DOM. Haeba li- .fadeclass .showli le teng ho element, tlhokomeliso e tla nyamela pele e tlosoa.
$().alert('dispose') E senya tlhokomeliso ea element. 
$(".alert").alert('close')

Liketsahalo

Sesebelisoa sa tlhokomeliso sa Bootstrap se pepesa liketsahalo tse 'maloa bakeng sa ho hokahana le ts'ebetso ea tlhokomeliso.

Ketsahalo Tlhaloso
close.bs.alert Ketsahalo ena e tuka hang hang ha closemokhoa oa mohlala o bitsoa.
closed.bs.alert Ketsahalo ena e ts'oaroa ha tlhokomeliso e koetsoe (e tla emela hore liphetoho tsa CSS li phethehe). 
$('#myAlert').on('closed.bs.alert', function () {
  // do something…
})