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

Litemoso

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 .

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

Phela mohlala

Tobetsa konopo e ka tlase ho bonts'a tlhokomeliso (e patiloeng ka li-styles tsa inline ho qala), ebe u e qhelela ('me u e senye) ka konopo ea ho koala e hahelletsoeng ka hare.

html 
<div id="liveAlertPlaceholder"></div>
<button type="button" class="btn btn-primary" id="liveAlertBtn">Show live alert</button>

Re sebelisa JavaScript e latelang ho qala demo ea rona ea tlhokomeliso:

const alertPlaceholder = document.getElementById('liveAlertPlaceholder')

const alert = (message, type) => {
  const wrapper = document.createElement('div')
  wrapper.innerHTML = [
    `<div class="alert alert-${type} alert-dismissible" role="alert">`,
    `   <div>${message}</div>`,
    '   <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>',
    '</div>'
  ].join('')

  alertPlaceholder.append(wrapper)
}

const alertTrigger = document.getElementById('liveAlertBtn')
if (alertTrigger) {
  alertTrigger.addEventListener('click', () => {
    alert('Nice, you triggered this alert message!', 'success')
  })
}

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

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

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

html 
<div class="alert alert-primary d-flex align-items-center" role="alert">
  <svg xmlns="http://www.w3.org/2000/svg" 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.

html 
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
  <symbol id="check-circle-fill" 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" 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" 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" 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" 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" 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" 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:

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

CSS

Lintho tse fapaneng

E kentsoe ho v5.2.0

E le karolo ea mokhoa oa ho fetoha oa CSS oa Bootstrap, litlhokomeliso joale li sebelisa mefuta-futa ea CSS ea lehae .alertbakeng sa ho ntlafatsa nako ea sebele. Litekanyetso tsa mefuta-futa ea CSS li behiloe ka Sass, kahoo mokhoa oa Sass o ntse o tšehetsoa, ​​le oona.

  --#{$prefix}alert-bg: transparent;
  --#{$prefix}alert-padding-x: #{$alert-padding-x};
  --#{$prefix}alert-padding-y: #{$alert-padding-y};
  --#{$prefix}alert-margin-bottom: #{$alert-margin-bottom};
  --#{$prefix}alert-color: inherit;
  --#{$prefix}alert-border-color: transparent;
  --#{$prefix}alert-border: #{$alert-border-width} solid var(--#{$prefix}alert-border-color);
  --#{$prefix}alert-border-radius: #{$alert-border-radius};

Mefuta e fapaneng ea Sass

$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 oa Sass

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

@mixin alert-variant($background, $border, $color) {
  --#{$prefix}alert-color: #{$color};
  --#{$prefix}alert-bg: #{$background};
  --#{$prefix}alert-border-color: #{$border};

  @if $enable-gradients {
    background-image: var(--#{$prefix}gradient);
  }

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

Sass 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

Qala

Qala likarolo e le tlhokomeliso

const alertList = document.querySelectorAll('.alert')
const alerts = [...alertList].map(element => new bootstrap.Alert(element))

Ka sepheo se le seng feela sa ho tlosa tlhokomeliso, ha ho hlokahale ho qala karolo ka letsoho u sebelisa JS API. Ka ho sebelisa data-bs-dismiss="alert", karolo e tla qalisoa ka bo eona 'me e tlosoe ka nepo.

Sheba karolo ea li- triggers bakeng sa lintlha tse ling.

Lintho tse susumetsang

Ho lelekoa ho ka finyelloa ka datatšobotsi e ka har'a konopo ka har'a tlhokomeliso joalokaha ho bontšitsoe ka tlase:

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

kapa konopo e ka ntle ho tlhokomeliso u sebelisa se data-bs-targetbontšitsoeng ka tlase:

<button type="button" class="btn-close" data-bs-dismiss="alert" data-bs-target="#my-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:

const 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 o lumellang ho fumana mohlala oa tlhokomeliso o amanang le karolo ea DOM. Ka mohlala 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):.

Tšebeliso ea mantlha:

const alert = bootstrap.Alert.getOrCreateInstance('#myAlert')
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. 
const myAlert = document.getElementById('myAlert')
myAlert.addEventListener('closed.bs.alert', event => {
  // 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()
})