Lumaktaw sa pangunahing nilalaman Lumaktaw sa docs navigation
in English

Mga alerto

Magbigay ng mga mensahe ng feedback ayon sa konteksto para sa mga karaniwang pagkilos ng user na may kakaunting available at flexible na mensahe ng alerto.

Sa pahinang ito

Mga halimbawa

Available ang mga alerto para sa anumang haba ng text, pati na rin ang opsyonal na button na isara. Para sa tamang pag-istilo, gumamit ng isa sa walong kinakailangang mga klase sa konteksto (hal., .alert-success). Para sa inline na dismissal, gamitin ang alerto 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>
Naghahatid ng kahulugan sa mga pantulong na teknolohiya

Ang paggamit ng kulay upang magdagdag ng kahulugan ay nagbibigay lamang ng visual na indikasyon, na hindi ibibigay sa mga gumagamit ng mga pantulong na teknolohiya - tulad ng mga screen reader. Siguraduhin na ang impormasyong tinutukoy ng kulay ay maaaring halata mula sa nilalaman mismo (hal. ang nakikitang teksto), o kasama sa pamamagitan ng mga alternatibong paraan, tulad ng karagdagang tekstong nakatago sa .visually-hiddenklase.

Gamitin ang .alert-linkutility class para mabilis na makapagbigay ng mga katugmang kulay na link sa loob ng anumang 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>

Karagdagang nilalaman

Ang mga alerto ay maaari ding maglaman ng mga karagdagang elemento ng HTML tulad ng mga heading, paragraph at 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

Katulad nito, maaari mong gamitin ang flexbox utilities at Bootstrap Icon upang lumikha ng mga alerto na may mga icon. Depende sa iyong mga icon at content, maaaring gusto mong magdagdag ng higit pang mga utility o custom na 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>

Kailangan ng higit sa isang icon para sa iyong mga alerto? Isaalang-alang ang paggamit ng higit pang Mga Icon ng Bootstrap at paggawa ng isang lokal na SVG sprite na tulad nito upang madaling i-reference ang parehong mga icon nang paulit-ulit.

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

Tinatanggal

Gamit ang alertong JavaScript plugin, posibleng i-dismiss ang anumang alerto sa linya. Ganito:

  • Tiyaking na-load mo ang alerto plugin, o ang pinagsama-samang Bootstrap JavaScript.
  • Magdagdag ng close button at ang .alert-dismissibleklase, na nagdaragdag ng karagdagang padding sa kanan ng alerto at ipinoposisyon ang close button.
  • Sa button na isara, idagdag ang data-bs-dismiss="alert"attribute, na nagti-trigger sa functionality ng JavaScript. Tiyaking gamitin ang <button>elemento kasama nito para sa wastong pag-uugali sa lahat ng device.
  • Upang i-animate ang mga alerto kapag dini-dismiss ang mga ito, tiyaking idagdag ang .fadeat mga .showklase.

Makikita mo ito sa pagkilos gamit ang isang live na 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>
Kapag na-dismiss ang isang alerto, ganap na maaalis ang elemento sa istraktura ng page. Kung i-dismiss ng isang keyboard user ang alerto gamit ang close button, ang kanilang focus ay biglang mawawala at, depende sa browser, magre-reset sa simula ng page/dokumento. Para sa kadahilanang ito, inirerekumenda namin ang pagsama ng karagdagang JavaScript na nakikinig para sa closed.bs.alertkaganapan at naka-program focus()sa pinakaangkop na lokasyon sa pahina. Kung nagpaplano kang ilipat ang focus sa isang hindi interactive na elemento na karaniwang hindi nakakatanggap ng focus, tiyaking magdagdag tabindex="-1"sa 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

Ginagamit kasabay $theme-colorsng paggawa ng mga klase ng modifier ng konteksto para sa aming 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 na bumubuo ng mga klase ng modifier gamit ang 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);
  }
}

Pag-uugali ng JavaScript

Mga nag-trigger

Paganahin ang pag-dismiss ng isang alerto sa pamamagitan ng JavaScript:

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

O may mga datakatangian sa isang button sa loob ng alerto , tulad ng ipinakita sa itaas:

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

Tandaan na ang pagsasara ng alerto ay mag-aalis nito sa DOM.

Paraan

Maaari kang lumikha ng isang instance ng alerto gamit ang tagabuo ng alerto, halimbawa:

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

Ginagawa nitong alerto ang pakikinig para sa mga kaganapan sa pag-click sa mga descendant na elemento na may data-bs-dismiss="alert"katangian. (Hindi kinakailangan kapag ginagamit ang auto-initialization ng data-api.)

Pamamaraan Paglalarawan
close Nagsasara ng alerto sa pamamagitan ng pag-alis nito sa DOM. Kung ang .fadeat mga .showklase ay naroroon sa elemento, ang alerto ay maglalaho bago ito alisin.
dispose Sinisira ang alerto ng isang elemento. (Aalisin ang nakaimbak na data sa elemento ng DOM)
getInstance Static na paraan na nagbibigay-daan sa iyong makuha ang alertong instance na nauugnay sa isang elemento ng DOM, maaari mo itong gamitin tulad nito:bootstrap.Alert.getInstance(alert)
getOrCreateInstance Static na paraan na nagbabalik ng instance ng alerto na nauugnay sa isang elemento ng DOM o lumikha ng bago kung sakaling hindi ito nasimulan. Maaari mo itong gamitin tulad nito:bootstrap.Alert.getOrCreateInstance(element) 
var alertNode = document.querySelector('.alert')
var alert = bootstrap.Alert.getInstance(alertNode)
alert.close()

Mga kaganapan

Ang plugin ng alerto ng Bootstrap ay naglalantad ng ilang mga kaganapan para sa hooking sa pagpapaandar ng alerto.

Kaganapan Paglalarawan
close.bs.alert Agad na gumagana kapag closetinawag ang paraan ng instance.
closed.bs.alert Pinaputok kapag naisara na ang alerto at nakumpleto ang mga transition ng CSS. 
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()
})