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 .

Okulabula okusookerwako okwangu —kukebere!

Okulabula okw’okubiri okwangu —kukebere!

Okulabula okwangu ku buwanguzi —kukebere!

Okulabula okwangu okw’akabi —kakebera!

Okulabula okwangu —kukebere!

A simple info alert —kikebera!

Okulabula okw’ekitangaala okwangu —kukebere!

Okulabula okwangu okw’ekizikiza —kukebere!

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

Link langi

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

Okulabula okusookerwako okwangu nga kulina enkolagana ey'ekyokulabirako . Kiwe click bwoba oyagala.

Okulabula okw'okubiri okwangu nga kulina enkolagana ey'ekyokulabirako . Kiwe click bwoba oyagala.

Okulabula okw'obuwanguzi okwangu nga kuliko eky'okulabirako eky'okuyunga . Kiwe click bwoba oyagala.

Okulabula okw'akabi okwangu nga kuliko enkolagana ey'ekyokulabirako . Kiwe click bwoba oyagala.

Okulabula okwangu okw'okulabula nga kuliko ekyokulabirako ky'enkolagana . Kiwe click bwoba oyagala.

Info alert ennyangu nga erimu ekyokulabirako link . Kiwe click bwoba oyagala.

Okulabula kw'ekitangaala okwangu nga kuliko enkolagana ey'ekyokulabirako . Kiwe click bwoba oyagala.

Okulabula okw'ekizikiza okwangu nga kuliko ekyokulabirako ky'enkolagana . Kiwe click bwoba oyagala.

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

Gyebaleko!

Aww yeah, osomye bulungi obubaka buno obukulu obw'okulabula. Ekiwandiiko kino eky’okulabirako kigenda kudduka katono osobole okulaba engeri ebanga munda mu kulabula gye likolamu n’ebirimu eby’ekika kino.

Buli lw’oba weetaaga, kakasa nti okozesa ebikozesebwa ku margin utilities okukuuma ebintu nga birungi era nga biyonjo.

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

Ekyokulabirako eky’okulabula nga kiriko akabonero

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

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.

Ekyokulabirako eky’okulabula nga kiriko akabonero

Ekyokulabirako eky’okulabula ku buwanguzi nga kiriko akabonero

Ekyokulabirako okulabula okulabula nga kuliko akabonero

Ekyokulabirako okulabula okw’akabi nga kuliko akabonero

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

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:

Guacamole omutukuvu! Olina okukebera mu bimu ku bifo ebyo wansi.

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

Sass nga bwe kiri

Enkyukakyuka ezikyukakyuka

$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

Enkyukakyuka ya mixin

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

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

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

Kyabulijo

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

Ebivaako amaanyi

Ssobozesa okugoba okulabula ng'oyita mu JavaScript:

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

Oba datan'ebintu ku bbaatuuni munda mu kulabula , nga bwe kiragibwa waggulu:

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

Weetegereze nti okuggalawo okulabula kijja kukiggya mu DOM.

Enkola

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

var myAlert = document.getElementById('myAlert')
var 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 `.fade`ne `.show`classes 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, osobola okugikozesa nga eno:`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)`

var alertNode = document.querySelector('.alert')
var alert = bootstrap.Alert.getInstance(alertNode)
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 `close`enkola ya instance eyitibwa.
`closed.bs.alert`	Egobwa nga okulabula kuggaddwa era nga enkyukakyuka za CSS ziwedde.

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