Lumpat menyang isi utama Lumpat menyang pandhu arah docs
Check
in English

Tandha

Nyedhiyani pesen umpan balik kontekstual kanggo tumindak pangguna sing khas kanthi sawetara pesen tandha sing kasedhiya lan fleksibel.

Ing kaca iki

Tuladha

Tandha kasedhiya kanggo teks apa wae, uga tombol tutup opsional. Kanggo gaya sing tepat, gunakake salah siji saka wolung kelas kontekstual sing dibutuhake.alert-success (contone, ). Kanggo ngilangi inline, gunakake tandha plugin JavaScript .

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>
Nuduhake makna kanggo teknologi assistive

Nggunakake warna kanggo nambah makna mung menehi indikasi visual, sing ora bakal dikirim menyang pangguna teknologi bantu - kayata pembaca layar. Priksa manawa informasi sing dituduhake kanthi warna katon jelas saka isi kasebut (umpamane teks sing katon), utawa kalebu liwat cara alternatif, kayata teks tambahan sing didhelikake karo .visually-hiddenkelas.

Tuladha urip

Klik tombol ing ngisor iki kanggo nuduhake tandha (didhelikake karo gaya inline kanggo miwiti), banjur ngilangi (lan numpes) karo tombol cedhak dibangun ing.

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

Kita nggunakake JavaScript ing ngisor iki kanggo micu demo tandha langsung:

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

Gunakake .alert-linkkelas sarana kanggo nyedhiyakake link warna sing cocog kanthi cepet ing tandha apa wae.

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>

Isi tambahan

Tandha uga bisa ngemot unsur HTML tambahan kaya judhul, paragraf lan pemisah.

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>

lambang

Kajaba iku, sampeyan bisa nggunakake utilitas flexbox lan Ikon Bootstrap kanggo nggawe tandha kanthi lambang. Gumantung ing lambang lan isi, sampeyan bisa uga pengin nambah liyane keperluan utawa gaya adat.

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>

Perlu luwih saka siji lambang kanggo tandha? Coba gunakake luwih akeh Ikon Bootstrap lan nggawe sprite SVG lokal supaya gampang ngrujuk lambang sing padha bola-bali.

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>

Ngilangi

Nggunakake plugin JavaScript tandha, sampeyan bisa ngilangi inline tandha. Mangkene carane:

  • Priksa manawa sampeyan wis mbukak plugin tandha, utawa kompilasi Bootstrap JavaScript.
  • Tambah tombol cedhak lan .alert-dismissiblekelas, kang nambah padding ekstra ing sisih tengen tandha lan posisi tombol cedhak.
  • Ing tombol cedhak, tambahake data-bs-dismiss="alert"atribut, sing nyebabake fungsi JavaScript. Priksa manawa sampeyan nggunakake <button>unsur kasebut kanggo tumindak sing bener ing kabeh piranti.
  • Kanggo animate tandha nalika ngilangi, manawa kanggo nambah .fadelan .showkelas.

Sampeyan bisa ndeleng iki ing tumindak kanthi 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>
Nalika tandha dibubarake, unsur kasebut dibusak saka struktur kaca. Yen pangguna keyboard nolak tandha kanthi nggunakake tombol cedhak, fokus bakal tiba-tiba ilang lan, gumantung saka browser, ngreset menyang wiwitan kaca/dokumen. Mulane, disaranake kalebu JavaScript tambahan sing ngrungokake closed.bs.alertacara kasebut lan kanthi program nyetel focus()lokasi sing paling cocok ing kaca kasebut. Yen sampeyan arep mindhah fokus menyang unsur non-interaktif sing biasane ora nampa fokus, priksa manawa kanggo nambah tabindex="-1"menyang unsur.

CSS

Variabel

Ditambahake ing v5.2.0

Minangka bagéan saka pendekatan variabel CSS Bootstrap sing berkembang, tandha saiki nggunakake variabel CSS lokal .alertkanggo kustomisasi wektu nyata sing ditingkatake. Nilai kanggo variabel CSS disetel liwat Sass, supaya kustomisasi Sass isih didhukung.

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

Variabel 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 campur

Digunakake ing kombinasi karo $theme-colorskanggo nggawe kelas modifier kontekstual kanggo tandha kita.

@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 loop

Loop sing ngasilake kelas modifier karo 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);
  }
}

Prilaku JavaScript

Initialize

Miwiti unsur minangka tandha

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

Kanggo mung ngilangi tandha, ora perlu miwiti komponen kanthi manual liwat API JS. Kanthi nggunakake data-bs-dismiss="alert", komponen kasebut bakal diwiwiti kanthi otomatis lan dibuwang kanthi bener.

Waca bagean pemicu kanggo rincian liyane.

Pemicu

Pembubaran bisa digayuh kanthi dataatribut ing tombol ing tandha kaya sing dituduhake ing ngisor iki:

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

utawa ing tombol ing njaba tandha nggunakake data-bs-targetkaya sing dituduhake ing ngisor iki:

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

Elinga yen nutup tandha bakal nyopot saka DOM.

Metode

Sampeyan bisa nggawe conto tandha karo konstruktor tandha, contone:

const bsAlert = new bootstrap.Alert('#myAlert')

Iki nggawe tandha ngrungokake acara klik ing unsur turunan sing duwe data-bs-dismiss="alert"atribut. (Ora perlu nalika nggunakake inisialisasi otomatis data-api.)

Metode Katrangan
close Nutup tandha kanthi nyopot saka DOM. Yen kelas .fadelan .showana ing unsur kasebut, tandha bakal ilang sadurunge dibusak.
dispose Numpes tandha unsur. (Mbusak data sing disimpen ing unsur DOM)
getInstance Cara statis sing ngidini sampeyan entuk conto tandha sing ana gandhengane karo unsur DOM. Contone: bootstrap.Alert.getInstance(alert).
getOrCreateInstance Cara statis sing ngasilake conto tandha sing digandhengake karo unsur DOM utawa nggawe sing anyar yen ora diwiwiti. Sampeyan bisa nggunakake kaya iki: bootstrap.Alert.getOrCreateInstance(element).

Panggunaan dhasar:

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

Acara

Plugin tandha Bootstrap nyedhiyakake sawetara acara kanggo nyambungake fungsi tandha.

Acara Katrangan
close.bs.alert Langsung murub nalika closemetode conto diarani.
closed.bs.alert Dipecat nalika tandha wis ditutup lan transisi CSS wis rampung. 
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()
})