分页 弹出框 

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5     <title>分页 提示内容</title>
 6     <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" >
 7     <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
 8     <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" ></script>
 9 </head>
10 <body>
11     <!-- 分页 -->
12     <nav >
13       <ul class="pagination">
14         <li><a href="#">&laquo;</a></li>
15         <li><a href="#">&lt;</a></li>
16         <li><a href="#">1</a></li>
17         <li><a href="#">2</a></li>
18         <li><a href="#">3</a></li>
19         <li><a href="#">4</a></li>
20         <li><a href="#">5</a></li>
21         <li><a href="#">&gt;</a></li>
22         <li><a href="#">&raquo;</a></li>
23       </ul>
24     </nav>
25     <!-- 提示内容可以是html 鼠标移开就隐藏-->
26     <a href="#" class="tooltip-test" data-toggle="tooltip" data-html="true" title="<p>hello</p><img src='5.jpg'>">上面</a>
27     <button type="button" class="btn btn-default" data-toggle="tooltip" title="下面的 Tooltip">下面</button>
28     <!-- 点击显示，再次点击按钮隐藏 弹出框-->
29     <button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">点我弹出/隐藏弹出框</button>
30     <!-- 点击显示，再次点击任何区域隐藏，必须添加必要的属性role focus 必须是a标签 -->
31     <a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">可消失的弹出框</a>
32     <script>
33         $(function () { 
34             $("[data-toggle='tooltip']").tooltip();
35             $('[data-toggle="popover"]').popover();
36             // $(".btn").hover(function(){//改变title的值
37             //     $(this).attr('title',"XXXXXX2").tooltip('fixTitle').tooltip('show');
38             // })
39              });
40     </script>
41 </body>
42 </html>

 

posted @ 2017-09-25 19:45  静静的fire  阅读(671)  评论(0)    收藏  举报