Bootstrap 警告

2018-03-01 14:40 更新

Bootstrap帶有一個非常有用的組件用于顯示警告（alert）消息。

我們可以使用它們來顯示成功消息、警告消息、失敗消息或信息消息。

以下是“success”警告消息的標(biāo)記：

<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript"
  src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<link rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script
  src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script
  src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

</head>
  <body style="margin:30px">
    <div class="alert alert-success">
        Amount  has been transferred successfully.
    </div>
  </body>
</html>

每個警告都應(yīng)該附加 alert 類。

它還應(yīng)該有一個附加的上下文類，例如alert-success。警告消息有四個不言自明的上下文類：

  • alert-success
  • alert-info
  • alert-danger
  • alert-warning

要在警告中放置鏈接，需要向a元素添加類 alert-link。下面提供了相對于警告框顏色的鏈接匹配顏色：

<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript"
  src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<link rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script
  src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script
  src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

</head>
  <body style="margin:30px">
    <div class="alert alert-success alert-dismissable">
        <button type="button" class="close" 
                data-dismiss="alert">&times;</button>
        Amount  has been transferred successfully. 
        Go to <a href="http://o2fo.com" class="alert-link">account page</a>.
    </div>
  </body>
</html>

警報警告

我們可以使用.alert類創(chuàng)建警報警告消息。

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<style type="text/css">
  .bs-example{
    margin: 20px;
  }
</style>
</head>
<body>
<div class="bs-example">
    <div class="alert alert-warning">
        <a href="#" class="close" data-dismiss="alert">&times;</a>
        <strong>Warning!</strong> There was a problem with your network connection.
    </div>
</div>
</body>
</html>

錯誤或危險警告

我們可以通過向.alert基類添加一個額外的類.alert-error來創(chuàng)建錯誤或危險警告消息。

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<style type="text/css">
  .bs-example{
    margin: 20px;
  }
</style>
</head>
<body>
<div class="bs-example">
    <div class="alert alert-danger alert-error">
        <a href="#" class="close" data-dismiss="alert">&times;</a>
        <strong>Error!</strong> A problem has been occurred while submitting your data.
    </div>
</div>
</body>
</html>

成功或確認(rèn)警告

要創(chuàng)建成功或確認(rèn)警告消息，需向.alert基類添加一個額外的類.alert-success。

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<style type="text/css">
  .bs-example{
    margin: 20px;
  }
</style>
</head>
<body>
<div class="bs-example">
    <div class="alert alert-success">
        <a href="#" class="close" data-dismiss="alert">&times;</a>
        <strong>Success!</strong> Your message has been sent successfully.
    </div>
</div>
</body>
</html>

信息警告

對于信息警告消息，向.alert基類添加一個額外的類.alert-info。

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<style type="text/css">
  .bs-example{
    margin: 20px;
  }
</style>
</head>
<body>
<div class="bs-example">
    <div class="alert alert-info">
        <a href="#" class="close" data-dismiss="alert">&times;</a>
        <strong>Note!</strong> Please read the comments carefully.
    </div>
</div>
</body>
</html>

可通過data-dismiss關(guān)閉警告框

以下標(biāo)記用于可關(guān)閉的警報框。

<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript"
  src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<link rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script
  src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script
  src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

</head>
  <body style="margin:30px">
    <div class="alert alert-success alert-dismissable">
        <button type="button" class="close" data-dismiss="alert">&times;</button>
        Amount  has been transferred successfully.
    </div>
  </body>
</html>

要創(chuàng)建可關(guān)閉的警告消息，我們需要將類 alert-dismissable添加到警告框中。

接下來，我們需要一個按鈕，單擊時將關(guān)閉警告消息。按鈕應(yīng)該有data-dismiss屬性，它告訴Bootstrap組件單擊時關(guān)閉。

通過JavaScript關(guān)閉警告

我們可以通過JavaScript關(guān)閉警示。

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $(".close").click(function(){
    $("#myAlert").alert();
  });
});
</script>
<style type="text/css">
  .bs-example{
    margin: 20px;
  }
</style>
</head>
<body>
<div class="bs-example">
    <div class="alert alert-danger" id="myAlert">
        <a href="#" class="close" data-dismiss="alert">&times;</a>
        <strong>Error!</strong> A problem has been occurred while submitting your data.
    </div>
</div>
</body>
</html>

$().alert()

$().alert()方法封裝所有具有關(guān)閉功能的警告。

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $(".close").click(function(){
    $("#myAlert").alert();
  });
});  
</script>
<style type="text/css">
  .bs-example{
    margin: 20px;
  }
</style>
</head>
<body>
<div class="bs-example">
    <div id="myAlert" class="alert alert-info">
        <a href="#" class="close" data-dismiss="alert">&times;</a>
        <strong>Note!</strong> Please read the comments carefully.
    </div>
</div>
</body>
</html>

$().alert('close')

$().alert('close')方法關(guān)閉警告消息框。

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $(".close").click(function(){
    $("#myAlert").alert("close");
  });
});  
</script>
<style type="text/css">
  .bs-example{
    margin: 20px;
  }
</style>
</head>
<body>
<div class="bs-example">
    <div id="myAlert" class="alert alert-info">
        <a href="#" class="close">&times;</a>
        <strong>Note!</strong> Please read the comments carefully.
    </div>
</div>
</body>
</html>

事件

Bootstrap的alert類包括一些事件。

事件描述
close.bs.alert 在調(diào)用close方法時觸發(fā)。
closed.bs.alert 在警告消息框關(guān)閉時觸發(fā)。它將等待，直到CSS轉(zhuǎn)換過程完成。

以下示例為在完成警告消息框的淡出轉(zhuǎn)換時向用戶顯示警告消息。

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("#myAlert").bind("closed.bs.alert", function(){
        alert("Alert message box has been closed.");
    });
});  
</script>
<style type="text/css">
  .bs-example{
    margin: 20px;
  }
</style>
</head>
<body>
<div class="bs-example">
    <div id="myAlert" class="alert alert-info">
        <a href="#" class="close" data-dismiss="alert">&times;</a>
        <strong>Note!</strong> Please read the comments carefully.
    </div>
</div>
</body>
</html>
以上內(nèi)容是否對您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號