Gara qabiyyee ijootti darbi Gara docs navigationitti darbi
in English

Akeekkachiisa

Ergaawwan yaada haalaa gochoota fayyadamaa idileedhaaf ergaawwan akeekkachiisaa harka muraasa jiran fi jijjiiramaa ta'an waliin kenni.

Fuula kana irratti

Fakkeenyaaf

Akeekkachiisni dheerina barruu kamiifuu ni argama, akkasumas qaree cufi filannoo. Akkaataa sirrii ta'eef, gita haalata saddeet barbaachisan keessaa tokko fayyadami (fkn, .alert-success). Sarara keessaa hojii irraa ari'uuf, akeekkachiisa JavaScript plugin fayyadami .

<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>
Teeknooloojiiwwan gargaaraa ta’aniif hiika dabarsuu

Hiika dabaluudhaaf halluu fayyadamuun agarsiisa mul’ataa qofa kenna, kunis fayyadamtoota teeknooloojiiwwan gargaarsaa – kan akka dubbistoota iskiriinii – hin dabarfamu. Odeeffannoon halluudhaan agarsiifame qabiyyee mataa isaa irraa ifa ta'uu isaa mirkaneessi (fkn barruu mul'atu), ykn karaa filannootiin hammatamuu isaa, kan akka barruu dabalataa .visually-hiddengita waliin dhokatee.

.alert-linkAkeekkachiisa kamiyyuu keessaa walitti hidhamiinsa halluu walsimsiisu saffisaan kennuudhaaf gita faayidaa fayyadami .

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

Qabiyyee dabalataa

Akeekkachiisni qaamolee HTML dabalataa kan akka mataduree, keewwataa fi qoqqoodduus qabaachuu danda'a.

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

Mallattoolee

Haaluma walfakkaatuun, mallattoolee waliin akeekkachiisa uumuuf faayidaa flexbox fi Mallattoolee Bootstrap fayyadamuu dandeessa . Mallattoolee fi qabiyyee kee irratti hundaa'uun, faayidaa dabalataa ykn akkaataa amala dabaluu barbaadda ta'a.

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

Akeekkachiisa keessaniif mallattoo tokkoo ol barbaadduu? Mallattoolee Bootstrap baay'ee fayyadamuu fi mallattoolee walfakkaatan salphaatti irra deddeebi'anii wabii gochuuf sprite SVG naannoo akkas gochuu yaadaa.

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

Hojii irraa ari'uu

Ijaarsa JaavaScript akeekkachiisaa fayyadamuun, akeekkachiisa kamiyyuu sarara keessaa kuffisuun ni danda'ama. Akkamitti akka ta'e kunooti:

  • Ijaarsa akeekkachiisaa, ykn JaavaScript Bootstrap qindaa'e fe'uu kee mirkaneessi.
  • Qabduu cufi fi gita dabali .alert-dismissible, kunis padding dabalataa gara mirga akeekkachiisaatti dabalee qaree cufi iddoo kaa'a.
  • Qabduu cufi irratti, data-bs-dismiss="alert"amalli itti dabali, kunis dalagaa JaavaScript kakaasa. <button>Meeshaalee hunda irratti amala sirrii ta'eef elementii isa waliin fayyadamuu kee mirkaneessi .
  • Akeekkachiisa yeroo isaan kuffisuu sochoosuuf, gitaalee .fadefi dabaluu kee mirkaneessi..show

Kana hojiidhaan demoo kallattiin arguu dandeessu:

<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>
Yeroo akeekkachiisni kufamu, qaamni guutummaatti caasaa fuula irraa haqama. Yoo fayyadamaan kiiboordii qaree cufi fayyadamuun akeekkachiisa kuffise, xiyyeeffannaan isaanii akka tasaa ni bada, akkasumas, akka biraawzariitti, gara jalqaba fuula/galmeetti deebisa. Sababa kanaaf, JaavaScript dabalataa kan closed.bs.alerttaatee dhaggeeffatuu fi sagantaadhaan focus()fuula keessatti bakka hunda caalaa mijaawaa ta'etti saagu hammachuu gorsina. Yoo xiyyeeffannoo gara qaama wal-qunnamtii hin taane kan akka idileetti xiyyeeffannoo hin fudhannetti sochoosuuf karoorfatte, tabindex="-1"elementicha irratti dabaluu kee mirkaneessi.

Sass jedhama

Jijjiiramoota

$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

Miksiin garaagarummaa qabu

$theme-colorsAkeekkachiisa keenyaaf gita fooyyessaa yaada uumuuf waliin fayyadama .

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

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

Furgaasuu

Looppii gita fooyyessaa alert-variant()mixin waliin uumu.

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

Amala JaavaScript

Kaka’umsa

Karaa JaavaScript akeekkachiisa kuffisuu dandeessisi:

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

Yookiin dataamaloota qaree irratti akeekkachiisa keessa jiran waliin , akkuma armaan olitti agarsiifame:

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

Hubadhu, akeekkachiisa cufuun DOM irraa akka haqamu.

Malawwan

Ijaarsa akeekkachiisaa waliin fakkeenya akeekkachiisaa uumuu dandeessa, fakkeenyaaf:

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

Kunis akeekkachiisni taateewwan cuqaasuu qaamolee sanyii kanneen data-bs-dismiss="alert"amaloota qaban irratti dhaggeeffatu taasisa. (Yeroo ofumaan jalqabuu data-api fayyadamtu barbaachisaa miti.)

Mala Ibsa
close Akeekkachiisa DOM irraa haquudhaan cufa. Yoo gitaawwan .fadefi .showelementii irratti argaman, akeekkachiisni osoo hin haqamin dura ni bada.
dispose Akeekkachiisa elementii tokkoo ni balleessa. (Deetaa qaama DOM irratti kuufame ni haqa)
getInstance Mala static kan fakkeenya akeekkachiisaa elementii DOM waliin walqabate argachuuf si dandeessisu, akkasitti fayyadamuu dandeessa:bootstrap.Alert.getInstance(alert)
getOrCreateInstance Mala istaatiksii kan fakkeenya akeekkachiisaa qaama DOM waliin walqabate deebisu ykn yoo hin jalqabne haaraa uumuu. Akkasitti fayyadamuu dandeessu:bootstrap.Alert.getOrCreateInstance(element) 
var alertNode = document.querySelector('.alert')
var alert = bootstrap.Alert.getInstance(alertNode)
alert.close()

Taateewwan

Bootstrap's alert plugin taateewwan muraasa gara dalagaa akeekkachiisaatti hooking gochuuf saaxila.

Taatee Ibsa
close.bs.alert closeYeroo mala fakkeenyaa waamamu battalumatti dhukaasa .
closed.bs.alert Yeroo akeekkachiisni cufamee fi ce'umsi CSS xumurame ari'ama. 
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()
})