分頁 彈出框
阿新 • • 發佈：2017-09-25
default efault -- attr 隱藏 xxxxxx dex right char
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="#">«</a></li> 15 <li><a href="#"><</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="#">></a></li> 22 <li><a href="#">»</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>
分頁 彈出框