Tɛmɛn ka taa kunnafoni kunbabaw la Tɛmɛn ka taa docs navigation kan
in English

Kɔlɔsiliw

Aw bɛ kunnafoni cikanw di sigida kɔnɔ baarakɛlaw ka walew danmadɔw kama ni lasɔmini cikan damadɔw ye minnu bɛ sɔrɔ ani minnu bɛ se ka wuli ka bɔ u nɔ na.

Nin ɲɛ in kan

Misaliw

Kɔlɔsiliw bɛ sɔrɔ sɛbɛnni janya o janya kan, ani butɔni dadoncogo min bɛ se ka kɛ i yɛrɛ sago ye. Walasa ka cogoya ɲuman sɔrɔ, aw bɛ baara kɛ ni sigida kalansen 8 wajibiyalenw dɔ ye (misali la, .alert-success). Walasa ka inline dismissing kɛ, baara kɛ ni alerts JavaScript plugin ye .

<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>
Kɔrɔ lasecogo dɛmɛni fɛɛrɛw ma

Baara kɛli ni kulɛri ye walasa ka kɔrɔ fara a kan, o bɛ taamasiyɛn yelen dɔrɔn de di, min tɛna lase dɛmɛni fɛɛrɛw baarakɛlaw ma – i n’a fɔ ɛkran kalanbagaw. Aw ye aw jija kunnafoni minnu jiralen don ni kulɛri ye, olu bɛ ye ka bɔ kɔnɔkow yɛrɛ la (misali la sɛbɛn yelen), walima u bɛ don a kɔnɔ fɛɛrɛ wɛrɛw fɛ, i n’a fɔ sɛbɛn wɛrɛw minnu dogolen don ni .visually-hiddenkalan ye.

Misali ɲɛnama

Butɔn digi min bɛ duguma walasa ka lasɔmini dɔ jira (a dogolen bɛ ni inline styles ye walasa ka daminɛ), o kɔfɛ, i k’a bila (ka a tiɲɛ) ni butɔni dadonni ye min bɛ a kɔnɔ.

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

An bɛ baara kɛ ni nin JavaScript ye walasa k’an ka live alert demo daminɛ:

var alertPlaceholder = document.getElementById('liveAlertPlaceholder')
var alertTrigger = document.getElementById('liveAlertBtn')

function alert(message, type) {
  var wrapper = document.createElement('div')
  wrapper.innerHTML = '<div class="alert alert-' + type + ' alert-dismissible" role="alert">' + message + '<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button></div>'

  alertPlaceholder.append(wrapper)
}

if (alertTrigger) {
  alertTrigger.addEventListener('click', function () {
    alert('Nice, you triggered this alert message!', 'success')
  })
}

Baara kɛ ni .alert-linkutilité class ye walasa ka teliya ka jɛgɛnsira kulɛriw di minnu bɛ bɛn ɲɔgɔn ma lasɔmini o lasɔmini kɔnɔ.

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

Kɔnɔkow wɛrɛw

Kɔlɔsiliw fana bɛ Se ka HTML fɛn wɛrɛw Sɔrɔ i n’a fɔ dakunw, dakunw ani tilayɔrɔbaw.

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

Ikoniw

O cogo kelen na, i bɛ se ka baara kɛ ni flexbox utilities ani Bootstrap Icons ye walasa ka lasɔminiw dilan ni taamasiyɛnw ye. Ka kɛɲɛ ni i ka taamasiyɛnw ni i ka kɔnɔkow ye, i bɛ se ka nafamafɛn wɛrɛw fara a kan walima ka cogoya wɛrɛw fara a kan.

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

Aw mago bɛ taamasiyɛn caman na aw ka lasɔminiw kama wa? Aw ye jateminɛ kɛ ka baara kɛ ni Bootstrap Icons caman ye ani ka sigida SVG sprite kɛ i n’a fɔ o walasa ka icon kelenw lajɛ nɔgɔya la siɲɛ caman.

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

Ka bɔ baara la

Baara kɛli ni JavaScript plugin ye min bɛ wele ko alert, a bɛ se ka kɛ ka alert o lasɔmini in bila kɛnɛ kan. A kɛcogo filɛ nin ye:

  • Aw ye aw jija ka alert plugin doni, walima Bootstrap JavaScript min labɛnna.
  • Butɔn dɔ fara a kan ani .alert-dismissiblekalan, o bɛ dɔ fara a kan ka fara alert kinin fɛ ani ka butɔni da tugu.
  • Butɔn dadon kan, i ka fɛn dɔ fara a kan data-bs-dismiss="alert", o min bɛ JavaScript baarakɛcogo daminɛ. Aw ye aw jija ka baara kɛ ni <button>element ye n’a ye walasa ka taamacogo ɲuman sɔrɔ minɛnw bɛɛ kɔnɔ.
  • Walasa ka lasɔminiw ɲɛnamaya ni aw bɛ u bila ka taa, aw ye aw jija ka .fadeani .showkalanw fara a kan.

Aw bɛ se k’o ye wale la ni demo ɲɛnama ye:

<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>
Ni lasɔmini dɔ Bɔra, o fɛn in bɛ Bɔ ɲɛ jɔcogo la pewu. Ni klaviyeti baarakɛla dɔ ye lasɔmini bila ni butɔni dadon ye, u ɲɛ bɛ ban yɔrɔnin kelen, wa, ka kɛɲɛ ni navigatɛri ye, u bɛ segin ka taa ɲɛ/sɛbɛn daminɛ na. O de kama, an b’a ɲini aw fɛ aw ka JavaScript wɛrɛw fara a kan min bɛ ko closed.bs.alertkɛlen lamɛn ani ka porogaramu focus()kɛ yɔrɔ la min bɛnnen don kosɛbɛ ɲɛ kan. N’i ​​b’a fɛ ka sinsinnan wuli ka taa fɛn dɔ la min tɛ ɲɔgɔndan ye, n’o tɛ sinsinnan sɔrɔ cogoya la, i jija ka dɔ fara tabindex="-1"fɛn kan.

Sass ye

Yɛlɛma-yɛlɛmaw

$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

Mixin suguya caman

Baara bɛ Kɛ ni ɲɔgɔn ye ni $theme-colorska contextual modifier classes Dabɔ an ka lasɔminiw kama.

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

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

Bukulu

Loop min bɛ modifier classes (daɲɛw sɛgɛsɛgɛli) lawuli ni alert-variant()mixin ye.

// 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);
  }
}

JavaScript kɛcogo

A daminɛ na

Elemanw daminɛ i n’a fɔ lasɔminiw

var alertList = document.querySelectorAll('.alert')
var alerts =  [].slice.call(alertList).map(function (element) {
  return new bootstrap.Alert(element)
})

Walasa ka lasɔmini dɔ bɔ kɛnɛ kan, a man kan ka yɔrɔ in daminɛ ni bolo ye JS API fɛ. Ni i ye baara kɛ ni data-bs-dismiss="alert", o yɔrɔ bɛna daminɛ a yɛrɛma ani ka bɔ baara la cogo bɛnnen na.

Aw ye yɔrɔ lajɛ min tɔgɔ ye ko triggers walasa ka kunnafoni wɛrɛw sɔrɔ.

Fɛn minnu bɛ mɔgɔ bila ka baara kɛ

Bɔli bɛ se ka kɛ ni fɛn dataye min bɛ butɔni dɔ kan lasɔmini kɔnɔ i n’a fɔ a jiralen bɛ cogo min na jukɔrɔ:

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

walima butɔni dɔ kan min bɛ lasɔmini kɔfɛ ni baara kɛ ni data-bs-targeti n’a fɔ a jiralen bɛ cogo min na jukɔrɔ:

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

A kɔlɔsi ko ni i ye lasɔmini dɔ datugu, o bɛna a bɔ DOM kɔnɔ.

Fɛɛrɛw

Kɛcogo Cogojirali
close A bɛ lasɔmini dɔ datugu ni a bɔli ye DOM kɔnɔ. Ni .fadeand .showclasses bɛ element kan, alert bɛ ban sani a ka bɔ.
dispose A bɛ element dɔ ka alert tiɲɛ. (A bɛ kunnafoni maralenw bɔ DOM element kan)
getInstance Fɛɛrɛ jɔlen min b’a To i bɛ se ka lasɔmini misali Sɔrɔ min bɛ tali Kɛ DOM yɔrɔ dɔ la, i bɛ Se ka baara Kɛ n’a ye nin cogo in na:bootstrap.Alert.getInstance(alert)
getOrCreateInstance Fɛɛrɛ jɔlen min bɛ lasɔmini misali dɔ Lasegin min bɛ tali Kɛ DOM yɔrɔ dɔ la walima ka kura Dabɔ n'a ma Daminɛ. Aw bɛ se ka baara kɛ n’a ye nin cogo la:bootstrap.Alert.getOrCreateInstance(element) 
var alertNode = document.querySelector('.alert')
var alert = bootstrap.Alert.getInstance(alertNode)
alert.close()

Ko minnu kɛra

Bootstrap ka lasɔmini-plugin bɛ ko damadɔw Bɔ kɛnɛ kan walasa ka jɛgɛn ka Kɛ lasɔmini baarakɛcogo la.

Lajɛrɛ Cogojirali
close.bs.alert A bɛ tasuma don o yɔrɔnin bɛɛ ni closemisali fɛɛrɛ welelen don.
closed.bs.alert A bɛ bɔ baara la ni lasɔmini dafara ani CSS jiginniw dafara. 
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()
})