Lewati ke konten utama Lewati ke navigasi dokumen
Check
in English

Peringatan

Berikan pesan umpan balik kontekstual untuk tindakan pengguna biasa dengan beberapa pesan peringatan yang tersedia dan fleksibel.

Di halaman ini

Contoh

Peringatan tersedia untuk setiap panjang teks, serta tombol tutup opsional. Untuk penataan gaya yang tepat, gunakan salah satu dari delapan kelas kontekstual yang diperlukan (mis., .alert-success). Untuk pemberhentian sebaris, gunakan plugin JavaScript peringatan .

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>
Menyampaikan makna pada teknologi bantu

Menggunakan warna untuk menambah makna hanya memberikan indikasi visual, yang tidak akan disampaikan kepada pengguna teknologi bantu – seperti pembaca layar. Pastikan bahwa informasi yang dilambangkan dengan warna jelas dari konten itu sendiri (misalnya teks yang terlihat), atau disertakan melalui cara alternatif, seperti teks tambahan yang disembunyikan dengan .visually-hiddenkelas.

Contoh langsung

Klik tombol di bawah untuk menampilkan peringatan (disembunyikan dengan gaya sebaris untuk memulai), lalu tutup (dan hancurkan) dengan tombol tutup bawaan.

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

Kami menggunakan JavaScript berikut untuk memicu demo peringatan 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')
  })
}

Gunakan .alert-linkkelas utilitas untuk menyediakan tautan berwarna yang cocok dengan cepat dalam peringatan apa pun.

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>

Konten tambahan

Lansiran juga dapat berisi elemen HTML tambahan seperti judul, paragraf, dan pembagi.

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

Demikian pula, Anda dapat menggunakan utilitas flexbox dan Ikon Bootstrap untuk membuat peringatan dengan ikon. Bergantung pada ikon dan konten Anda, Anda mungkin ingin menambahkan lebih banyak utilitas atau gaya kustom.

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>

Butuh lebih dari satu ikon untuk lansiran Anda? Pertimbangkan untuk menggunakan lebih banyak Ikon Bootstrap dan membuat sprite SVG lokal seperti itu untuk dengan mudah mereferensikan ikon yang sama berulang 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>

Mengabaikan

Dengan menggunakan plugin JavaScript lansiran, Anda dapat mengabaikan lansiran sebaris apa pun. Berikut caranya:

  • Pastikan Anda telah memuat plugin peringatan, atau JavaScript Bootstrap yang dikompilasi.
  • Tambahkan tombol tutup dan .alert-dismissiblekelas, yang menambahkan bantalan ekstra di sebelah kanan peringatan dan posisikan tombol tutup.
  • Pada tombol tutup, tambahkan data-bs-dismiss="alert"atribut, yang memicu fungsionalitas JavaScript. Pastikan untuk menggunakan <button>elemen dengan itu untuk perilaku yang tepat di semua perangkat.
  • Untuk menganimasikan peringatan saat menutupnya, pastikan untuk menambahkan kelas .fadedan .show.

Anda dapat melihat ini beraksi dengan 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>
Saat peringatan diberhentikan, elemen tersebut sepenuhnya dihapus dari struktur halaman. Jika pengguna keyboard mengabaikan peringatan menggunakan tombol tutup, fokus mereka akan tiba-tiba hilang dan, tergantung pada browser, reset ke awal halaman/dokumen. Untuk alasan ini, sebaiknya sertakan JavaScript tambahan yang mendengarkan closed.bs.alertacara dan secara terprogram disetel focus()ke lokasi yang paling tepat di halaman. Jika Anda berencana untuk memindahkan fokus ke elemen non-interaktif yang biasanya tidak menerima fokus, pastikan untuk menambahkan tabindex="-1"elemen tersebut.

CSS

Variabel

Ditambahkan di v5.2.0

Sebagai bagian dari pendekatan variabel CSS Bootstrap yang berkembang, peringatan sekarang menggunakan variabel CSS lokal .alertuntuk penyesuaian waktu nyata yang ditingkatkan. Nilai untuk variabel CSS diatur melalui Sass, jadi kustomisasi Sass juga masih didukung.

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

Campur aduk

Digunakan dalam kombinasi dengan $theme-colorsuntuk membuat kelas pengubah kontekstual untuk peringatan kami.

@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 yang menghasilkan kelas pengubah dengan 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);
  }
}

Perilaku JavaScript

Inisialisasi

Inisialisasi elemen sebagai peringatan

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

Untuk satu-satunya tujuan menghilangkan peringatan, tidak perlu menginisialisasi komponen secara manual melalui JS API. Dengan memanfaatkan data-bs-dismiss="alert", komponen akan diinisialisasi secara otomatis dan diberhentikan dengan benar.

Lihat bagian pemicu untuk detail selengkapnya.

Pemicu

Pemberhentian dapat dicapai dengan dataatribut pada tombol dalam peringatan seperti yang ditunjukkan di bawah ini:

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

atau pada tombol di luar peringatan menggunakan data-bs-targetseperti yang ditunjukkan di bawah ini:

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

Perhatikan bahwa menutup lansiran akan menghapusnya dari DOM.

Metode

Anda dapat membuat instance peringatan dengan konstruktor peringatan, misalnya:

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

Ini membuat peringatan mendengarkan peristiwa klik pada elemen turunan yang memiliki data-bs-dismiss="alert"atribut tersebut. (Tidak diperlukan saat menggunakan inisialisasi otomatis data-api.)

metode Keterangan
close Menutup lansiran dengan menghapusnya dari DOM. Jika .fadedan .showkelas ada pada elemen, peringatan akan menghilang sebelum dihapus.
dispose Menghancurkan peringatan elemen. (Menghapus data yang tersimpan pada elemen DOM)
getInstance Metode statis yang memungkinkan Anda mendapatkan instance peringatan yang terkait dengan elemen DOM. Misalnya: bootstrap.Alert.getInstance(alert).
getOrCreateInstance Metode statis yang mengembalikan instance peringatan yang terkait dengan elemen DOM atau membuat yang baru jika tidak diinisialisasi. Anda dapat menggunakannya seperti ini: bootstrap.Alert.getOrCreateInstance(element).

Penggunaan dasar:

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

Acara

Plugin peringatan Bootstrap memperlihatkan beberapa peristiwa untuk menghubungkan ke fungsi peringatan.

Peristiwa Keterangan
close.bs.alert Diaktifkan segera saat closemetode instance dipanggil.
closed.bs.alert Diaktifkan saat peringatan telah ditutup dan transisi CSS telah selesai. 
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()
})