JavaScript

超轻量级php框架startmvc

Bootstrap警告(Alerts)的实现方法

更新时间:2020-05-01 10:24:01 作者:startmvc
Bootstrap所提供的用于警告的class,可以通过创建一个<div>,并向其添加一个.alertclass和四

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> 

注意:请确保使用带有 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> 

效果图:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

Bootstrap 警告 Alerts