გადადით მთავარ შინაარსზე დოკუმენტების ნავიგაციაზე გადასვლა
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 Icons ხატებით შეტყობინებების შესაქმნელად. თქვენი ხატებიდან და შინაარსიდან გამომდინარე, შეიძლება დაგჭირდეთ მეტი კომუნალური ან მორგებული სტილის დამატება.

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>
როდესაც გაფრთხილება უარყოფილია, ელემენტი მთლიანად ამოღებულია გვერდის სტრუქტურიდან. თუ კლავიატურის მომხმარებელი უარყოფს გაფრთხილებას დახურვის ღილაკის გამოყენებით, მისი ფოკუსი უეცრად დაიკარგება და ბრაუზერიდან გამომდინარე გადაიტანს გვერდის/დოკუმენტის საწყისზე. ამ მიზეზით, ჩვენ გირჩევთ ჩართოთ დამატებითი JavaScript, რომელიც უსმენს closed.bs.alertმოვლენას და პროგრამულად აყენებს focus()გვერდზე ყველაზე შესაფერის ადგილს. თუ თქვენ გეგმავთ ფოკუსის გადატანას არაინტერაქტიულ ელემენტზე, რომელიც ჩვეულებრივ არ იღებს ფოკუსს, დარწმუნდით, რომ დაამატეთ 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

სას მიქსინი

გამოიყენება კომბინაციაში $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%);
  }
}

სასი მარყუჟი

მარყუჟი, რომელიც ქმნის მოდიფიკატორის კლასებს 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 ქცევა

ინიციალიზაცია

ელემენტების ინიციალიზაცია, როგორც სიგნალიზაცია

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