Jya ku bintu nyamukuru Jya kuri docs
in English

Imenyesha

Tanga ibitekerezo byubutumwa bwibikorwa kubikorwa bisanzwe byabakoresha hamwe nubutumwa buboneka kandi bworoshye bwo kumenyesha.

Kuriyi page

Ingero

Imenyesha riraboneka kuburebure bwinyandiko, kimwe nubushake bwo gufunga buto. Kuburyo bukwiye, koresha imwe mumunani isabwa ibyiciro (urugero, .alert-success). Kugirango wirukane kumurongo, koresha imenyesha plugin ya JavaScript .

<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>
Gutanga ibisobanuro kubuhanga bufasha

Gukoresha ibara kugirango wongere ibisobanuro bitanga gusa icyerekezo cyerekana, kitazashyikirizwa abakoresha tekinoroji ifasha - nk'abasoma ecran. Menya neza ko amakuru yerekanwe n'ibara agaragara uhereye kubirimo ubwabyo (urugero: inyandiko igaragara), cyangwa bigashyirwa muburyo butandukanye, nk'inyandiko y'inyongera ihishe hamwe .visually-hiddenn'ishuri.

Koresha urwego .alert-linkrwingirakamaro kugirango utange byihuse guhuza amabara muburyo ubwo aribwo bwose.

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

Ibirimo

Imenyesha rishobora kandi kubamo HTML yinyongera nkimitwe, paragarafu nabatandukanya.

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

Udushushondanga

Muri ubwo buryo ,, urashobora gukoresha flexbox yingirakamaro hamwe na Bootstrap Udushushondanga kugirango ukore integuza hamwe nudushushondanga. Ukurikije amashusho yawe nibirimo, urashobora kongeramo ibikorwa byinshi cyangwa uburyo bwihariye.

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

Ukeneye igishushanyo kirenze kimwe kubimenyesha? Tekereza gukoresha Ibishushanyo byinshi bya Bootstrap no gukora SVG yaho hafi kugirango ubone byoroshye amashusho amwe inshuro nyinshi.

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

Kwirukana

Ukoresheje plugin ya JavaScript imenyesha, birashoboka gusezerera umurongo uwo ari wo wose. Dore uko:

  • Menya neza ko wapakiye plugin yo kumenyesha, cyangwa icyegeranyo cya Bootstrap JavaScript.
  • Ongeraho buto yo gufunga hamwe .alert-dismissiblenishuri, wongeyeho padi yinyongera iburyo bwibimenyesha kandi uhagarike buto yo gufunga.
  • Kuri buto yo gufunga, ongeramo data-bs-dismiss="alert"ikiranga, gikurura imikorere ya JavaScript. Witondere gukoresha <button>element hamwe nayo kugirango imyitwarire iboneye mubikoresho byose.
  • Kugirango ushushanye kumenyesha mugihe ubirukanye, menya kongeramo .fadeamasomo .show.

Urashobora kubibona mubikorwa hamwe na demo nzima:

<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>
Iyo integuza isezerewe, ibintu bivanwaho rwose kurupapuro. Niba umukoresha wa clavier yanze kumenyesha akoresheje buto yo gufunga, intumbero yabo izahita ibura kandi, bitewe na mushakisha, ongera utangire urupapuro / inyandiko. Kubwiyi mpamvu, turasaba ko dushyiramo JavaScript yinyongera yunva closed.bs.alertibyabaye kandi igashyiraho gahunda igashyirwa focus()ahantu heza kurupapuro. Niba uteganya kwimura intumbero kubintu bidahuza bisanzwe mubisanzwe bitakira intumbero, menya neza ko wongera tabindex="-1"kubintu.

Sass

Ibihinduka

$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

Imvange zitandukanye

Byakoreshejwe muburyo $theme-colorsbwo gukora ibyiciro bihindura ibyiciro kugirango tumenye.

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

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

Umuzingi

Umuzingo utanga ibyiciro byo guhindura hamwe na 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);
  }
}

Imyitwarire ya JavaScript

Imbarutso

Emera kwirukana integuza ukoresheje JavaScript:

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

Cyangwa hamwe datanibiranga kuri buto mubimenyeshejwe , nkuko byerekanwe hejuru:

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

Menya ko gufunga integuza bizayikuraho muri DOM.

Uburyo

Urashobora gukora integuza urugero hamwe nubwubatsi bwubaka, kurugero:

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

Ibi bituma ukangurira kumva gukanda ibyabaye kubintu bikomokaho bifite data-bs-dismiss="alert"ikiranga. (Ntabwo ari ngombwa mugihe ukoresheje data-api yo gutangiza-auto.)

Uburyo Ibisobanuro
close Funga integuza uyikuye muri DOM. Niba i .fadehamwe .shownamasomo ahari kuri element, integuza izashira mbere yuko ikurwaho.
dispose Gusenya ikintu cyo kumenyesha. (Kuraho amakuru yabitswe kubintu bya DOM)
getInstance Uburyo buhagaze butuma ubona urugero rwo kumenyesha rujyanye nibintu bya DOM, urashobora kubikoresha gutya:bootstrap.Alert.getInstance(alert)
getOrCreateInstance Uburyo buhagaze busubiza urugero rwo kumenyesha bifitanye isano na DOM cyangwa gukora bundi bushya mugihe bitatangijwe. Urashobora kuyikoresha gutya:bootstrap.Alert.getOrCreateInstance(element) 
var alertNode = document.querySelector('.alert')
var alert = bootstrap.Alert.getInstance(alertNode)
alert.close()

Ibyabaye

Amacomeka ya Bootstrap yerekana ibintu bike byo guhuza ibikorwa.

Icyabaye Ibisobanuro
close.bs.alert Umuriro uhita iyo uburyo closebwurugero bwitwa.
closed.bs.alert Umuriro iyo integuza yafunzwe kandi inzibacyuho ya CSS yarangiye. 
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()
})