bootstrap提示和弹出框

最新推荐文章于 2024-07-15 06:06:46 发布

钟渊

最新推荐文章于 2024-07-15 06:06:46 发布

阅读量1w

点赞数

分类专栏： Bootstrap 文章标签： bootstrap jquery

本文链接：https://blog.csdn.net/u013126379/article/details/52971413

版权

Bootstrap 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一、提示效果。

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

钟渊

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
bootstrap提示和弹出框

一、提示效果。提示body { padding: 200px;}$(function (){ $("a").tooltip(); //初始化 }); <a href="#" title="这是一个按钮" data-toggle="tooltip" data-placement="right" //提示内容在那边
复制链接

扫一扫

专栏目录