Makluman
Sediakan mesej maklum balas kontekstual untuk tindakan pengguna biasa dengan segelintir mesej makluman yang tersedia dan fleksibel.
Contoh
Makluman tersedia untuk sebarang panjang teks, serta butang tutup pilihan. Untuk penggayaan yang betul, gunakan salah satu daripada lapan kelas kontekstual yang diperlukan.alert-success
(cth, ). Untuk pemecatan sebaris, gunakan pemalam JavaScript makluman .
<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 kepada teknologi bantuan
Menggunakan warna untuk menambah makna hanya memberikan petunjuk visual, yang tidak akan disampaikan kepada pengguna teknologi bantuan - seperti pembaca skrin. Pastikan maklumat yang dilambangkan dengan warna sama ada jelas daripada kandungan itu sendiri (cth teks yang boleh dilihat), atau disertakan melalui cara alternatif, seperti teks tambahan yang tersembunyi dengan .visually-hidden
kelas.
Warna pautan
Gunakan .alert-link
kelas utiliti untuk menyediakan pautan berwarna padan dengan cepat dalam sebarang makluman.
<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>
Kandungan tambahan
Makluman juga boleh mengandungi elemen HTML tambahan seperti tajuk, perenggan dan pembahagi.
Bagus!
Aww ya, anda berjaya membaca mesej amaran penting ini. Teks contoh ini akan berjalan sedikit lebih lama supaya anda dapat melihat cara jarak dalam makluman berfungsi dengan kandungan jenis ini.
Pada bila-bila masa anda perlu, pastikan anda menggunakan utiliti margin untuk memastikan perkara itu cantik dan kemas.
<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
Begitu juga, anda boleh menggunakan utiliti flexbox dan Ikon Bootstrap untuk membuat makluman dengan ikon. Bergantung pada ikon dan kandungan anda, anda mungkin ingin menambah lebih banyak utiliti atau gaya tersuai.
<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>
Perlukan lebih daripada satu ikon untuk makluman anda? Pertimbangkan untuk menggunakan lebih banyak Ikon Bootstrap dan membuat sprite SVG tempatan seperti itu untuk dengan mudah merujuk 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>
Mengetepikan
Menggunakan pemalam JavaScript amaran, adalah mungkin untuk mengetepikan sebarang makluman dalam talian. Ini caranya:
- Pastikan anda telah memuatkan pemalam amaran, atau JavaScript Bootstrap yang disusun.
- Tambahkan butang tutup dan
.alert-dismissible
kelas, yang menambah padding tambahan di sebelah kanan amaran dan meletakkan butang tutup. - Pada butang tutup, tambahkan
data-bs-dismiss="alert"
atribut, yang mencetuskan kefungsian JavaScript. Pastikan anda menggunakan<button>
elemen dengannya untuk tingkah laku yang betul merentas semua peranti. - Untuk menghidupkan makluman apabila menolaknya, pastikan anda menambah kelas
.fade
dan.show
.
Anda boleh melihat tindakan ini 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 tersebut dan secara atur cara menetapkan
focus()
lokasi yang paling sesuai dalam halaman. Jika anda merancang untuk mengalihkan fokus kepada elemen bukan interaktif yang biasanya tidak menerima fokus, pastikan anda menambah
tabindex="-1"
pada elemen tersebut.
Sass
Pembolehubah
$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 suai kontekstual untuk makluman kami.
@mixin alert-variant($background, $border, $color) {
color: $color;
@include gradient-bg($background);
border-color: $border;
.alert-link {
color: shade-color($color, 20%);
}
}
gelung
Gelung yang menjana kelas pengubah suai 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);
}
}
Tingkah laku JavaScript
Pencetus
Dayakan penolakan makluman melalui JavaScript:
var alertList = document.querySelectorAll('.alert')
alertList.forEach(function (alert) {
new bootstrap.Alert(alert)
})
Atau dengan data
atribut pada butang dalam amaran , seperti yang ditunjukkan di atas:
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
Ambil perhatian bahawa menutup makluman akan mengalih keluarnya daripada DOM.
Kaedah
Anda boleh membuat contoh amaran dengan pembina amaran, sebagai contoh:
var myAlert = document.getElementById('myAlert')
var bsAlert = new bootstrap.Alert(myAlert)
Ini menjadikan amaran mendengar peristiwa klik pada unsur keturunan yang mempunyai data-bs-dismiss="alert"
atribut. (Tidak perlu apabila menggunakan auto-inisialisasi data-api.)
Kaedah | Penerangan |
---|---|
close |
Menutup makluman dengan mengalih keluarnya daripada DOM. Jika kelas .fade dan .show hadir pada elemen, amaran akan pudar sebelum ia dialih keluar. |
dispose |
Memusnahkan amaran unsur. (Mengalih keluar data yang disimpan pada elemen DOM) |
getInstance |
Kaedah statik yang membolehkan anda mendapatkan contoh amaran yang dikaitkan dengan elemen DOM, anda boleh menggunakannya seperti ini:bootstrap.Alert.getInstance(alert) |
getOrCreateInstance |
Kaedah statik yang mengembalikan tika amaran yang dikaitkan dengan elemen DOM atau mencipta yang baharu sekiranya ia tidak dimulakan. Anda boleh menggunakannya seperti ini:bootstrap.Alert.getOrCreateInstance(element) |
var alertNode = document.querySelector('.alert')
var alert = bootstrap.Alert.getInstance(alertNode)
alert.close()
Peristiwa
Pemalam amaran Bootstrap mendedahkan beberapa peristiwa untuk menyambung ke fungsi amaran.
Peristiwa | Penerangan |
---|---|
close.bs.alert |
Menyala serta-merta apabila close kaedah contoh dipanggil. |
closed.bs.alert |
Dicetuskan apabila amaran telah ditutup dan peralihan 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()
})