Tlolela ho litaba tsa mantlha Tlolela ho li-docs navigation
in English

Litlhokomeliso

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

Leqepheng lena

Mehlala

Litemoso lia fumaneha bakeng sa bolelele bofe kapa bofe ba mongolo, hammoho le konopo ea boikhethelo ea ho koala. Bakeng sa setaele se nepahetseng, sebelisa e 'ngoe ea lihlopha tse robeli tse hlokahalang tsa maemo (mohlala, .alert-success). Bakeng sa ho tebela ka har'a marang-rang, sebelisa litemoso tsa JavaScript 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>
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 .visually-hiddensehlopha.

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

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>

Litšoantšo

Ka mokhoa o ts'oanang, o ka sebelisa lisebelisoa tsa flexbox le Lits'oants'o tsa Bootstrap ho theha litlhokomeliso ka litšoantšo. Ho ipapisitse le li-icon le litaba tsa hau, u kanna ua batla ho eketsa lisebelisoa tse ling kapa mekhoa ea tloaelo.

<div class="alert alert-primary d-flex align-items-center" role="alert">
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-exclamation-triangle-fill flex-shrink-0 me-2" viewBox="0 0 16 16" role="img" aria-label="Warning:">
    <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
  </svg>
  <div>
    An example alert with an icon
  </div>
</div>

U hloka li-icon tse fetang bonngoe bakeng sa litlhokomeliso? Nahana ka ho sebelisa Litšoantšo tse ling tsa Bootstrap le ho etsa sprite ea SVG ea lehae joalo ka ho bua habonolo ka litšoantšo tse tšoanang khafetsa.

<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
  <symbol id="check-circle-fill" fill="currentColor" viewBox="0 0 16 16">
    <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
  </symbol>
  <symbol id="info-fill" fill="currentColor" viewBox="0 0 16 16">
    <path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"/>
  </symbol>
  <symbol id="exclamation-triangle-fill" fill="currentColor" viewBox="0 0 16 16">
    <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
  </symbol>
</svg>

<div class="alert alert-primary d-flex align-items-center" role="alert">
  <svg class="bi flex-shrink-0 me-2" width="24" height="24" role="img" aria-label="Info:"><use xlink:href="#info-fill"/></svg>
  <div>
    An example alert with an icon
  </div>
</div>
<div class="alert alert-success d-flex align-items-center" role="alert">
  <svg class="bi flex-shrink-0 me-2" width="24" height="24" role="img" aria-label="Success:"><use xlink:href="#check-circle-fill"/></svg>
  <div>
    An example success alert with an icon
  </div>
</div>
<div class="alert alert-warning d-flex align-items-center" role="alert">
  <svg class="bi flex-shrink-0 me-2" width="24" height="24" role="img" aria-label="Warning:"><use xlink:href="#exclamation-triangle-fill"/></svg>
  <div>
    An example warning alert with an icon
  </div>
</div>
<div class="alert alert-danger d-flex align-items-center" role="alert">
  <svg class="bi flex-shrink-0 me-2" width="24" height="24" role="img" aria-label="Danger:"><use xlink:href="#exclamation-triangle-fill"/></svg>
  <div>
    An example danger alert with an icon
  </div>
</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.
  • Kenya konopo e koalang le .alert-dismissiblesehlopha, e leng se eketsang padding ka letsohong le letona la tlhokomeliso le ho beha konopo e koalang.
  • Ka konopo e koalang, eketsa data-bs-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="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
Ha tlhokomeliso e tlosoa, element e tlosoa ka ho feletseng mohahong oa leqephe. Haeba mosebelisi oa keyboard a hana tlhokomeliso a sebelisa konopo e haufi, sepheo sa bona se tla lahleha ka tšohanyetso, 'me, ho latela sebatli, se qalelle qalong ea leqephe/tokomane. Ka lebaka lena, re khothaletsa ho kenyelletsa JavaScript e eketsehileng e mamelang closed.bs.alertketsahalo eo le ho beha focus()sebaka se nepahetseng ka ho fetesisa leqepheng. Haeba u rera ho lebisa tlhokomelo ho ntho e sa sebetsaneng eo hangata e sa fumaneng tsepamiso, etsa bonnete ba hore u eketsa tabindex="-1"ho element.

Sass

Lintho tse fapaneng

$alert-padding-y:               $spacer;
$alert-padding-x:               $spacer;
$alert-margin-bottom:           1rem;
$alert-border-radius:           $border-radius;
$alert-link-font-weight:        $font-weight-bold;
$alert-border-width:            $border-width;
$alert-bg-scale:                -80%;
$alert-border-scale:            -70%;
$alert-color-scale:             40%;
$alert-dismissible-padding-r:   $alert-padding-x * 3; // 3x covers width of x plus default padding on either side

Motsoako o fapaneng

E sebelisoa hammoho le $theme-colorsho theha lihlopha tsa ho fetola maemo bakeng sa litlhokomeliso tsa rona.

@mixin alert-variant($background, $border, $color) {
  color: $color;
  @include gradient-bg($background);
  border-color: $border;

  .alert-link {
    color: shade-color($color, 20%);
  }
}

Loop

Loop e hlahisang lihlopha tsa modifier ka alert-variant()mixin.

// Generate contextual modifier classes for colorizing the alert.

@each $state, $value in $theme-colors {
  $alert-background: shift-color($value, $alert-bg-scale);
  $alert-border: shift-color($value, $alert-border-scale);
  $alert-color: shift-color($value, $alert-color-scale);
  @if (contrast-ratio($alert-background, $alert-color) < $min-contrast-ratio) {
    $alert-color: mix($value, color-contrast($alert-background), abs($alert-color-scale));
  }
  .alert-#{$state} {
    @include alert-variant($alert-background, $alert-border, $alert-color);
  }
}

Boitšoaro ba JavaScript

Lintho tse susumetsang

Lumella ho tlosoa ha tlhokomeliso ka JavaScript:

var alertList = document.querySelectorAll('.alert')
alertList.forEach(function (alert) {
  new bootstrap.Alert(alert)
})

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

<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>

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

Mekhoa

O ka etsa mohlala oa tlhokomeliso ka moetsi oa tlhokomeliso, mohlala:

var myAlert = document.getElementById('myAlert')
var bsAlert = new bootstrap.Alert(myAlert)

Sena se etsa hore tlhokomeliso e mamele bakeng sa diketsahalo tsa tokollo ho likarolo tsa setho tse nang le data-bs-dismiss="alert"tšobotsi. (Ha ho hlokahale ha o sebelisa data-api's auto-initialization.)

Mokhoa Tlhaloso
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.
dispose E senya tlhokomeliso ea element. (E tlosa lintlha tse bolokiloeng karolong ea DOM)
getInstance Mokhoa o tsitsitseng o u lumellang ho fumana mohlala oa tlhokomeliso o amanang le karolo ea DOM, u ka e sebelisa ka tsela ena:bootstrap.Alert.getInstance(alert)
getOrCreateInstance Mokhoa o tsitsitseng o khutlisetsang tlhokomeliso e amanang le karolo ea DOM kapa ho theha e ncha haeba e sa qalisoa. U ka e sebelisa ka tsela ena:bootstrap.Alert.getOrCreateInstance(element) 
var alertNode = document.querySelector('.alert')
var alert = bootstrap.Alert.getInstance(alertNode)
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 Mello hang-hang ha closemokhoa oa mohlala o bitsoa.
closed.bs.alert E tlositsoe ha tlhokomeliso e koetsoe 'me liphetoho tsa CSS li phethiloe. 
var myAlert = document.getElementById('myAlert')
myAlert.addEventListener('closed.bs.alert', function () {
  // do something, for instance, explicitly move focus to the most appropriate element,
  // so it doesn't get lost/reset to the start of the page
  // document.getElementById('...').focus()
})