Rekọja si akoonu akọkọ Rekọja si lilọ kiri awọn docs
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 .

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

<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:

var alertPlaceholder = document.getElementById('liveAlertPlaceholder')
var alertTrigger = document.getElementById('liveAlertBtn')

function alert(message, type) {
  var wrapper = document.createElement('div')
  wrapper.innerHTML = '<div class="alert alert-' + type + ' alert-dismissible" role="alert">' + message + '<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button></div>'

  alertPlaceholder.append(wrapper)
}

if (alertTrigger) {
  alertTrigger.addEventListener('click', function () {
    alert('Nice, you triggered this alert message!', 'success')
  })
}

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

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

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

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

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.

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

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 naa, eyiti o ṣafikun fifẹ afikun si apa ọtun ti itaniji ati ipo 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:

<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 itaniji ba ti yọkuro, a ti yọkuro eroja patapata lati eto 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.

Sass

Awọn 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

Adapọ iyatọ

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) {
  color: $color;
  @include gradient-bg($background);
  border-color: $border;

  .alert-link {
    color: shade-color($color, 20%);
  }
}

Loop

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

var alertList = document.querySelectorAll('.alert')
var alerts =  [].slice.call(alertList).map(function (element) {
  return 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 pipade itaniji yoo yọ kuro lati DOM.

Awọn ọna

Ọ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, o le lo bii eyi:bootstrap.Alert.getInstance(alert)
getOrCreateInstance Ọna aimi eyiti o da apẹẹrẹ itaniji pada si nkan DOM kan tabi ṣẹda ọkan tuntun ni ọran ti ko ṣe ipilẹṣẹ. O le lo bi eleyi:bootstrap.Alert.getOrCreateInstance(element) 
var alertNode = document.querySelector('.alert')
var alert = bootstrap.Alert.getInstance(alertNode)
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. 
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()
})