bootstrap提示和彈出框

夏青老師發表於2016-10-30
boot

一、提示效果。



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


相關文章