Siaga
Nyadiakeun pesen eupan balik kontekstual pikeun lampah pamaké has kalawan sakeupeul pesen waspada sadia tur fléksibel.
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 .
<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-hidden
kelas.
Warna link
Anggo .alert-link
kelas utiliti pikeun gancang nyayogikeun tautan warna anu cocog dina ngageter naon waé.
<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.
Saé!
Aww hehehehe, anjeun hasil maca pesen waspada penting ieu. Conto téks ieu bakal ngajalankeun sakedik deui supados anjeun tiasa ningali kumaha jarak dina waspada tiasa dianggo sareng eusi sapertos kieu.
Iraha waé anjeun peryogi, pastikeun ngagunakeun utilitas margin pikeun ngajaga hal-hal anu saé sareng rapih.
<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.
<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>
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.
<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>
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-dismissible
kelas, 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
.fade
sareng.show
.
Anjeun tiasa ningali ieu dina aksi sareng 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 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.
Sass
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
Dipaké dina kombinasi jeung $theme-colors
nyieun kelas modifier kontekstual pikeun ngabejaan urang.
@mixin alert-variant($background, $border, $color) {
color: $color;
@include gradient-bg($background);
border-color: $border;
.alert-link {
color: shade-color($color, 20%);
}
}
Gelung
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
Pemicu
Aktipkeun pamecatan hiji ngageter via JavaScript:
var alertList = document.querySelectorAll('.alert')
alertList.forEach(function (alert) {
new bootstrap.Alert(alert)
})
Atanapi sareng data
atribut dina tombol dina waspada , sapertos anu dipidangkeun di luhur:
<button type="button" class="btn-close" data-bs-dismiss="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:
var myAlert = document.getElementById('myAlert')
var 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 .fade sareng .show aya 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, anjeun tiasa nganggo sapertos kieu: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) |
var alertNode = document.querySelector('.alert')
var alert = bootstrap.Alert.getInstance(alertNode)
alert.close()
Kajadian
Plugin ngageter Bootstrap ngungkabkeun sababaraha acara pikeun ngahubungkeun kana fungsionalitas waspada.
Acara | Katerangan |
---|---|
close.bs.alert |
Kahuruan geuwat nalika close metoda conto disebut. |
closed.bs.alert |
Dipecat nalika ngageter geus ditutup sarta transisi CSS geus réngsé. |
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()
})