Ana içeriğe geç Dokümanlar navigasyonuna atla
Check
in English

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.

Bu sayfada

Ö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 .

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>
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-hiddensınıfla gizlenmiş ek metin gibi alternatif yollarla dahil edildiğinden emin olun.

Canlı örnek

Bir uyarı göstermek için aşağıdaki düğmeyi tıklayın (başlamak için satır içi stiller ile gizlenir), ardından yerleşik kapat düğmesiyle uyarıyı kapatın (ve yok edin).

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

Canlı uyarı demomuzu tetiklemek için aşağıdaki JavaScript'i kullanıyoruz:

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')
  })
}

.alert-linkHerhangi 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 .

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>

Ek içerik

Uyarılar ayrıca başlıklar, paragraflar ve ayırıcılar gibi ek HTML öğeleri içerebilir.

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>

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.

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>

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.

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>

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 .fadeve .showsınıflarını eklediğinizden emin olun.

Bunu canlı bir demo ile çalışırken görebilirsiniz:

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>
Bir uyarı kapatıldığında, öğe sayfa yapısından tamamen kaldırılır. Bir klavye kullanıcısı kapat düğmesini kullanarak uyarıyı kapatırsa, odağı aniden kaybolur ve tarayıcıya bağlı olarak sayfanın/belgenin başına sıfırlanır. closed.bs.alertBu 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.

CSS

Değişkenler

v5.2.0'da eklendi

Bootstrap'in gelişen CSS değişkenleri yaklaşımının bir parçası olarak, uyarılar artık .alertgelişmiş gerçek zamanlı özelleştirme için yerel CSS değişkenlerini kullanıyor. CSS değişkenlerinin değerleri Sass aracılığıyla ayarlanır, bu nedenle Sass özelleştirmesi de desteklenmeye devam eder.

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

Sas değişkenleri

$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

küstah karıştırma

$theme-colorsUyarı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) {
  --#{$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 döngüsü

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ışı

başlat

Öğeleri uyarı olarak başlat

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

Yalnızca bir uyarıyı reddetmek amacıyla, bileşeni JS API aracılığıyla manuel olarak başlatmak gerekli değildir. kullanılarak data-bs-dismiss="alert", bileşen otomatik olarak başlatılacak ve uygun şekilde reddedilecektir.

Daha fazla ayrıntı için tetikleyiciler bölümüne bakın.

tetikleyiciler

Görevden alma, aşağıda gösterildiği gibi uyarı içindekidata bir düğmedeki öznitelikle gerçekleştirilebilir :

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

veya aşağıda gösterildiği gibi uyarının dışındaki bir düğmede data-bs-target:

<button type="button" class="btn-close" data-bs-dismiss="alert" data-bs-target="#my-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:

const 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, .showuyarı 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. Örneğin: 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).

Temel kullanım:

const alert = bootstrap.Alert.getOrCreateInstance('#myAlert')
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. 
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()
})