Laktawan sa panguna nga sulud Laktaw sa docs navigation
in English

Mga alerto

Paghatag ug konteksto nga feedback nga mga mensahe alang sa kasagarang mga aksyon sa user uban sa pipila ka anaa ug flexible alert nga mga mensahe.

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

Live nga ehemplo

I-klik ang buton sa ubos aron ipakita ang alerto (gitago uban ang inline nga mga estilo aron magsugod), dayon i-dismiss (ug gub-on) kini gamit ang built-in nga close button.

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

Gigamit namo ang mosunod nga JavaScript aron ma-trigger ang among live alert demo:

var alertPlaceholder = document.getElementById('liveAlertPlaceholder')
var alertTrigger = document.getElementById('liveAlertBtn')

function alert(message, type) {
  var wrapper = document.createElement('div')
  wrapper.innerHTML = '<div class="alert alert-' + type + ' alert-dismissible" role="alert">' + message + '<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button></div>'

  alertPlaceholder.append(wrapper)
}

if (alertTrigger) {
  alertTrigger.addEventListener('click', function () {
    alert('Nice, you triggered this alert message!', 'success')
  })
}

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 mga gamit sa flexbox ug Mga Icon sa Bootstrap aron makahimo 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. Siguruha nga gamiton ang <button>elemento uban niini alang sa husto nga pamatasan sa tanan nga mga aparato.
  • 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 ang paglakip sa 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

Pagsugod

Pagsugod sa mga elemento ingon mga alerto

var alertList = document.querySelectorAll('.alert')
var alerts =  [].slice.call(alertList).map(function (element) {
  return new bootstrap.Alert(element)
})

Alang sa bugtong katuyoan sa pagtangtang sa usa ka alerto, dili kinahanglan nga i-initialize ang sangkap nga mano-mano pinaagi sa JS API. Pinaagi sa paggamit sa data-bs-dismiss="alert", ang sangkap mahimong awtomatik nga masugdan ug husto nga isalikway.

Tan-awa ang seksyon sa pag- trigger alang sa dugang nga mga detalye.

Mga trigger

Ang pagtangtang mahimong makab-ot gamit ang datahiyas sa usa ka buton sulod sa alerto sama sa gipakita sa ubos:

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

o sa usa ka buton sa gawas sa alerto gamit ang data-bs-targetgipakita sa ubos:

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

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

Pamaagi

Pamaagi Deskripsyon
close Pagsira sa usa ka alerto pinaagi sa pagtangtang niini gikan sa DOM. Kung ang .fadeug ang .showmga klase anaa sa elemento, ang alerto mawala sa dili pa kini tangtangon.
dispose Makaguba sa alerto sa usa ka elemento. (Gitangtang 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 ang closepamaagi sa pananglitan gitawag.
closed.bs.alert Gipabuto kung ang alerto gisirhan na ug ang mga transisyon sa CSS 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()
})