Langkau ke kandungan utama Langkau ke navigasi dokumen
Check
in English

Makluman

Sediakan mesej maklum balas kontekstual untuk tindakan pengguna biasa dengan segelintir mesej makluman yang tersedia dan fleksibel.

Pada halaman ini

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 .

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

Contoh langsung

Klik butang di bawah untuk menunjukkan makluman (disembunyikan dengan gaya sebaris untuk bermula), kemudian tolak (dan musnahkan) dengan butang tutup terbina dalam.

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

Kami menggunakan JavaScript berikut untuk mencetuskan demo makluman langsung kami:

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

Gunakan .alert-linkkelas utiliti untuk menyediakan pautan berwarna padan dengan cepat dalam sebarang makluman.

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>

Kandungan tambahan

Makluman juga boleh mengandungi elemen HTML tambahan seperti tajuk, perenggan dan pembahagi.

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>

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.

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>

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.

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>

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-dismissiblekelas, 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 .fadedan .show.

Anda boleh melihat tindakan ini dengan demo langsung:

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>
Apabila makluman diketepikan, elemen itu dialih keluar sepenuhnya daripada struktur halaman. Jika pengguna papan kekunci menolak amaran menggunakan butang tutup, tumpuan mereka akan tiba-tiba hilang dan, bergantung pada penyemak imbas, ditetapkan semula ke permulaan halaman/dokumen. Atas sebab ini, kami mengesyorkan agar anda memasukkan JavaScript tambahan yang mendengar closed.bs.alertacara 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.

CSS

Pembolehubah

Ditambah dalam v5.2.0

Sebagai sebahagian daripada pendekatan pembolehubah CSS Bootstrap yang sedang berkembang, makluman kini menggunakan pembolehubah CSS tempatan dihidupkan .alertuntuk penyesuaian masa nyata yang dipertingkatkan. Nilai untuk pembolehubah CSS ditetapkan melalui Sass, jadi penyesuaian Sass masih disokong juga.

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

Pembolehubah Sass

$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

Sass mixin

Digunakan dalam kombinasi dengan $theme-colorsuntuk membuat kelas pengubah suai kontekstual untuk makluman kami.

@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%);
  }
}

Gelung Sass

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

Mulakan

Mulakan elemen sebagai makluman

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

Untuk tujuan tunggal mengetepikan makluman, tidak perlu untuk memulakan komponen secara manual melalui API JS. Dengan menggunakan data-bs-dismiss="alert", komponen akan dimulakan secara automatik dan diketepikan dengan betul.

Lihat bahagian pencetus untuk mendapatkan butiran lanjut.

Pencetus

Pemecatan boleh dicapai dengan dataatribut pada butang dalam amaran seperti yang ditunjukkan di bawah:

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

atau pada butang di luar amaran menggunakan data-bs-targetseperti yang ditunjukkan di bawah:

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

const 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 .fadedan .showhadir 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. Contohnya: 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).

Penggunaan asas:

const alert = bootstrap.Alert.getOrCreateInstance('#myAlert')
alert.close()

Peristiwa

Pemalam amaran Bootstrap mendedahkan beberapa peristiwa untuk menyambung ke fungsi amaran.

Peristiwa Penerangan
close.bs.alert Menyala serta-merta apabila closekaedah contoh dipanggil.
closed.bs.alert Dicetuskan apabila amaran telah ditutup dan peralihan CSS telah selesai. 
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()
})