ئاساسلىق مەزمۇنغا ئاتلاڭ Docs يول باشلاش
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 گە قوشۇلدى

Bootstrap نىڭ تەرەققىي قىلىۋاتقان CSS ئۆزگەرگۈچى مىقدار ئۇسۇلىنىڭ بىر قىسمى سۈپىتىدە ، ئاگاھلاندۇرۇشلار يەرلىك CSS ئۆزگەرگۈچى مىقدارنى ئىشلىتىپ .alert، ھەقىقىي ۋاقىتتا خاسلاشتۇرۇشنى كۈچەيتىدۇ. 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

Sass mixin

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

ئارىلاشتۇرۇش ئارقىلىق ئۆزگەرتىش سىنىپى ھاسىل قىلىدىغان 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 ھەرىكىتى

Initialize

ئېلېمېنتلارنى ئاگاھلاندۇرۇش سۈپىتىدە قوزغىتىڭ

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

ئاگاھلاندۇرۇشنى بىكار قىلىشتىكى بىردىنبىر مەقسەت ئۈچۈن ، JS API ئارقىلىق زاپچاسنى قولدا قوزغىتىشنىڭ ھاجىتى يوق. ئىشلىتىش ئارقىلىق data-bs-dismiss="alert"، زاپچاس ئاپتوماتىك قوزغىتىلىدۇ ۋە مۇۋاپىق ئىشتىن بوشىتىلىدۇ.

تېخىمۇ كۆپ تەپسىلاتلارنى قوزغىتىش بۆلىكىنى كۆرۈڭ .

Triggers

تۆۋەندە كۆرسىتىلگەندەك ئاگاھلاندۇرۇش ئىچىدىكى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 دىن ئۆچۈرۈۋېتىدۇ.

Methods

سىز ئاگاھلاندۇرۇش ياسىغۇچى بىلەن ئاگاھلاندۇرۇش ئۈلگىسى قۇرالايسىز ، مەسىلەن:

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

Events

Bootstrap نىڭ ئاگاھلاندۇرۇش قىستۇرمىسى ئاگاھلاندۇرۇش ئىقتىدارىغا باغلانغان بىر قانچە ھادىسىنى ئاشكارىلىدى.

Event چۈشەندۈرۈش
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()
})