Rekọja si akoonu akọkọ Rekọja si lilọ kiri awọn docs
Check
in English

Awọn itaniji

Pese awọn ifiranṣẹ esi asọye fun awọn iṣe olumulo aṣoju pẹlu iwonba ti o wa ati awọn ifiranṣẹ itaniji rọ.

Lori iwe yi

Awọn apẹẹrẹ

Awọn itaniji wa fun eyikeyi ipari ọrọ, bakanna bi bọtini isunmọ iyan. Fun iselona to dara, lo ọkan ninu awọn kilasi ọrọ-ọrọ ti o nilo mẹjọ (fun apẹẹrẹ, .alert-success). Fun itusilẹ laini, lo awọn itaniji JavaScript itanna .

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>
Gbigbe itumo si awọn imọ-ẹrọ iranlọwọ

Lilo awọ lati ṣafikun itumọ nikan n pese itọkasi wiwo, eyiti kii yoo gbe lọ si awọn olumulo ti awọn imọ-ẹrọ iranlọwọ - gẹgẹbi awọn oluka iboju. Rii daju pe alaye ti o tọka si nipasẹ awọ jẹ eyiti o han gbangba lati inu akoonu funrararẹ (fun apẹẹrẹ ọrọ ti o han), tabi pẹlu pẹlu awọn ọna omiiran, gẹgẹbi afikun ọrọ ti o farapamọ pẹlu .visually-hiddenkilasi naa.

Apeere ifiwe

Tẹ bọtini ti o wa ni isalẹ lati ṣafihan itaniji kan (ti o farapamọ pẹlu awọn aza laini lati bẹrẹ), lẹhinna yọ kuro (ki o run) pẹlu bọtini isunmọ ti a ṣe sinu.

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

A lo JavaScript atẹle lati ṣe okunfa demo gbigbọn laaye wa:

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

Lo .alert-linkkilasi IwUlO lati pese ni kiakia awọn ọna asopọ awọ ti o baamu laarin eyikeyi titaniji.

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>

Afikun akoonu

Awọn titaniji le tun ni awọn eroja HTML afikun ninu bi awọn akọle, awọn ìpínrọ ati awọn ipin.

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>

Awọn aami

Bakanna, o le lo awọn ohun elo flexbox ati Awọn aami Bootstrap lati ṣẹda awọn itaniji pẹlu awọn aami. Da lori awọn aami ati akoonu rẹ, o le fẹ lati ṣafikun awọn ohun elo diẹ sii tabi awọn aṣa aṣa.

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>

Nilo ju aami kan lọ fun awọn titaniji rẹ? Gbiyanju lati lo Awọn aami Bootstrap diẹ sii ati ṣiṣe sprite SVG agbegbe kan bii bẹ lati ṣe itọkasi awọn aami kanna leralera.

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>

Yiyọ kuro

Lilo ohun itanna JavaScript titaniji, o ṣee ṣe lati yọkuro eyikeyi laini titaniji. Eyi ni bii:

  • Rii daju pe o ti kojọpọ ohun itanna itaniji, tabi Bootstrap JavaScript ti o ṣajọ.
  • Ṣafikun bọtini isunmọ ati .alert-dismissiblekilasi, eyiti o ṣafikun fifẹ afikun si apa ọtun ti itaniji ati gbe bọtini isunmọ.
  • Lori bọtini isunmọ, ṣafikun abuda naa data-bs-dismiss="alert", eyiti o nfa iṣẹ ṣiṣe JavaScript. Rii daju lati lo <button>eroja pẹlu rẹ fun ihuwasi to dara lori gbogbo awọn ẹrọ.
  • Lati mu awọn itaniji ṣiṣẹ nigbati o ba yọ wọn kuro, rii daju lati ṣafikun awọn .fadeati .showawọn kilasi.

O le rii eyi ni iṣe pẹlu demo ifiwe kan:

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>
Nigbati a ba yọ itaniji kuro, a yọkuro eroja patapata lati ọna oju-iwe naa. Ti olumulo keyboard ba yọ itaniji naa kuro nipa lilo bọtini isunmọ, idojukọ wọn yoo sọnu lojiji ati, da lori ẹrọ aṣawakiri, tun bẹrẹ si ibẹrẹ oju-iwe/iwe. Fun idi eyi, a ṣeduro pẹlu afikun JavaScript ti o tẹtisi closed.bs.alertiṣẹlẹ naa ati ṣeto eto focus()si ipo ti o yẹ julọ ni oju-iwe naa. Ti o ba n gbero lati gbe idojukọ si nkan ti kii ṣe ibaraenisepo ti ko gba idojukọ deede, rii daju pe o ṣafikun tabindex="-1"si ipin naa.

CSS

Awọn oniyipada

Fi kun v5.2.0

Gẹ́gẹ́ bí ara Bootstrap’s títúnṣe àwọn àyípadà CSS, àwọn ìkìlọ̀ nísinsìnyí lo àwọn oníyipada CSS ti agbegbe .alertfún ìmúgbòòrò isọdi-akoko gidi. Awọn iye fun awọn oniyipada CSS ti ṣeto nipasẹ Sass, nitorinaa isọdi Sass tun ni atilẹyin, paapaa.

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

Sass oniyipada

$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 mix

Ti a lo ni apapo pẹlu $theme-colorslati ṣẹda awọn kilasi modifier ọrọ-ọrọ fun awọn titaniji wa.

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

Loop ti o ṣe agbekalẹ awọn kilasi modifier pẹlu 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);
  }
}

JavaScript ihuwasi

Bibẹrẹ

Bibẹrẹ awọn eroja bi awọn titaniji

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

Fun idi kanṣoṣo ti yiyọkuro itaniji, ko ṣe pataki lati pilẹ paati pẹlu ọwọ nipasẹ JS API. Nipa lilo data-bs-dismiss="alert", paati yoo wa ni ipilẹṣẹ laifọwọyi ati yọkuro daradara.

Wo apakan awọn okunfa fun alaye diẹ sii.

Awọn okunfa

Iyọkuro le ṣee ṣe pẹlu dataabuda lori bọtini kan laarin titaniji bi a ti ṣe afihan ni isalẹ:

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

tabi lori bọtini ita titaniji nipa lilo eyi ti data-bs-targeta ṣe afihan ni isalẹ:

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

Ṣe akiyesi pe pipadii itaniji yoo yọ kuro lati DOM.

Awọn ọna

O le ṣẹda apẹẹrẹ gbigbọn pẹlu olutumọ titaniji, fun apẹẹrẹ:

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

Eyi jẹ ki o gbọ titaniji fun awọn iṣẹlẹ tẹ lori awọn eroja ti o ni data-bs-dismiss="alert"ẹda. (Ko ṣe pataki nigba lilo ipilẹṣẹ-afọwọṣe data-api.)

Ọna Apejuwe
close Tititaniji pa nipa yiyọ kuro lati DOM. Ti awọn kilasi .fadeati .showawọn kilasi ba wa lori eroja, itaniji yoo parẹ ṣaaju ki o to yọkuro.
dispose Pa ohun ano ká gbigbọn. (Yọ data ti o fipamọ sori nkan DOM kuro)
getInstance Ọna aimi eyiti o fun ọ laaye lati gba apẹẹrẹ gbigbọn ti o ni nkan ṣe pẹlu nkan DOM kan. Fun apẹẹrẹ bootstrap.Alert.getInstance(alert):.
getOrCreateInstance Ọna aimi eyiti o da apẹẹrẹ itaniji pada si nkan DOM kan tabi ṣẹda ọkan tuntun ti ko ba ṣe ipilẹṣẹ. O le lo bi eleyi bootstrap.Alert.getOrCreateInstance(element):.

Lilo ipilẹ:

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

Awọn iṣẹlẹ

Ohun itanna gbigbọn Bootstrap ṣafihan awọn iṣẹlẹ diẹ fun sisọ sinu iṣẹ ṣiṣe titaniji.

Iṣẹlẹ Apejuwe
close.bs.alert Ina lẹsẹkẹsẹ nigbati closea pe ọna apẹẹrẹ.
closed.bs.alert Ti ṣiṣẹ nigbati itaniji ti wa ni pipade ati awọn iyipada CSS ti pari. 
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()
})