Buuka ku bigambo ebikulu Buuka ku docs navigation
Check
in English

Okulabula

Okuwa obubaka obukwata ku nsonga ku bikolwa eby’abakozesa ebya bulijjo n’obubaka obutonotono obuliwo era obukyukakyuka obw’okulabula.

Ku muko guno

Eby’okulabirako

Okulabula kuliwo ku buwanvu bwonna obw’ekiwandiiko, awamu ne bbaatuuni y’okuggalawo ey’okwesalirawo. Okusobola okukola sitayiro entuufu, kozesa emu ku kiraasi munaana ezeetaagisa.alert-success ez’embeera (okugeza, ). Okugoba mu layini, kozesa alerts 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>
Okutuusa amakulu mu tekinologiya ayamba

Okukozesa langi okwongera amakulu kiwa ekiraga ekirabika kyokka, ekitajja kutuusibwa eri abakozesa tekinologiya ayamba – gamba ng’ebisoma ku ssirini. Kakasa nti amawulire agalagirwa langi oba geeyoleka okuva mu birimu byennyini (okugeza ekiwandiiko ekirabika), oba gateekebwamu okuyita mu ngeri endala, gamba ng’ebiwandiiko ebirala ebikwekebwa ne .visually-hiddenkiraasi.

Ekyokulabirako ekiramu

Nywa ku bbaatuuni wansi okulaga okulabula (okukwekebwa n’emisono egy’omu layini okutandika), olwo ogikube (n’okusaanyaawo) n’akabonero akaggalawo akazimbibwamu.

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

Tukozesa JavaScript eno wammanga okutandikawo live alert demo yaffe:

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

Kozesa ekibiina .alert-linkky'omugaso okuwa amangu enkolagana za langi ezikwatagana munda mu kulabula kwonna.

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>

Ebirimu ebirala

Okulabula era kuyinza okubaamu ebintu ebirala ebya HTML nga emitwe, obutundu n’ebigabanya.

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>

Ebifaananyi ebiraga ebifaananyi

Mu ngeri y’emu, osobola okukozesa ebikozesebwa bya flexbox ne Bootstrap Icons okukola okulabula n’ebifaananyi. Okusinziira ku bifaananyi byo n’ebirimu, oyinza okwagala okwongerako ebikozesebwa ebirala oba emisono egy’enjawulo.

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>

Oyagala akabonero akasukka mu kamu ku kulabula kwo? Lowooza ku kukozesa Bootstrap Icons endala n'okukola local SVG sprite nga bwetyo okusobola okwanguyirwa okujuliza ebifaananyi bye bimu enfunda n'enfunda.

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>

Okugoba

Nga okozesa enkola ya JavaScript ey'okulabula, kisoboka okugoba okulabula kwonna mu layini. Laba engeri gye tulabamu:

  • Kakasa nti otikkidde plugin y'okulabula, oba Bootstrap JavaScript ekung'aanyiziddwa.
  • Okwongerako bbaatuuni y’okuggalawo ne .alert-dismissiblekiraasi, ekyongerako padding ey’enjawulo ku ddyo w’okulabula n’okuteeka bbaatuuni y’okuggalawo.
  • Ku bbaatuuni y’okuggalawo, yongera ku kintu data-bs-dismiss="alert", ekivaako enkola ya JavaScript. Kakasa nti okozesa <button>elementi nayo okusobola okweyisa obulungi mu byuma byonna.
  • Okukola animmate alerts nga ozigoba, kakasa nti ogattako .fadene .showclasses.

Kino osobola okukiraba mu bikolwa ng’okozesa live demo:

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>
Okulabula bwe kugobwa, ekintu kiggyibwa ddala mu nsengeka y'olupapula. Singa omukozesa wa kibboodi agoba okulabula ng’akozesa bbaatuuni y’okuggalawo, essira lye lijja kubula mu bwangu era okusinziira ku bbulawuzi, ddamu okussa ku ntandikwa y’olupapula/ekiwandiiko. Olw’ensonga eno, tusaba okussaamu JavaScript endala ewuliriza ekintu closed.bs.alertekibaawo era n’eteeka focus()mu pulogulaamu mu kifo ekisinga okutuukirawo mu lupapula. Bw’oba ​​oteekateeka okutambuza essira ku kintu ekitali kya nkolagana ekitera obutafuna essira, kakasa nti oyongera tabindex="-1"ku kintu ekyo.

CSS

Enkyukakyuka ezikyukakyuka

Yayongerwako mu v5.2.0

Nga ekitundu ku nkola ya Bootstrap egenda ekulaakulana enkyukakyuka za CSS, okulabula kati kukozesa enkyukakyuka za CSS ez’omu kitundu ku .alertfor enhanced real-time customization. Emiwendo gy'enkyukakyuka za CSS giteekebwawo nga giyita mu Sass, kale okulongoosa Sass kukyawagirwa, nakyo.

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

Enkyukakyuka za 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 okutabula

Ekozesebwa nga egattibwa wamu $theme-colorsne okukola contextual modifier classes for our alerts.

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

Loop ekola modifier classes ne 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);
  }
}

Enneeyisa ya JavaScript

Tandikawo

Tandika ebintu nga okulabula

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

Ku lw'ekigendererwa kyokka eky'okugoba okulabula, tekikwetaagisa kutandika kitundu mu ngalo ng'oyita mu JS API. Nga okozesa data-bs-dismiss="alert", ekitundu kijja kutandikibwawo mu ngeri ey’otoma era kigobeddwa bulungi.

Laba ekitundu ekiyitibwa triggers okumanya ebisingawo.

Ebivaako amaanyi

Okugobwa kuyinza okutuukirira n'ekintu ekiri dataku bbaatuuni munda mu kulabula nga bwe kiragibwa wansi:

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

oba ku bbaatuuni ebweru w’okulabula ng’okozesa data-bs-targetnga bwe kiragibwa wansi:

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

Weetegereze nti okuggalawo okulabula kijja kukiggya mu DOM.

Enkola

Osobola okukola ekifaananyi ky'okulabula n'omuzimbi w'okulabula, okugeza:

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

Kino kifuula okulabula okuwuliriza ebibaawo mu kunyiga ku elementi z’ezzadde ezirina data-bs-dismiss="alert"attribute. (Tekyetaagisa nga okozesa data-api's auto-initialization.)

Engeri Okunnyonnyola
close Eggalawo okulabula ng'akuggya mu DOM. Singa .fadene .showclasses zibeerawo ku elementi, okulabula kujja kuzikira nga tekunnaggyibwawo.
dispose Esaanyaawo okulabula kwa elementi. (Eggyawo data eterekeddwa ku elementi ya DOM)
getInstance Enkola ya static ekusobozesa okufuna alert instance ekwatagana ne DOM element. Okugeza: bootstrap.Alert.getInstance(alert).
getOrCreateInstance Enkola ya static ezzaayo ekifaananyi eky'okulabula ekikwatagana n'ekintu kya DOM oba okukola ekipya singa kiba nga tekitandikibwawo. Osobola okugikozesa bw’otyo: bootstrap.Alert.getOrCreateInstance(element).

Enkozesa enkulu:

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

Ebibaddewo

Bootstrap's alert plugin eraga ebitonotono ebibaawo olw'okuyunga mu nkola y'okulabula.

Omukolo Okunnyonnyola
close.bs.alert Ekuba amangu ddala nga closeenkola ya instance eyitibwa.
closed.bs.alert Egobwa nga okulabula kuggaddwa era nga enkyukakyuka za CSS ziwedde. 
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()
})