uyarılar
Bir avuç kullanılabilir ve esnek uyarı mesajıyla tipik kullanıcı eylemleri için bağlamsal geri bildirim mesajları sağlayın.
Örnekler
Herhangi bir metin uzunluğu için uyarılar ve isteğe bağlı bir kapatma düğmesi mevcuttur. Uygun stil için, gerekli sekiz bağlamsal sınıftan birini kullanın (örneğin, .alert-success
). Satır içi işten çıkarma için uyarılar JavaScript eklentisini kullanın .
<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>
Yardımcı teknolojilere anlam taşıma
Renkleri anlam eklemek için kullanmak yalnızca görsel bir gösterge sağlar ve ekran okuyucular gibi yardımcı teknolojilerin kullanıcılarına iletilmez. Renkle gösterilen bilgilerin ya içeriğin kendisinden (örn. görünen metin) açık olduğundan ya da .visually-hidden
sınıfla gizlenmiş ek metin gibi alternatif yollarla dahil edildiğinden emin olun.
Bağlantı rengi
.alert-link
Herhangi bir uyarı içinde hızlı bir şekilde eşleşen renkli bağlantılar sağlamak için yardımcı program sınıfını kullanın .
<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>
Ek içerik
Uyarılar ayrıca başlıklar, paragraflar ve ayırıcılar gibi ek HTML öğeleri içerebilir.
Aferin!
Aww evet, bu önemli uyarı mesajını başarıyla okudunuz. Bu örnek metin, bir uyarı içindeki aralığın bu tür içerikle nasıl çalıştığını görebilmeniz için biraz daha uzun sürecektir.
Ne zaman ihtiyacınız olursa, işleri güzel ve düzenli tutmak için kenar boşluğu yardımcı programlarını kullandığınızdan emin olun.
<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>
Simgeler
Benzer şekilde, simgelerle uyarılar oluşturmak için flexbox yardımcı programlarını ve Önyükleme Simgelerini kullanabilirsiniz. Simgelerinize ve içeriğinize bağlı olarak daha fazla yardımcı program veya özel stil eklemek isteyebilirsiniz.
<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>
Uyarılarınız için birden fazla simgeye mi ihtiyacınız var? Aynı simgelere tekrar tekrar başvurmak için daha fazla Önyükleme Simgesi kullanmayı ve bunun gibi yerel bir SVG hareketli grafiği oluşturmayı düşünün.
<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>
kapatılıyor
Uyarı JavaScript eklentisini kullanarak, satır içi herhangi bir uyarıyı kapatmak mümkündür. İşte nasıl:
- Uyarı eklentisini veya derlenmiş Bootstrap JavaScript'i yüklediğinizden emin olun.
- Uyarının sağına ekstra dolgu ekleyen ve kapat düğmesini konumlandıran bir kapat düğmesi ve sınıf ekleyin .
.alert-dismissible
- Kapat düğmesine
data-bs-dismiss="alert"
JavaScript işlevini tetikleyen özelliği ekleyin.<button>
Tüm cihazlarda uygun davranış için öğeyi onunla birlikte kullandığınızdan emin olun . - Uyarıları kapatırken canlandırmak için
.fade
ve.show
sınıflarını eklediğinizden emin olun.
Bunu canlı bir demo ile çalışırken görebilirsiniz:
<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
Bu nedenle, olayı dinleyen ve program
focus()
aracılığıyla sayfadaki en uygun konuma ayarlayan ek JavaScript eklemenizi öneririz
. Odağı, normalde odak almayan etkileşimli olmayan bir öğeye taşımayı planlıyorsanız,
tabindex="-1"
öğeye eklediğinizden emin olun.
küstah
Değişkenler
$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
Varyant karışımı
$theme-colors
Uyarılarımız için bağlamsal değiştirici sınıfları oluşturmak için ile birlikte kullanılır .
@mixin alert-variant($background, $border, $color) {
color: $color;
@include gradient-bg($background);
border-color: $border;
.alert-link {
color: shade-color($color, 20%);
}
}
Döngü
Mixin ile değiştirici sınıfları oluşturan döngü alert-variant()
.
// 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);
}
}
JavaScript davranışı
tetikleyiciler
JavaScript aracılığıyla bir uyarının kapatılmasını etkinleştir:
var alertList = document.querySelectorAll('.alert')
alertList.forEach(function (alert) {
new bootstrap.Alert(alert)
})
Veya yukarıda gösterildiği gibi , uyarı içindekidata
bir düğmedeki niteliklerle :
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
Bir uyarıyı kapatmanın onu DOM'dan kaldıracağını unutmayın.
yöntemler
Uyarı oluşturucuyla bir uyarı örneği oluşturabilirsiniz, örneğin:
var myAlert = document.getElementById('myAlert')
var bsAlert = new bootstrap.Alert(myAlert)
data-bs-dismiss="alert"
Bu, özniteliğe sahip olan alt öğelerdeki tıklama olaylarını dinleyen bir uyarı yapar . (Data-api'nin otomatik başlatmasını kullanırken gerekli değildir.)
Yöntem | Tanım |
---|---|
close |
DOM'den kaldırarak bir uyarıyı kapatır. .fade Öğede ve sınıfları varsa, .show uyarı kaldırılmadan önce kaybolur. |
dispose |
Bir öğenin uyarısını yok eder. (DOM öğesinde depolanan verileri kaldırır) |
getInstance |
Bir DOM öğesiyle ilişkili uyarı örneğini almanızı sağlayan statik yöntem, bunu şu şekilde kullanabilirsiniz:bootstrap.Alert.getInstance(alert) |
getOrCreateInstance |
Bir DOM öğesiyle ilişkili bir uyarı örneği döndüren veya başlatılmamış olması durumunda yeni bir tane oluşturan statik yöntem. Bunu şu şekilde kullanabilirsiniz:bootstrap.Alert.getOrCreateInstance(element) |
var alertNode = document.querySelector('.alert')
var alert = bootstrap.Alert.getInstance(alertNode)
alert.close()
Olaylar
Bootstrap'in uyarı eklentisi, uyarı işlevine bağlanmak için birkaç olayı ortaya çıkarır.
Etkinlik | Tanım |
---|---|
close.bs.alert |
close Örnek yöntemi çağrıldığında hemen tetiklenir . |
closed.bs.alert |
Uyarı kapatıldığında ve CSS geçişleri tamamlandığında tetiklenir. |
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()
})