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

Ескертулер

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

Бұл бетте

Мысалдар

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

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

Тірі мысал

Ескертуді көрсету үшін төмендегі түймені басыңыз (бастау үшін кірістірілген мәнерлермен жасырылған), содан кейін кірістірілген жабу түймешігі арқылы оны өшіріңіз (және жойыңыз).

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

Тікелей ескерту демонстрациясын іске қосу үшін келесі JavaScript қолданамыз:

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

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

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>

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

Ескертулерде тақырыптар, абзацтар және бөлгіштер сияқты қосымша HTML элементтері де болуы мүмкін.

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 белгішелерін пайдалануға болады. Белгішелер мен мазмұнға байланысты қосымша утилиталарды немесе реттелетін мәнерлерді қосқыңыз келуі мүмкін.

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>

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

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>

Қабылданбау

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

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

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

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

CSS

Айнымалылар

v5.2.0 нұсқасына қосылды

.alertBootstrap-тың дамып келе жатқан CSS айнымалы мәндерінің бір бөлігі ретінде ескертулер енді нақты уақытта жақсартылған теңшеу үшін жергілікті CSS айнымалыларын пайдаланады . CSS айнымалыларының мәндері Sass арқылы орнатылады, сондықтан Sass теңшеуіне әлі де қолдау көрсетіледі.

  --#{$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 айнымалылары

$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) {
  --#{$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 циклі

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

Инициализация

Элементтерді ескертулер ретінде инициализациялаңыз

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

Ескертуді қабылдамаудың жалғыз мақсаты үшін компонентті JS API арқылы қолмен инициализациялау қажет емес. пайдалану арқылы data-bs-dismiss="alert"құрамдас автоматты түрде инициализацияланады және дұрыс шығарылады.

Қосымша мәліметтер алу үшін триггерлер бөлімін қараңыз.

Триггерлер

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

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

немесе ескерту сыртындағыdata-bs-target түймені төменде көрсетілгендей пайдаланыңыз :

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

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

Әдістері

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

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

Негізгі қолдану:

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

Оқиғалар

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

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