Jya ku bintu nyamukuru Jya kuri docs
Check
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 .

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

Urugero ruzima

Kanda buto hepfo kugirango werekane integuza (ihishe hamwe nuburyo bwo kumurongo kugirango utangire), hanyuma wirukane (kandi usenye) hamwe na bouton yubatswe hafi.

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

Dukoresha JavaScript ikurikira kugirango dushyire ahagaragara ubuzima bwacu bwo kumenyesha:

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

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

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>

Ibirimo

Imenyesha rishobora kandi kubamo HTML yinyongera nkimitwe, paragarafu nabatandukanya.

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>

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.

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>

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

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>

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:

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

CSS

Ibihinduka

Wongeyeho muri v5.2.0

Nkigice cya Bootstrap igenda ihinduka CSS ihinduka, imenyesha noneho ukoreshe CSS yaho ihinduka .alertkugirango wongere igihe-cyo kwihindura. Indangagaciro za CSS zihinduka zashyizweho binyuze kuri Sass, so Sass yihariye iracyashyigikiwe, nayo.

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

Ibihinduka bya 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 mixin

Byakoreshejwe muburyo $theme-colorsbwo gukora ibyiciro bihindura ibyiciro byo kumenyesha.

@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

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

Tangira

Tangiza ibintu nkibimenyesha

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

Ku ntego yonyine yo kwirukana integuza, ntabwo ari ngombwa gutangiza ibice intoki ukoresheje JS API. Mugukoresha data-bs-dismiss="alert", ibice bizatangizwa mu buryo bwikora kandi birukanwe neza.

Reba imbarutso kubisobanuro birambuye.

Imbarutso

Kwirukanwa birashobora kugerwaho hamwe na datakiranga kuri buto iri mumenyesha nkuko bigaragara hano:

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

cyangwa kuri buto hanze yimenyesha ukoresheje data-bs-targetnkuko bigaragara hano:

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

Menya ko gufunga integuza bizayikuraho muri DOM.

Uburyo

Urashobora gukora urugero rwo kumenyesha hamwe nubwubatsi bwubaka, kurugero:

const 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 buhamye butuma ubona urugero rwo kumenyesha rujyanye nibintu bya DOM. Kurugero : 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).

Imikoreshereze y'ibanze:

const alert = bootstrap.Alert.getOrCreateInstance('#myAlert')
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. 
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()
})