如何使用Bootstrap Popover插件

  • Z时代
  • 2024-01-10
  • 分类：综合

弹出窗口类似于工具提示，提供带有标题的扩展视图。为了激活弹出框，用户只需将光标悬停在元素上。可以使用Bootstrap Data API完全填充弹出窗口的内容。

您可以尝试运行以下代码来实现Popover插件

示例

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

以上是 如何使用Bootstrap Popover插件 的全部内容， 来源链接： utcz.com/z/316430.html

回到顶部