当前位置：首页 > 资讯 > 技术文档

Bootstrap警告（Alerts）的实现方法

时间：2021-12-05 05:35 编辑：来源：阅读：
扫一扫，手机访问

摘要：Bootstrap警告（Alerts）的实现方法

Bootstrap 所提供的用于警告的 class，可以通过创建一个 <div>，并向其添加一个 .alert class 和四个上下文 class（即 .alert-success、.alert-info、.alert-warning、.alert-danger）之一，来添加一个基本的警告框。 html代码

<div class="alert alert-success"> 
  成功！很好地完成了提交。 
</div> 
<div class="alert alert-info"> 
  信息！请注意这个信息。 
</div>

如果要创建一个可取消的警告（Dismissal Alert）步骤如下： 1、通过创建一个 <div>，并向其添加一个 .alert class 和四个上下文 class（即 .alert-success、.alert-info、.alert-warning、.alert-danger）之一，来添加一个基本的警告框。 2、同时向上面的 <div> class 添加可选的 .alert-dismissable。 3、添加一个关闭按钮。（按钮可点击关掉） html代码

<div class="alert alert-warning alert-dismissable"> 
   <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button> 
          警告！请不要提交。 
  </div>  
<div class="alert alert-danger alert-dismissable"> 
   <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button> 
           错误！请进行一些更改。 
  </div>

[b]注意：[/b]请确保使用带有 data-dismiss="alert" data 属性的 <button> 元素。 html代码

<!DOCTYPE html> 
<html> 
<head> 
  <title>Bootstrap 页面标题（Page Header）</title> 
  <meta charset="utf-8"> 
  <link rel="stylesheet" href="css/bootstrap.min.css" rel="external nofollow" > 
 
</head> 
 
<body> 
<div class="container"> 
  <div class="alert alert-success"> 
            成功！很好地完成了提交。 
  </div> 
  <div class="alert alert-info"> 
       信息！请注意这个信息。 
  </div>  
  <div class="alert alert-warning alert-dismissable"> 
   <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button> 
          警告！请不要提交。 
  </div>  
  <div class="alert alert-danger alert-dismissable"> 
   <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button> 
           错误！请进行一些更改。 
  </div> 
   
</div>  
<script src="js/jquery.min.js"></script> 
<script src="js/bootstrap.min.js"></script> 
  </body> 
</html>

效果图： [img]http://files.jb51.net/file_images/article/201703/201732284545686.jpg?201722284557[/img] 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程素材网。

全部评论(0)

上一篇：JavaScript运行过程中的“预编译阶段”和“执行阶段”
下一篇：javascript动画浅析

资讯排行榜
更多>>