Source

Perspėjimai

Pateikite kontekstinius grįžtamojo ryšio pranešimus apie tipiškus vartotojo veiksmus naudodami keletą galimų ir lanksčių įspėjimų pranešimų.

Pavyzdžiai

Galimi įspėjimai apie bet kokio ilgio tekstą, taip pat pasirenkamas atsisakymo mygtukas. Norėdami sukurti tinkamą stilių, naudokite vieną iš aštuonių būtinų kontekstinių klasių (pvz., .alert-success). Norėdami atmesti tiesioginį atmetimą, naudokite įspėjimų jQuery papildinį .

<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>
Pagalbinių technologijų prasmės perteikimas

Spalvų naudojimas reikšmei pridėti suteikia tik vaizdinę nuorodą, kuri nebus perduota pagalbinių technologijų, pvz., ekrano skaitytuvų, naudotojams. Užtikrinkite, kad informacija, pažymėta spalva, būtų akivaizdi iš paties turinio (pvz., matomas tekstas), arba būtų įtraukta naudojant alternatyvias priemones, pvz., papildomą tekstą, paslėptą .sr-onlyklasėje.

Naudokite .alert-linknaudingumo klasę, kad greitai pateiktumėte atitinkamas spalvotas nuorodas bet kuriame įspėjime.

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

Papildomas turinys

Įspėjimuose taip pat gali būti papildomų HTML elementų, tokių kaip antraštės, pastraipos ir skyrikliai.

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

Atleidimas

Naudojant įspėjimo „JavaScript“ papildinį, galima atmesti bet kokį įspėjimą. Štai kaip:

  • Įsitikinkite, kad įkėlėte įspėjimo papildinį arba sukompiliuotą „Bootstrap JavaScript“.
  • Jei kuriate „JavaScript“ iš šaltinio, tam reikiautil.js . Sukompiliuotoje versijoje tai yra.
  • Pridėkite atsisakymo mygtuką ir .alert-dismissibleklasę, kuri prideda papildomo užpildymo įspėjimo dešinėje ir nustato .closemygtuką.
  • Prie atsisakymo mygtuko pridėkite data-dismiss="alert"atributą, kuris suaktyvina „JavaScript“ funkciją. Būtinai naudokite <button>elementą su juo, kad tinkamai veiktų visuose įrenginiuose.
  • Norėdami suaktyvinti įspėjimus, kai juos atsisakote, būtinai pridėkite .fadeir .showklases.

Galite pamatyti tai veikiant tiesioginėje demonstracijoje:

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

Trigeriai

Įgalinti įspėjimo atmetimą naudojant „JavaScript“:

$('.alert').alert()

Arba naudojant įspėjimodata mygtuko atributus , kaip parodyta aukščiau:

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

Atminkite, kad uždarius įspėjimą jis bus pašalintas iš DOM.

Metodai

Metodas apibūdinimas
$().alert() Įspėja apie paspaudimų įvykius ant palikuonių elementų, turinčių data-dismiss="alert"atributą. (Nebūtina, kai naudojamas duomenų API automatinis inicijavimas.)
$().alert('close') Perspėjimas uždaromas pašalinus jį iš DOM. Jei elemente yra .fadeir .showklasės, įspėjimas išnyks prieš jį pašalinant.
$().alert('dispose') Sunaikina elemento įspėjimą. 
$(".alert").alert('close')

Renginiai

„Bootstrap“ įspėjimo papildinys atskleidžia keletą įvykių, kad būtų galima prisijungti prie įspėjimo funkcijų.

Renginys apibūdinimas
close.bs.alert Šis įvykis suaktyvinamas iš karto, kai closeiškviečiamas egzemplioriaus metodas.
closed.bs.alert Šis įvykis suaktyvinamas, kai įspėjimas uždaromas (lauks, kol bus baigti CSS perėjimai). 
$('#myAlert').on('closed.bs.alert', function () {
  // do something…
})