如何使用 Bootstrap 浮動提示外掛


浮動提示與工具提示類似,提供了一個帶有標題的擴充套件檢視。要啟用浮動提示,使用者只需將游標懸停在元素上。浮動提示的內容可以使用 Bootstrap 資料 API 完全填充。

你可以嘗試執行以下程式碼來實現浮動提示外掛

示例

體驗演示

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap Example</title>
      <link href = "/bootstrap/css/bootstrap.min.css" rel = "stylesheet">
      <script src = "/scripts/jquery.min.js"></script>
      <script src = "/bootstrap/js/bootstrap.min.js"></script>
   </head>
   <body>
      <div class = "container" style = "padding: 100px 50px 10px;" >
         <button type = "button" class = "btn btn-default" title = "Popover title"
            data-container = "body" data-toggle = "popover" data-placement = "left"
            data-content = "Some content in Popover on left">
               Popover on left
         </button>
         <button type = "button" class = "btn btn-primary" title = "Popover title"
            data-container = "body" data-toggle = "popover" data-placement = "top"
            data-content = "Some content in Popover on top">
            Popover on top
         </button>
         <button type = "button" class = "btn btn-success" title = "Popover title"
            data-container = "body" data-toggle = "popover" data-placement = "bottom"
            data-content = "Some content in Popover on bottom">
            Popover on bottom
         </button>
         <button type = "button" class = "btn btn-warning" title = "Popover title"
            data-container = "body" data-toggle = "popover" data-placement = "right"
            data-content = "Some content in Popover on right">
            Popover on right
         </button>
      </div>
      <script>
         $(function (){
            $("[data-toggle = 'popover']").popover();
         });
      </script>
   </body>
</html>

更新於: 12-6-2020

146 次瀏覽

開啟你的職業生涯

完成課程,獲得認證

開始吧
廣告
© . All rights reserved.