Kotak amaran Bootstrap


Bootstrap Pemalam amaran

Mesej amaran kebanyakannya digunakan untuk memaparkan maklumat seperti amaran atau mesej pengesahan kepada pengguna akhir. Menggunakan pemalam Alert, anda boleh menambah fungsi penolakan pada semua mesej amaran.

Penggunaan

Anda boleh mendayakan fungsi penyingkiran kotak amaran dalam dua cara berikut:

  • Melalui atribut data: Tambahkan fungsi boleh dibatalkan melalui API Data Cuma tambah data-dismiss="alert" pada butang tutup, dan fungsi tutup akan ditambahkan secara automatik pada kotak amaran.

<a class="close" data-dismiss="alert" href="#" aria-hidden="true">
×
</a>

  • melalui JavaScript: Tambah fungsi boleh dibatalkan melalui JavaScript:

$(".alert").alert()

Contoh

Contoh berikut menunjukkan penggunaan pemalam Alert melalui atribut data

Instance

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 警告框（Alert）插件</title>
   <link href="http://libs.baidu.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  <script src="http://libs.baidu.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="alert alert-warning">
   <a href="#" class="close" data-dismiss="alert">
      ×
   </a>
   <strong>警告！</strong>您的网络连接有问题。
</div>

</body>
</html>

Run Instance»

Klik butang "Run Instance" untuk melihat instance dalam talian

Pilihan

tiada pilihan.

Kaedah

Berikut ialah beberapa kaedah berguna dalam pemalam Alert:

KaedahPeneranganInstance
.alert()Kaedah ini Buat semua kotak amaran boleh ditutup. 
$('#identifier').alert();
方法描述实例
.alert()该方法让所有的警告框都带有关闭功能。
$('#identifier').alert('close');
Close Method .alert('close')关闭所有的警告框。
<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 警告框（Alert）插件 alert() 方法</title>
  <link href="http://libs.baidu.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  <script src="http://libs.baidu.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>

<h3>警告框（Alert）插件 alert() 方法</h3>
<div id="myAlert" class="alert alert-success">
   <a href="#" class="close" data-dismiss="alert">×</a>
   <strong>成功！</strong>结果是成功的。
</div>
<div id="myAlert" class="alert alert-warning">
   <a href="#" class="close" data-dismiss="alert">×</a>
   <strong>警告！</strong>您的网络连接有问题。
</div>

<script type="text/javascript">
$(function(){
   $(".close").click(function(){
      $("#myAlert").alert();
   });
});  
</script> 

</body>
</html>
Kaedah Tutup<🎜> .alert('close')		Tutup semua kotak amaran. 
<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 警告框（Alert）插件 alert('close') 方法</title>
  <link href="http://libs.baidu.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  <script src="http://libs.baidu.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>

<h3>警告框（Alert）插件 alert('close') 方法</h3>
<div id="myAlert" class="alert alert-success">
   <a href="#" class="close" data-dismiss="alert">×</a>
   <strong>成功！</strong>结果是成功的。
</div>
<div id="myAlert" class="alert alert-warning">
   <a href="#" class="close" data-dismiss="alert">×</a>
   <strong>警告！</strong>您的网络连接有问题。
</div>

<script type="text/javascript">
$(function(){
   $(".close").click(function(){
      $("#myAlert").alert('close');
   });
});  

</script>   

</body>
</html>
Untuk mendayakan animasi pada tutup, pastikan anda menambah kelas .fade dan .in.

Contoh

Contoh berikut menunjukkan penggunaan kaedah .alert():

Contoh

$('#myalert').bind('close.bs.alert', function () {
  // 执行一些动作...
})

Jalankan contoh»

Klik butang "Jalankan contoh" untuk melihat contoh dalam talian

Contoh berikut menunjukkan .alert(' close') Penggunaan kaedah:

Instance

$('#myalert').bind('closed.bs.alert', function () {
  // 执行一些动作...
})

Run Instance»

Klik "Run Instance" butang untuk melihat dalam talian Contoh

Anda boleh melihat bahawa semua kotak amaran mempunyai fungsi tutup yang digunakan, iaitu, mana-mana kotak amaran ditutup dan kotak amaran yang lain juga akan ditutup.

Acara

Jadual berikut menyenaraikan acara yang digunakan dalam pemalam Makluman. Acara ini boleh digunakan sebagai cangkuk dalam fungsi.

事件描述实例
close.bs.alert当调用 close 实例方法时立即触发该事件。
<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 警告框（Alert）插件事件</title>
   <link href="http://libs.baidu.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  <script src="http://libs.baidu.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>

<div id="myAlert" class="alert alert-success">
   <a href="#" class="close" data-dismiss="alert">×</a>
   <strong>成功！</strong>结果是成功的。
</div>

<script type="text/javascript">
$(function(){
   $("#myAlert").bind('closed.bs.alert', function () {
      alert("警告消息框被关闭。");
   });
});
</script>  

</body>
</html>
closed.bs.alert当警告框被关闭时触发该事件（将等待 CSS 过渡效果完成）。rrreee

Contoh

Contoh berikut menunjukkan peristiwa pemalam Makluman:

Contoh

rrreee

Jalankan Instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian