Gara qabiyyee ijootti darbi Gara docs navigationitti darbi
Check
in English

Akeekkachiisa

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

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

Fakkeenya jiraadhu

Akeekkachiisa agarsiisuuf qaree armaan gadii cuqaasi (jalqabuuf akkaataa sarara keessaatiin dhokate), sana booda qaree cufiinsaa ijaarameen kuffisi (fi balleessi).

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

Demo akeekkachiisa kallattiin keenya kakaasuuf JaavaScript armaan gadii fayyadamna:

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

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

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>

Qabiyyee dabalataa

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

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>

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.

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>

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.

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>

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, itti dabalidata-bs-dismiss="alert" amalli itti dabali, kunis dalagaa JaavaScript kakaasa. <button>Meeshaalee hunda irratti amala sirrii ta'eef elementii isa waliin fayyadamuu kee mirkaneessi .
  • Yeroo isaan kuffiftu akeekkachiisa sochoosuuf, gitaalee .fadefi dabaluu kee mirkaneessi..show

Kana hojiidhaan demoo kallattiin arguu dandeessu:

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

CSS jedhamuun beekama

Jijjiiramoota

v5.2.0 keessatti dabalameera

Akka qaama mala jijjiiramoota CSS guddachaa jiran Bootstrap, akeekkachiisni amma jijjiiramoota CSS naannoo on fayyadama .alertyeroo dhugaa dhuunfachiisaa fooyya'eef. Gatiin jijjiiramoota CSS karaa Sass qindaa'u, kanaafuu dhuunfachiisuun Sass ammallee ni deeggarama, akkasumas.

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

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

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

@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 jedhamuun beekama

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

Jalqabuu

Qaamolee akka akeekkachiisaatti jalqabi

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

Kaayyoo akeekkachiisa kuffisuuf qofaaf, qaama harkaan karaa JS API jalqabuun barbaachisaa miti. Fayyadamuudhaandata-bs-dismiss="alert" , qaamni ofumaan jalqabamee sirnaan ni kufa.

Bal'ina isaaf kutaa kaka'umsaa ilaali .

Kaka’umsa

dataHojii irraa ari'uun amaloota qaree akeekkachiisa keessa jiru irratti akka armaan gadiitti galma ga'uu danda'a :

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

ykn button akeekkachiisa ala jirudata-bs-target irratti akka armaan gadiitti fayyadamuun :

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

Hubadhu, akeekkachiisa cufuun DOM irraa akka haqamu.

Malawwan

Ijaarsa akeekkachiisaa waliin fakkeenya akeekkachiisaa uumuu dandeessa, fakkeenyaaf:

const 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 gitaaleen .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 istaatiksii kan fakkeenya akeekkachiisaa qaama DOM waliin walqabate argachuuf si dandeessisu. Fakkeenyaaf: bootstrap.Alert.getInstance(alert).
getOrCreateInstance Mala istaatiksii kan fakkeenya akeekkachiisaa qaama DOM waliin walqabate deebisu ykn yoo hin jalqabne haaraa uumuu. Akkasitti fayyadamuu dandeessa: bootstrap.Alert.getOrCreateInstance(element).

Fayyadama bu’uuraa: 1.1.

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