Source

Огоҳӣ

Паёмҳои фикру мулоҳизаҳои контекстӣ барои амалҳои маъмулии корбарро бо шумораи зиёди паёмҳои огоҳии дастрас ва чандир пешниҳод кунед.

Мисолхо

Огоҳиҳо барои ҳар дарозии матн ва инчунин тугмаи ихтиёрии радкунӣ дастрасанд. Барои ороиши дуруст, яке аз ҳашт синфи зарурии контекстиро истифода баред (масалан, .alert-success). Барои хориҷ кардани сатр, плагини jQuery alerts -ро истифода баред .

<div class="alert alert-primary" role="alert">
  This is a primary alert—check it out!
</div>
<div class="alert alert-secondary" role="alert">
  This is a secondary alert—check it out!
</div>
<div class="alert alert-success" role="alert">
  This is a success alert—check it out!
</div>
<div class="alert alert-danger" role="alert">
  This is a danger alert—check it out!
</div>
<div class="alert alert-warning" role="alert">
  This is a warning alert—check it out!
</div>
<div class="alert alert-info" role="alert">
  This is a info alert—check it out!
</div>
<div class="alert alert-light" role="alert">
  This is a light alert—check it out!
</div>
<div class="alert alert-dark" role="alert">
  This is a dark alert—check it out!
</div>
Интиқоли маъно ба технологияҳои ёрирасон

Истифодаи ранг барои илова кардани маъно танҳо нишонаи визуалиро таъмин мекунад, ки он ба корбарони технологияҳои ёрирасон, ба монанди экрани хонандагон, интиқол дода намешавад. Боварӣ ҳосил кунед, ки иттилооте, ки бо ранг нишон дода шудааст, ё аз худи мундариҷа (масалан, матни намоён) равшан аст ё тавассути воситаҳои алтернативӣ, ба монанди матни иловагии бо .sr-onlyсинф пинҳоншуда дохил карда мешавад.

Синфи утилитро .alert-linkбарои зуд таъмин кардани пайвандҳои рангаи мувофиқ дар дохили ҳама гуна огоҳӣ истифода баред.

<div class="alert alert-primary" role="alert">
  This is a 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">
  This is a 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">
  This is a 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">
  This is a 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">
  This is a 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">
  This is a 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">
  This is a 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">
  This is a 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>

Хориҷ кардан

Бо истифода аз плагини JavaScript ҳушдор, имкон дорад, ки ҳама гуна ҳушдор дар сатрро рад кард. Ин тавр аст:

  • Боварӣ ҳосил кунед, ки шумо плагини огоҳкунанда ё JavaScript-и Bootstrap-ро бор кардаед.
  • Агар шумо JavaScript-и моро аз сарчашма сохта истода бошед, онutil.js . Варианти тартибдодашуда инро дар бар мегирад.
  • Тугмаи радкунӣ ва .alert-dismissibleсинфро илова кунед, ки ба тарафи рости огоҳӣ замимаи иловагӣ илова мекунад ва .closeтугмаро ҷойгир мекунад.
  • Дар тугмаи радкунӣ атрибутеро илова кунед data-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="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
</div>

Рафтори JavaScript

Триггерҳо

Қатъи огоҳиро тавассути JavaScript фаъол созед:

$('.alert').alert()

Ё бо dataатрибутҳо дар тугмаи дохили alert , тавре ки дар боло нишон дода шудааст:

<button type="button" class="close" data-dismiss="alert" aria-label="Close">
  <span aria-hidden="true">&times;</span>
</button>

Дар хотир доред, ки пӯшидани огоҳӣ онро аз DOM хориҷ мекунад.

Усулҳо

Усул Тавсифи
$().alert() Ҳодисаҳои кликро дар унсурҳои насли, ки атрибут доранд, огоҳӣ медиҳад data-dismiss="alert". (Ҳангоми истифодаи автоматикунонии data-api лозим нест.)
$().alert('close') Огоҳиро бо хориҷ кардани он аз DOM мепӯшонад. Агар дар элемент синфҳо .fadeва .showсинфҳо мавҷуд бошанд, огоҳӣ пеш аз хориҷ шуданаш хомӯш мешавад.
$().alert('dispose') Огоҳии элементро нест мекунад. 
$(".alert").alert('close')

Ҳодисаҳо

Васлкунаки огоҳии Bootstrap чанд ҳодисаро барои пайвастшавӣ ба функсияи ҳушдор фош мекунад.

Ҳодиса Тавсифи
close.bs.alert Ин ҳодиса фавран ҳангоми closeдаъват кардани усули инстансия оғоз меёбад.
closed.bs.alert Ин ҳодиса ҳангоми баста шудани ҳушдор оғоз мешавад (то ба анҷом расидани гузаришҳои CSS интизор мешавад). 
$('#myAlert').on('closed.bs.alert', function () {
  // do something…
})