本文主要是介绍bootstrap提示和弹出框,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
一、提示效果。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>提示</title>
<link rel="stylesheet" href="css/bootstrap.css">
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<style type="text/css">
body {padding: 200px;
}</style>
<script type="text/javascript">
$(function (){$("a").tooltip(); //初始化
});</script></head>
<body><a href="#" title="这是一个按钮" data-toggle="tooltip"data-placement="right" //提示内容在那边>按钮</a>
</body>
</html>
二、弹框提示效果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>提示</title>
<link rel="stylesheet" href="css/bootstrap.css">
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<style type="text/css">
body {padding: 200px;
}</style>
<script type="text/javascript">
$(function (){$("button").popover();
});</script></head>
<body><button class="btn btn-primary btn-lg" id="btn1" title="bootstrap简介"data-html="true"data-trigger="hover"data-placement="top" //弹框的位置data-content="<a href='http://www.bootcss.com/'>Bootstrap</a>Bootstrap简洁、直观、强悍的前端开发框架,让web开发更迅速、简单。Bootstrap 编码规范:编写灵活、稳定、高质量的 HTML 和 CSS 代码的规范。">弹框</button>
</body>
</html>
这篇关于bootstrap提示和弹出框的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!