Luncat ka eusi utama Luncat ka navigasi docs
Check
in English

Siaga

Nyadiakeun pesen eupan balik kontekstual pikeun lampah pamaké has kalawan sakeupeul pesen waspada sadia tur fléksibel.

Dina kaca ieu

Contona

Tanda sadia pikeun sagala panjang téks, kitu ogé hiji tombol nutup pilihan. Pikeun gaya anu leres, paké salah sahiji tina dalapan kelas kontekstual anu diperyogikeun (contona, .alert-success). Pikeun PHK inline, paké panggeuing 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>
Nepikeun harti kana téknologi anu ngabantosan

Ngagunakeun warna pikeun nambahkeun harti ngan nyadiakeun indikasi visual, nu moal conveyed ka pamaké tina téhnologi mantuan - kayaning pamiarsa layar. Pastikeun yén inpormasi anu dilambangkeun ku warna écés tina eusina sorangan (contona téks anu katingali), atanapi kalebet dina cara alternatif, sapertos téks tambahan disumputkeun sareng .visually-hiddenkelas.

Hirup conto

Pencét tombol di handap pikeun nunjukkeun waspada (disumputkeun ku gaya inline pikeun ngamimitian), teras pupus (sareng ngancurkeun) kalayan tombol tutup anu diwangun.

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

Kami nganggo JavaScript di handap ieu pikeun memicu demo waspada langsung kami:

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

Anggo .alert-linkkelas utiliti pikeun gancang nyayogikeun tautan warna anu cocog dina ngageter naon waé.

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>

eusi tambahan

Tanda ogé bisa ngandung elemen HTML tambahan kawas lulugu, paragraf jeung dividers.

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>

Ikon

Nya kitu, anjeun tiasa nganggo utilitas flexbox sareng Ikon Bootstrap pikeun nyiptakeun panggeuing sareng ikon. Gumantung kana ikon sareng eusi anjeun, anjeun panginten hoyong nambihan langkung seueur utilitas atanapi gaya khusus.

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>

Peryogi langkung ti hiji ikon pikeun panggeuing anjeun? Pertimbangkeun nganggo langkung seueur Ikon Bootstrap sareng ngadamel sprite SVG lokal sapertos kitu pikeun gampang ngarujuk ikon anu sami sababaraha kali.

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>

Ngabubarkeun

Ngagunakeun plugin ngageter JavaScript, éta mungkin pikeun ngilangkeun sagala inline ngageter. Kieu carana:

  • Pastikeun anjeun parantos ngamuat plugin waspada, atanapi Bootstrap JavaScript anu disusun.
  • Nambahkeun tombol nutup jeung .alert-dismissiblekelas, nu nambihan padding tambahan ka katuhu waspada jeung posisi tombol nutup.
  • Dina tombol nutup, tambahkeun data-bs-dismiss="alert"atribut, nu micu fungsionalitas JavaScript. Pastikeun ngagunakeun <button>unsur éta pikeun paripolah anu leres dina sadaya alat.
  • Pikeun ngahirupkeun panggeuing nalika ngaleungitkeun aranjeunna, pastikeun pikeun nambihan kelas .fadesareng .show.

Anjeun tiasa ningali ieu dina aksi sareng demo langsung:

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>
Nalika hiji ngageter dipecat, unsur sagemblengna dipiceun tina struktur kaca. Upami pangguna keyboard nolak ngageter nganggo tombol tutup, fokusna bakal ujug-ujug leungit sareng, gumantung kana browser, reset ka awal halaman/dokumen. Kusabab ieu, kami nyarankeun kalebet JavaScript tambahan anu ngadangukeun closed.bs.alertacara sareng sacara terprogram disetél focus()ka lokasi anu paling pas dina halaman éta. Upami anjeun badé ngalihkeun fokus kana unsur non-interaktif anu biasana henteu nampi fokus, pastikeun pikeun nambihan tabindex="-1"unsur éta.

CSS

Variabel

Ditambahkeun dina v5.2.0

Salaku bagian tina pendekatan variabel CSS Bootstrap anu ngembang, panggeuing ayeuna nganggo variabel CSS lokal .alertpikeun ningkatkeun kustomisasi sacara real-time. Nilai pikeun variabel CSS diatur via Sass, jadi kustomisasi Sass masih dirojong, teuing.

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

variabel Sass

$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

Dipaké dina kombinasi jeung $theme-colorsnyieun kelas modifier kontekstual pikeun ngabejaan urang.

@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 anu ngahasilkeun kelas modifier sareng 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);
  }
}

kabiasaan JavaScript

Mimitian

Initialize elemen salaku ngabejaan

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

Pikeun tujuan tunggal ngabubarkeun béwara, henteu kedah ngamimitian komponén sacara manual via JS API. Ku ngagunakeun data-bs-dismiss="alert", komponén bakal initialized otomatis tur leres mecat.

Tempo bagian pemicu pikeun leuwih rinci.

Pemicu

PHK tiasa dihontal ku dataatribut dina tombol dina waspada sapertos anu dipidangkeun di handap ieu:

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

atawa dina tombol di luar ngageter ngagunakeun data-bs-targetsakumaha ditémbongkeun di handap ieu:

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

Catet yén nutup ngageter bakal ngahapus tina DOM.

Métode

Anjeun tiasa nyiptakeun conto waspada sareng konstruktor waspada, contona:

const bsAlert = new bootstrap.Alert('#myAlert')

Hal ieu ngajadikeun waspada ngadangukeun acara klik dina elemen turunan anu ngagaduhan data-bs-dismiss="alert"atribut. (Teu diperlukeun nalika ngagunakeun data-api sacara otomatis-inisialisasi.)

Métode Katerangan
close Nutup ngageter ku cara ngahapus tina DOM. Upami kelas .fadesareng .showaya dina unsur, waspada bakal luntur sateuacan dipiceun.
dispose Ngancurkeun waspada hiji unsur. (Ngahapus data anu disimpen dina unsur DOM)
getInstance Métode statik anu ngamungkinkeun anjeun kéngingkeun conto waspada anu aya hubunganana sareng unsur DOM. Contona: bootstrap.Alert.getInstance(alert).
getOrCreateInstance Métode statik anu ngabalikeun conto waspada anu aya hubunganana sareng unsur DOM atanapi ngadamel anu énggal upami henteu diinisialisasi. Anjeun tiasa nganggo sapertos kieu: bootstrap.Alert.getOrCreateInstance(element).

Pamakéan dasar:

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

Kajadian

Plugin ngageter Bootstrap ngungkabkeun sababaraha acara pikeun ngahubungkeun kana fungsionalitas waspada.

Acara Katerangan
close.bs.alert Kahuruan geuwat nalika closemetoda conto disebut.
closed.bs.alert Dipecat nalika ngageter geus ditutup sarta transisi CSS geus réngsé. 
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()
})