bootstrap怎么实现错误警告信息提示?

bootstrap怎么实现错误警信息提示?下面本篇文章给大家介绍一下。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

bootstrap提供了成功执行、警告和错误信息的样式。

在使用该功能的时候需要引入以下几个文件:

bootstrap.css

jquery.js(需放在bootstrap.js之前)

bootstrap.js(官方推荐引入的是bootstrap-alert.js)

主要使用的样式:

  • .span4

  • .alert(默认样式)

  • .alert alert-successs

  • .alert alert-error

  • .alert alert-info

实例代码如下:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>bootstrap警告错误</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="alert alert-success alert-dismissable">
	<button type="button" class="close" data-dismiss="alert"
			aria-hidden="true">
		&times;
	</button>
	成功!很好地完成了提交。
</div>
<div class="alert alert-info alert-dismissable">
	<button type="button" class="close" data-dismiss="alert"
			aria-hidden="true">
		&times;
	</button>
	信息!请注意这个信息。
</div>
<div class="alert alert-warning alert-dismissable">
	<button type="button" class="close" data-dismiss="alert"
			aria-hidden="true">
		&times;
	</button>
	警告!请不要提交。
</div>
<div class="alert alert-danger alert-dismissable">
	<button type="button" class="close" data-dismiss="alert"
			aria-hidden="true">
		&times;
	</button>
	错误!请进行一些更改。
</div>


</body>
</html>

效果如图:

1.png

更多web前端知识,请查阅 HTML中文网 !!

以上就是bootstrap怎么实现错误警告信息提示?的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » Bootstrap 教程

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏