Laktawan sa panguna nga sulud Laktaw sa docs navigation
in English

Mga alerto

Paghatag mga mensahe sa feedback sa konteksto alang sa kasagaran nga mga aksyon sa gumagamit nga adunay pipila nga magamit ug nabag-o nga mga mensahe sa alerto.

Niini nga panid

Mga pananglitan

Magamit ang mga alerto alang sa bisan unsang gitas-on sa teksto, ingon man usa ka opsyonal nga buton sa pagsira. Alang sa hustong pag-istilo, gamita ang usa sa walo ka gikinahanglang mga klase sa konteksto (pananglitan, .alert-success). Alang sa inline nga pagtangtang, gamita ang mga alerto nga JavaScript plugin .

<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>
Paghatag kahulogan sa mga teknolohiya sa pagtabang

Ang paggamit og kolor aron makadugang og kahulogan naghatag lamang og biswal nga indikasyon, nga dili ipaabot ngadto sa mga tiggamit sa mga teknolohiyang makatabang – sama sa mga screen reader. Siguruha nga ang impormasyon nga gipaila sa kolor mahimong dayag gikan sa sulod mismo (pananglitan ang makita nga teksto), o gilakip pinaagi sa alternatibong paagi, sama sa dugang nga teksto nga gitago sa .visually-hiddenklase.

Gamita ang .alert-linkklase sa utility aron dali nga mahatagan ang parehas nga kolor nga mga link sa sulod sa bisan unsang alerto.

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

Dugang nga sulod

Ang mga alerto mahimo usab nga adunay dugang nga mga elemento sa HTML sama sa mga ulohan, paragraph ug mga divider.

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

Mga icon

Sa susama, mahimo nimong gamiton ang flexbox utilities ug Bootstrap Icons aron makahimo og mga alerto nga adunay mga icon. Depende sa imong mga icon ug sulud, mahimo nimong idugang ang daghang mga gamit o naandan nga istilo.

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

Nagkinahanglan ug labaw sa usa ka icon para sa imong mga alerto? Ikonsiderar ang paggamit sa dugang nga Bootstrap Icons ug paghimo og lokal nga SVG sprite nga sama niini aron dali nga maghisgot sa parehas nga mga icon nga balik-balik.

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

Gipalagpot

Gamit ang alerto nga JavaScript plugin, posible nga i-dismiss ang bisan unsang alert inline. Ania kung giunsa:

  • Siguroha nga imong gikarga ang alert plugin, o ang gihugpong nga Bootstrap JavaScript.
  • Pagdugang og close button ug ang .alert-dismissibleklase, nga magdugang og dugang padding sa tuo sa alert ug ibutang ang close button.
  • Sa close button, idugang ang data-bs-dismiss="alert"attribute, nga mag-trigger sa JavaScript functionality. Siguroha nga gamiton ang <button>elemento uban niini alang sa husto nga kinaiya sa tanang mga himan.
  • Aron ma-animate ang mga alerto kung i-dismiss kini, siguruha nga idugang ang .fadeug .showmga klase.

Makita nimo kini sa aksyon gamit ang usa ka live demo:

<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>
Kung ang usa ka alerto gisalikway, ang elemento hingpit nga gikuha gikan sa istruktura sa panid. Kung ang usa ka tiggamit sa keyboard isalikway ang alerto gamit ang close button, ang ilang focus kalit nga mawala ug, depende sa browser, i-reset sa pagsugod sa panid/dokumento. Tungod niini nga rason, among girekomendar nga ilakip ang dugang nga JavaScript nga maminaw sa closed.bs.alertpanghitabo ug programmatically set focus()sa pinakahaom nga lokasyon sa page. Kung nagplano ka nga ibalhin ang focus sa usa ka non-interactive nga elemento nga kasagarang dili makadawat og focus, siguroha nga idugang tabindex="-1"ang elemento.

Sass

Mga variable

$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

Variant mixin

Gigamit sa kombinasyon $theme-colorssa paghimo og mga klase sa kontekstwal nga modifier para sa among mga alerto.

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

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

Loop

Loop nga nagmugna sa mga klase sa modifier nga adunay 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);
  }
}

Panggawi sa JavaScript

Mga trigger

I-enable ang pagtangtang sa usa ka alerto pinaagi sa JavaScript:

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

O adunay datamga hiyas sa usa ka buton sulod sa alerto , sama sa gipakita sa ibabaw:

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

Timan-i nga ang pagsira sa usa ka alerto magtangtang niini gikan sa DOM.

Pamaagi

Makahimo ka og usa ka alerto nga pananglitan sa alert constructor, pananglitan:

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

Naghimo kini usa ka alerto sa pagpaminaw sa mga panghitabo sa pag-klik sa mga elemento sa kaliwat nga adunay data-bs-dismiss="alert"hiyas. (Dili kinahanglan kung gamiton ang auto-initialization sa data-api.)

Pamaagi Deskripsyon
close Pagsira sa usa ka alerto pinaagi sa pagtangtang niini gikan sa DOM. Kung ang .fadeug .showmga klase anaa sa elemento, ang alerto mawala sa dili pa kini tangtangon.
dispose Makaguba sa alerto sa usa ka elemento. (Gikuha ang gitipigan nga datos sa elemento sa DOM)
getInstance Static nga pamaagi nga nagtugot kanimo sa pagkuha sa alert nga pananglitan nga may kalabutan sa usa ka elemento sa DOM, mahimo nimo kining gamiton sama niini:bootstrap.Alert.getInstance(alert)
getOrCreateInstance Static nga pamaagi nga nagbalik sa usa ka alerto nga instance nga may kalabutan sa usa ka elemento sa DOM o paghimo og bag-o kung wala kini gisugdan. Mahimo nimo kini gamiton sama niini:bootstrap.Alert.getOrCreateInstance(element) 
var alertNode = document.querySelector('.alert')
var alert = bootstrap.Alert.getInstance(alertNode)
alert.close()

Mga panghitabo

Ang alert plugin sa Bootstrap nagbutyag sa pipila ka mga panghitabo alang sa pag-hook sa alert functionality.

Panghitabo Deskripsyon
close.bs.alert Nagdilaab dayon kung closegitawag ang pamaagi sa pananglitan.
closed.bs.alert Gipabuto sa dihang ang alerto gisirado na ug ang CSS transisyon nahuman na. 
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()
})