Peringatan
Berikan pesan umpan balik kontekstual untuk tindakan pengguna biasa dengan beberapa pesan peringatan yang tersedia dan fleksibel.
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 .
<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-hidden
kelas.
Warna tautan
Gunakan .alert-link
kelas utilitas untuk menyediakan tautan berwarna yang cocok dengan cepat dalam peringatan apa pun.
<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.
Bagus sekali!
Aww ya, Anda berhasil membaca pesan peringatan penting ini. Contoh teks ini akan berjalan sedikit lebih lama sehingga Anda dapat melihat bagaimana spasi dalam peringatan bekerja dengan jenis konten ini.
Kapan pun Anda perlu, pastikan untuk menggunakan utilitas margin untuk menjaga semuanya tetap bagus dan rapi.
<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.
<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>
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.
<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>
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-dismissible
kelas, 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
.fade
dan.show
.
Anda dapat melihat ini beraksi dengan demo langsung:
<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>
closed.bs.alert
acara 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.
Kelancangan
Variabel
$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
Varian campuran
Digunakan dalam kombinasi dengan $theme-colors
untuk membuat kelas pengubah kontekstual untuk peringatan kami.
@mixin alert-variant($background, $border, $color) {
color: $color;
@include gradient-bg($background);
border-color: $border;
.alert-link {
color: shade-color($color, 20%);
}
}
Lingkaran
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
Pemicu
Aktifkan penghentian lansiran melalui JavaScript:
var alertList = document.querySelectorAll('.alert')
alertList.forEach(function (alert) {
new bootstrap.Alert(alert)
})
Atau dengan data
atribut pada tombol di dalam alert , seperti yang ditunjukkan di atas:
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
Perhatikan bahwa menutup lansiran akan menghapusnya dari DOM.
Metode
Anda dapat membuat instance peringatan dengan konstruktor peringatan, misalnya:
var myAlert = document.getElementById('myAlert')
var 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 .fade dan .show kelas 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 untuk mendapatkan instance peringatan yang terkait dengan elemen DOM, Anda dapat menggunakannya seperti ini: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) |
var alertNode = document.querySelector('.alert')
var alert = bootstrap.Alert.getInstance(alertNode)
alert.close()
Acara
Plugin peringatan Bootstrap memperlihatkan beberapa peristiwa untuk menghubungkan ke fungsi peringatan.
Peristiwa | Keterangan |
---|---|
close.bs.alert |
Diaktifkan segera saat close metode instance dipanggil. |
closed.bs.alert |
Diaktifkan saat peringatan telah ditutup dan transisi CSS telah selesai. |
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()
})