Source

Сигнализация

Кулланучының типик гамәлләре өчен контекстуаль кире элемтә хәбәрләрен бирегез.

Мисаллар

Сигнализация теләсә нинди озынлыктагы текст өчен, шулай ук ​​өстәмә эштән чыгару төймәсе өчен бар. Дөрес стилизацияләү өчен кирәкле сигез контекст классның берсен кулланыгыз (мәсәлән, .alert-success). Эштән чыгару өчен, jQuery плагинын кулланыгыз .

<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>
Ярдәмче технологияләргә мәгънә җиткерү

Мәгънә өстәү өчен төс куллану визуаль күрсәткеч кенә бирә, ул ярдәмче технологияләр кулланучыларга җиткерелмәячәк - экран укучылары кебек. Төс белән күрсәтелгән мәгълүматның эчтәлектән ачык булуын (мәсәлән, күренгән текст), яки .sr-onlyкласс белән яшерелгән өстәмә текст кебек альтернатив чаралар аша кертелүен тәэмин итегез.

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

Эштән чыгару

JavaScript плагинын кулланып, теләсә нинди хәбәрне кире кагарга мөмкин. Менә ничек:

  • Сигнализация плагинын яки тупланган Bootstrap JavaScript йөкләгәнегезгә инаныгыз.
  • Әгәр дә сез безнең JavaScriptны чыганактан төзисез икән, бу кирәкutil.js . Compыелган версия моны үз эченә ала.
  • Эштән чыгару төймәсен һәм .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 төймәдәге атрибутлар белән :

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