Laktawan sa panguna nga sulud Laktaw sa docs navigation
Check
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 .

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

Live nga ehemplo

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

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

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

Gamita ang .alert-linkklase sa utility aron dali nga mahatagan ang parehas nga kolor nga mga link sa sulod sa bisan unsang 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>

Dugang nga sulod

Ang mga alerto mahimo usab nga adunay dugang nga mga elemento sa HTML sama sa mga ulohan, paragraph ug mga 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

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.

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>

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.

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>

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:

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

CSS

Mga variable

Gidugang sa v5.2.0

Isip kabahin sa nag-uswag nga CSS variables approach sa Bootstrap, ang mga alerto karon naggamit sa lokal nga CSS variables .alertalang sa gipaayo nga real-time nga pag-customize. Ang mga kantidad alang sa mga variable sa CSS gitakda pinaagi sa Sass, busa ang pag-customize sa Sass gisuportahan usab.

  --#{$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 variables

$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

Gigamit sa kombinasyon $theme-colorssa paghimo og mga klase sa kontekstwal nga modifier para sa among 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 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

const alertList = document.querySelectorAll('.alert')
const alerts = [...alertList].map(element => 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 awtomatiko 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

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

const 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 nga makuha ang alerto nga pananglitan nga adunay kalabotan sa usa ka elemento sa DOM. Pananglitan: 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).

Panguna nga paggamit:

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