Bootstrap 警告

2018-03-01 14:40 更新

Bootstrap带有一个非常有用的组件用于显示警告（alert）消息。

我们可以使用它们来显示成功消息、警告消息、失败消息或信息消息。

以下是“success”警告消息的标记：

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

每个警告都应该附加 alert 类。

它还应该有一个附加的上下文类，例如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://www.w3cschool.cn" class="alert-link">account page</a>.
    </div>
  </body>
</html>

警报警告

我们可以使用.alert类创建警报警告消息。

<!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来创建错误或危险警告消息。

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

成功或确认警告

要创建成功或确认警告消息，需向.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关闭警告框

以下标记用于可关闭的警报框。

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

要创建可关闭的警告消息，我们需要将类 alert-dismissable添加到警告框中。

接下来，我们需要一个按钮，单击时将关闭警告消息。按钮应该有data-dismiss属性，它告诉Bootstrap组件单击时关闭。

通过JavaScript关闭警告

我们可以通过JavaScript关闭警示。

<!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()方法封装所有具有关闭功能的警告。

<!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')方法关闭警告消息框。

<!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	在调用close方法时触发。
closed.bs.alert	在警告消息框关闭时触发。它将等待，直到CSS转换过程完成。

以下示例为在完成警告消息框的淡出转换时向用户显示警告消息。

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

以上内容是否对您有帮助：