Yeqela kokuqukethwe okuyinhloko Yeqela ku-docs navigation
Check
in English

Izexwayiso

Nikeza imilayezo yempendulo yomongo yezenzo zabasebenzisi ezijwayelekile ngedlanzana lemilayezo etholakalayo neguquguqukayo yesexwayiso.

Kuleli khasi

Izibonelo

Izaziso ziyatholakala kunoma ibuphi ubude bombhalo, kanye nenkinobho yokuvala ongayikhetha. Ukuze wenze isitayela esifanele, sebenzisa izigaba eziyisishiyagalombili ezidingekayo zesimo (isb, .alert-success). Ngokukhipha okusemgqeni, sebenzisa i- plugin yezaziso ze-JavaScript .

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>
Ukudlulisa incazelo kubuchwepheshe obusizayo

Ukusebenzisa umbala ukwengeza incazelo kunikeza kuphela inkomba ebonakalayo, engeke idluliselwe kubasebenzisi bobuchwepheshe obusizayo - njengezifundi zesikrini. Qinisekisa ukuthi ulwazi olushiwo umbala lusobala kokuqukethwe ngokwako (isb umbhalo obonakalayo), noma lufakwe ngezinye izindlela, njengombhalo owengeziwe ofihliwe .visually-hiddennekilasi.

Isibonelo esiphilayo

Chofoza inkinobho engezansi ukuze ubonise isexwayiso (esifihlwe ngezitayela ezisemgqeni ukuze kuqalwe), bese usichitha (futhi usibhubhise) ngenkinobho yokuvala eyakhelwe ngaphakathi.

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

Sisebenzisa i-JavaScript elandelayo ukuze siqalise idemo yethu yesexwayiso ebukhoma:

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

Sebenzisa .alert-linkisigaba sosizo ukuze unikeze ngokushesha izixhumanisi ezinemibala efanayo ngaphakathi kwanoma yisiphi isexwayiso.

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>

Okuqukethwe okwengeziwe

Izaziso zingaqukatha izici ezengeziwe ze-HTML njengezihloko, izigaba kanye nabahlukanisi.

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>

Izithonjana

Ngokufanayo, ungasebenzisa izinsiza ze- flexbox kanye nezithonjana ze- Bootstrap ukuze udale izexwayiso ngezithonjana. Ngokuya ngezithonjana zakho nokuqukethwe, ungase ufune ukwengeza izinsiza ezengeziwe noma izitayela zangokwezifiso.

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>

Udinga isithonjana esingaphezu kwesisodwa sezaziso zakho? Cabangela ukusebenzisa Izithonjana eziningi ze-Bootstrap nokwenza i-SVG sprite yasendaweni kanjalo ukuze ubhekise izithonjana ezifanayo ngokuphindaphindiwe.

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>

Iyacashisa

Ngokusebenzisa i-plugin yesixwayiso se-JavaScript, kungenzeka ukucashisa noma yisiphi isexwayiso esisemgqeni. Nansi indlela:

  • Qiniseka ukuthi ulayishe i-plugin yesixwayiso, noma i-Bootstrap JavaScript ehlanganisiwe.
  • Engeza inkinobho yokuvala kanye .alert-dismissibleneklasi, okwengeza ukupheda okwengeziwe kwesokudla sesexwayiso futhi kumise inkinobho yokuvala.
  • Enkinobho yokuvala, engeza data-bs-dismiss="alert"isibaluli, esicupha ukusebenza kwe-JavaScript. Qiniseka ukuthi usebenzisa i- <button>elementi nayo ngokuziphatha okufanele kuwo wonke amadivayisi.
  • Ukuze wenze izexwayiso zigqwayize uma uzichitha, qiniseka ukuthi ungeza .fadekanye .shownamakilasi.

Lokhu ungakubona ngesenzo ngedemo ebukhoma:

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>
Uma isaziso sicashiswa, isici sisuswa ngokuphelele esakhiweni sekhasi. Uma umsebenzisi wekhibhodi echitha isixwayiso esebenzisa inkinobho yokuvala, ukugxila kwabo kuzolahleka kungazelelwe futhi, kuye ngesiphequluli, kusethelwe kabusha ekuqaleni kwekhasi/idokhumenti. Ngalesi sizathu, sincoma ukuthi kufakwe i-JavaScript eyengeziwe elalela closed.bs.alertumcimbi futhi isethelwe focus()endaweni efanele kakhulu ekhasini. Uma uhlela ukuhambisa ukugxilisa ku-elementi engahlangani ngokuvamile engakutholi ukugxila, qiniseka ukuthi uyengeza tabindex="-1"kusici.

CSS

Okuguquguqukayo

Kwengezwe ku-v5.2.0

Njengengxenye yendlela yokuguquguquka kwe-CSS ye-Bootstrap, izexwayiso manje zisebenzisa okuguquguqukayo kwasendaweni kwe-CSS .alertukuze kwenziwe ngokwezifiso isikhathi sangempela. Amanani okuguquguquka kwe-CSS asethwa nge-Sass, ngakho ukwenza ngokwezifiso kwe-Sass kusasekelwa, nakho.

  --#{$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};

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

Sass mix

Kusetshenziswa ngokuhambisana $theme-colorsnokudala amakilasi okuguqula umongo ngezexwayiso zethu.

@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

Iluphu ekhiqiza amakilasi okulungisa nge- 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);
  }
}

Ukuziphatha kweJavaScript

Qalisa

Qalisa ama-elementi njengezaziso

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

Ngenhloso eyodwa yokucashisa isexwayiso, akudingekile ukuqalisa ingxenye mathupha nge-JS API. Ngokusebenzisa data-bs-dismiss="alert"i-, ingxenye izoqaliswa ngokuzenzakalelayo futhi ichithwe ngendlela efanele.

Bona isigaba sezibangeli ukuze uthole imininingwane eyengeziwe.

Izicupha

Ukuxoshwa kungafinyelelwa ngesibaluli esisenkinobho dataengaphakathi kwesexwayiso njengoba kuboniswe ngezansi:

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

noma enkinobho engaphandle kwesexwayiso usebenzisa lokhu data-bs-targetokuboniswe ngezansi:

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

Qaphela ukuthi ukuvala isexwayiso kuzosisusa ku-DOM.

Izindlela

Ungakha isenzakalo sesexwayiso nomakhi wesexwayiso, isibonelo:

const bsAlert = new bootstrap.Alert('#myAlert')

Lokhu kwenza isixwayiso silalele ngemicimbi yokuchofoza ezintweni eziphumayo data-bs-dismiss="alert"ezinesibaluli. (Akudingekile uma usebenzisa i-auto-initialization ye-data-api.)

Indlela Incazelo
close Ivala isexwayiso ngokusisusa ku-DOM. Uma i- .fadekanye .shownamakilasi ekhona engxenyeni, isexwayiso sizofiphala ngaphambi kokuthi sisuswe.
dispose Icekela phansi isixwayiso se-elementi. (Isusa idatha egciniwe kusici se-DOM)
getInstance Indlela emile ekuvumela ukuthi uthole isenzakalo sesexwayiso esihlotshaniswa nento ye-DOM. Isibonelo bootstrap.Alert.getInstance(alert):.
getOrCreateInstance Indlela emile ebuyisela isenzakalo sesexwayiso esihlobene nento ye-DOM noma idale entsha uma kwenzeka ingaqaliswanga. Ungayisebenzisa kanje bootstrap.Alert.getOrCreateInstance(element):.

Ukusetshenziswa okuyisisekelo:

const alert = bootstrap.Alert.getOrCreateInstance('#myAlert')
alert.close()

Imicimbi

I-plugin yesixwayiso ye-Bootstrap iveza imicimbi embalwa ukuze ixhumeke ekusebenzeni kwesixwayiso.

Umcimbi Incazelo
close.bs.alert Imililo ngokushesha lapho closeindlela yesibonelo ibizwa.
closed.bs.alert Ixoshwe lapho isaziso sivaliwe futhi izinguquko ze-CSS seziqediwe. 
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()
})