Source

ແຈ້ງເຕືອນ

ສະໜອງຂໍ້ຄວາມການຕິຊົມຕາມບໍລິບົດສຳລັບການກະທຳຂອງຜູ້ໃຊ້ທົ່ວໄປດ້ວຍຂໍ້ຄວາມແຈ້ງເຕືອນທີ່ມີຈຳນວນຫຼາຍ ແລະມີຄວາມຍືດຫຍຸ່ນ.

ຕົວຢ່າງ

ການແຈ້ງເຕືອນມີໃຫ້ສໍາລັບຄວາມຍາວຂອງຂໍ້ຄວາມ, ເຊັ່ນດຽວກັນກັບປຸ່ມປິດທາງເລືອກ. ສໍາລັບການຄໍເຕົ້າໄຂ່ທີ່ທີ່ເຫມາະສົມ, ໃຫ້ໃຊ້ຫນຶ່ງໃນແປດ ຫ້ອງຮຽນສະພາບການ ທີ່ຕ້ອງ ການ (ເຊັ່ນ, .alert-success). ສຳລັບການຍົກເລີກໃນແຖວ, ໃຫ້ໃຊ້ການ ແຈ້ງເຕືອນ jQuery plugin .

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

ກໍາລັງຍົກເລີກ

ການນໍາໃຊ້ plugin JavaScript ແຈ້ງເຕືອນ, ມັນເປັນໄປໄດ້ທີ່ຈະປິດການແຈ້ງເຕືອນໃດໆໃນແຖວ. ນີ້ແມ່ນວິທີ:

  • ໃຫ້ແນ່ໃຈວ່າທ່ານໄດ້ໂຫລດ plugin ແຈ້ງເຕືອນ, ຫຼື Bootstrap JavaScript ທີ່ລວບລວມ.
  • ຖ້າທ່ານກໍາລັງສ້າງ JavaScript ຂອງພວກເຮົາຈາກແຫຼ່ງ, ມັນ ຕ້ອງການutil.js . ສະບັບທີ່ລວບລວມປະກອບມີນີ້.
  • ເພີ່ມປຸ່ມປິດແລະ .alert-dismissibleຊັ້ນຮຽນ, ເຊິ່ງເພີ່ມ padding ພິເສດໄປທາງຂວາຂອງການແຈ້ງເຕືອນແລະວາງຕໍາແຫນ່ງ .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…
})