Негізгі мазмұнға өту Құжаттар шарлауына өту
in English

Ескертулер

Қол жетімді және икемді ескерту хабарларымен әдеттегі пайдаланушы әрекеттері үшін мәтінмәндік кері байланыс хабарларын қамтамасыз етіңіз.

Бұл бетте

Мысалдар

Ескертулер мәтіннің кез келген ұзындығы үшін қол жетімді, сонымен қатар қосымша жабу түймесі. Дұрыс стильдеу үшін қажетті сегіз контекстік сыныптың бірін пайдаланыңыз ( мысалы, .alert-success). Кірістірілген өшіру үшін ескертулер JavaScript плагинін пайдаланыңыз .

<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>
Көмекші технологияларға мән беру

Түсті мағына қосу үшін пайдалану тек көрнекі нұсқауды қамтамасыз етеді, ол экраннан оқу құралдары сияқты көмекші технологияларды пайдаланушыларға берілмейді. Түспен белгіленген ақпарат мазмұнның өзінен анық (мысалы, көрінетін мәтін) немесе .visually-hiddenсыныппен жасырылған қосымша мәтін сияқты балама құралдар арқылы енгізілгеніне көз жеткізіңіз.

.alert-linkКез келген ескертуде сәйкес түсті сілтемелерді жылдам қамтамасыз ету үшін қызметтік сыныпты пайдаланыңыз .

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

Қосымша мазмұн

Ескертулерде тақырыптар, абзацтар және бөлгіштер сияқты қосымша 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>

Белгішелер

Сол сияқты белгішелермен ескертулер жасау үшін flexbox утилиталарын және Bootstrap белгішелерін пайдалануға болады. Белгішелер мен мазмұнға байланысты қосымша утилиталарды немесе реттелетін мәнерлерді қосқыңыз келуі мүмкін.

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

Ескертулер үшін бірнеше белгіше қажет пе? Көбірек Bootstrap белгішелерін пайдалануды және сол белгішелерге қайта-қайта оңай сілтеме жасау үшін жергілікті SVG спрайт жасауды қарастырыңыз.

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

Қабылданбау

Ескерту JavaScript плагинін пайдаланып, кез келген ескертуді кірістірілген түрде өшіруге болады. Мынадай:

  • Ескерту плагинін немесе құрастырылған Bootstrap JavaScript файлын жүктегеніңізге көз жеткізіңіз.
  • Ескертудің оң жағына қосымша толтырғыш қосатын және жабу түймешігін орналастыратын жабу түймешігін және сыныпты қосыңыз ..alert-dismissible
  • Жабу түймесінде data-bs-dismiss="alert"JavaScript функциясын іске қосатын төлсипатты қосыңыз. <button>Барлық құрылғыларда дұрыс әрекет ету үшін онымен бірге элементті пайдалануды ұмытпаңыз .
  • .fadeЕскертулерді өшіру кезінде оларды жандандыру үшін және .showсыныптарын қосуды ұмытпаңыз .

Сіз мұны тікелей демонстрация арқылы әрекетте көре аласыз:

<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>
Ескерту қабылданбаған кезде, элемент бет құрылымынан толығымен жойылады. Егер пернетақта пайдаланушысы жабу түймесін пайдаланып ескертуді қабылдамаса, олардың фокусы кенеттен жоғалады және шолғышқа байланысты беттің/құжаттың басына қалпына келтіріледі. Осы себепті closed.bs.alertоқиғаны тыңдайтын және focus()беттегі ең қолайлы орынға бағдарламалы түрде орнататын қосымша JavaScript қосуды ұсынамыз. Фокусты әдетте фокусты қабылдамайтын интерактивті емес элементке жылжытуды жоспарласаңыз, tabindex="-1"элементке қосуды ұмытпаңыз.

Сасс

Айнымалылар

$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

Вариант қоспасы

$theme-colorsЕскертулеріміз үшін мәтінмәндік модификатор сыныптарын жасау үшін бірге пайдаланылады .

@mixin alert-variant($background, $border, $color) {
  color: $color;
  @include gradient-bg($background);
  border-color: $border;

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

Цикл

Миксинмен модификатор кластарын жасайтын цикл 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 әрекеті

Триггерлер

JavaScript арқылы ескертуді өшіруді қосыңыз:

var alertList = document.querySelectorAll('.alert')
alertList.forEach(function (alert) {
  new bootstrap.Alert(alert)
})

Немесе жоғарыда көрсетілгендей ескерту ішіндегі түймедегіdata атрибуттармен :

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

Ескертуді жабу оны DOM жүйесінен алып тастайтынын ескеріңіз.

Әдістері

Ескерту конструкторымен ескерту данасын жасауға болады, мысалы:

var myAlert = document.getElementById('myAlert')
var bsAlert = new bootstrap.Alert(myAlert)

data-bs-dismiss="alert"Бұл төлсипатқа ие ұрпақ элементтерін басу оқиғалары үшін ескертуді тыңдайды . (Data-api автоматты түрде инициализациясын пайдаланған кезде қажет емес.)

Әдіс Сипаттама
close Ескертуді DOM ішінен жою арқылы жабады. Элементте .fadeжәне .showсыныптары болса, ескерту жойылмас бұрын өшеді.
dispose Элементтің ескертуін бұзады. (DOM элементінде сақталған деректерді жояды)
getInstance DOM элементімен байланысты ескерту данасын алуға мүмкіндік беретін статикалық әдіс, оны келесідей пайдалануға болады:bootstrap.Alert.getInstance(alert)
getOrCreateInstance DOM элементімен байланыстырылған ескерту данасын қайтаратын немесе ол инициализацияланбаған жағдайда жаңасын жасайтын статикалық әдіс. Сіз оны келесідей пайдалана аласыз:bootstrap.Alert.getOrCreateInstance(element) 
var alertNode = document.querySelector('.alert')
var alert = bootstrap.Alert.getInstance(alertNode)
alert.close()

Оқиғалар

Bootstrap ескерту плагині ескерту функциясына қосылу үшін бірнеше оқиғаларды көрсетеді.

Оқиға Сипаттама
close.bs.alert closeДана әдісі шақырылған кезде бірден іске қосылады.
closed.bs.alert Ескерту жабылғанда және CSS ауысулары аяқталғанда іске қосылды. 
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()
})