Lumaktaw sa pangunahing nilalaman Lumaktaw sa docs navigation
Check
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 .

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

Live na halimbawa

I-click ang button sa ibaba upang magpakita ng alerto (nakatago na may mga inline na istilo upang magsimula), pagkatapos ay i-dismiss (at sirain) ito gamit ang built-in na close button.

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

Ginagamit namin ang sumusunod na JavaScript upang ma-trigger ang aming live na demo ng alerto:

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

Gamitin ang .alert-linkutility class para mabilis na makapagbigay ng mga katugmang kulay na link sa loob ng anumang alerto.

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>

Karagdagang nilalaman

Ang mga alerto ay maaari ding maglaman ng mga karagdagang elemento ng HTML tulad ng mga heading, paragraph at divider.

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>

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.

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>

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.

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>

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:

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>
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 pinaplano mong ilipat ang focus sa isang hindi interactive na elemento na karaniwang hindi nakakatanggap ng focus, tiyaking magdagdag tabindex="-1"sa elemento.

CSS

Mga variable

Idinagdag sa v5.2.0

Bilang bahagi ng umuusbong na mga variable ng CSS ng Bootstrap, ginagamit na ngayon ng mga alerto ang mga lokal na variable ng CSS .alertpara sa pinahusay na real-time na pag-customize. Ang mga halaga para sa mga variable ng CSS ay itinakda sa pamamagitan ng Sass, kaya sinusuportahan pa rin ang pag-customize ng Sass.

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

Sass 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

Sass mixin

Ginagamit kasabay $theme-colorsng paggawa ng mga klase ng modifier ng konteksto para sa aming mga alerto.

@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

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

Magsimula

Magsimula ng mga elemento bilang mga alerto

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

Para sa nag-iisang layunin na i-dismiss ang isang alerto, hindi kinakailangan na manual na simulan ang component sa pamamagitan ng JS API. Sa pamamagitan ng paggamit ng data-bs-dismiss="alert", ang bahagi ay awtomatikong masisimulan at maayos na idi-dismiss.

Tingnan ang seksyon ng mga trigger para sa higit pang mga detalye.

Mga nag-trigger

Maaaring makamit ang pagpapaalis gamit ang datakatangian sa isang button sa loob ng alerto gaya ng ipinapakita sa ibaba:

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

o sa isang button sa labas ng alerto gamit ang data-bs-targettulad ng ipinapakita sa ibaba:

<button type="button" class="btn-close" data-bs-dismiss="alert" data-bs-target="#my-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:

const 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. Halimbawa: 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. Magagamit mo ito tulad nito: bootstrap.Alert.getOrCreateInstance(element).

Pangunahing paggamit:

const alert = bootstrap.Alert.getOrCreateInstance('#myAlert')
alert.close()

Mga kaganapan

Ang plugin ng alerto ng Bootstrap ay naglalantad ng ilang mga kaganapan para sa pag-hook 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. 
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()
})