bootstrap提示和彈出框
阿新 • • 發佈：2019-01-06
一、提示效果。
<!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>