Bootstrap 彈出框

2018-11-08 11:11 更新

Bootstrap Popover（彈出框）

描述

Bootstrap Popover（彈出框）是使用定制的 Jquery 插件創(chuàng)建的。它可以用來顯示任何元素的一些信息。

在本教程中，您將看到如何使用 Bootstrap Popover，以及如何使用一些可用選項(xiàng)進(jìn)行定制。

什么是必需的

您必須飲用 Jquery、Bootstrap CSS 和兩個(gè) JavaScript files - 一個(gè)用于 Bootstrap Tooltip（工具提示插件），一個(gè)用于 Bootstrap Popover（彈出框）。

用于 Tooltip（工具提示插件）的 JS 文件位于您的 Bootstrap 文件夾中的 js 文件夾下，名為 bootstrap-tooltip.js。用于 Popover（彈出框）的 JS 文件位于您的 Bootstrap 主文件夾中的 js 文件夾下，名為 bootstrap-popover.js。Jquery 位于您的 Bootstrap 主文件夾中的 docs > assets > js 下，名為 jquery.js?；蛘吣梢灾苯釉L問 https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js 下載 Jquery。

請確保您在下載 bootstrap-popover.js 之前先下載 bootstrap-tooltip.js。彈出框依賴工具提示插件，因此需要先加載工具提示插件。

在您的網(wǎng)站中使用 Bootstrap Popover（彈出框）

實(shí)例

<div class="container">
    <h2>使用Bootstrap創(chuàng)建彈出框</h2>
    <div class="well">
        <a href="#" id="example" class="btn btn-danger" rel="popover" data-content="It's so simple to create a tooltop for my website!" data-original-title="Twitter Bootstrap Popover">hover for popover</a>
    </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="/twitter-bootstrap/twitter-bootstrap-v2/js/bootstrap-tooltip.js"></script>
<script src="/twitter-bootstrap/twitter-bootstrap-v2/js/bootstrap-popover.js"></script>
<script>
    $(function ()
    { $("#example").popover();
    });
</script>

在線查看實(shí)例

解釋

下面的表格解釋了上面的代碼。它將幫助您理解如何使用 Bootstrap Popover（彈出框）。

代碼 解釋
id="example" 分配給相關(guān)錨的 id，id 的值指向后邊要實(shí)現(xiàn) popover（彈出框）的 JavaScript。
class="btn btn-danger" 創(chuàng)建一個(gè)按鈕。btn btn-danger 是實(shí)例中使用的 class。您可以使用 Bootstrap CSS 中任何其他的 class，或者使用您自己定義的 class。
data-content="It's so simple to create a tooltip for my website!" data-content 的值顯示在 popover（彈出框）的主體中。
data-original-title="Bootstrap Popover" data-original-title 的值顯示為 popover（彈出框）的標(biāo)題。
hover for popover 錨文本。
<script src="https://ajax.googleapis.com/ajax/libs/ jquery/1.7.1/jquery.min.js"></script> 引用 Jquery。
<script src="../bootstrap/twitter-bootstrap-v2/ js/bootstrap-tooltip.js"></script> 引用 Bootstrap Tooltip（工具提示插件）的 JS 文件。
<script src="../bootstrap/twitter-bootstrap-v2/js/ bootstrap-popover.js"></script> 引用 Bootstrap Popover（彈出框）的 JS 文件。
$(function () 準(zhǔn)備文檔。Jquery 命令。
$("#example").popover(); 訪問 id example，并在上面實(shí)現(xiàn) popover()。

這里我們沒有在 box 外創(chuàng)建 popover（彈出框），不通過任何的定制，即沒有通過 popover() 使用任何的選項(xiàng)。

用法

所以，我們可以總結(jié)出 Bootstrap Popover（彈出框）的用法是：

$(function ()  
{ $("identifier").popover(options);  
});

其中 identifier 是一個(gè) Jquery 選擇器，用于標(biāo)識相關(guān)的容器元素。接下來，我們來看看 options 都有哪些。

選項(xiàng)

下面是一些通過 popover() 定制 Popover（彈出框）外觀和感觀時(shí)可能使用到的選項(xiàng)。

animation

animation 值的類型是 boolean，默認(rèn)值是 true。用于給 tooltip（工具提示插件）帶來 css 漸變過渡效果。

placement

placement 值的類型可以是 string 或者 function，默認(rèn)值是 'right'，top、bottom 和 left 是其他幾個(gè)可以使用的值。這個(gè)選項(xiàng)用于決定環(huán)繞錨文本周圍的 Popover（彈出框）是位置。下面是一個(gè)使用 placement 選項(xiàng)的實(shí)例。

實(shí)例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Bootstrap 彈出框位置選擇的實(shí)例</title>
    <meta name="description" content="Creating Modal Window with Twitter Bootstrap">
    <link href="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet">
    <style>
        a {
            margin-left : 400px;
        }
    </style>
</head>
<body>
<div class="container">
    <h2>使用Bootstrap plcement 選項(xiàng)創(chuàng)建彈出框</h2>
    <div class="well">
        <a href="#" id="example" class="btn btn-success" rel="popover" data-content="為我的網(wǎng)站創(chuàng)建一個(gè)提示框如此簡單！" data-original-title="Twitter Bootstrap 彈出框">懸停彈出</a>
    </div>
    <div class="well">
        <a href="#" id="example_left" class="btn btn-success" rel="popover" data-content="為我的網(wǎng)站創(chuàng)建一個(gè)提示框如此簡單！" data-original-title="Twitter Bootstrap 彈出框">懸停彈出</a>
    </div>
    <div class="well">
        <a href="#" id="example_top" class="btn btn-success" rel="popover" data-content="為我的網(wǎng)站創(chuàng)建一個(gè)提示框如此簡單！" data-original-title="Twitter Bootstrap 彈出框">懸停彈出</a>
    </div>
    <div class="well">
        <a href="#" id="example_bottom" class="btn btn-success" rel="popover" data-content="為我的網(wǎng)站創(chuàng)建一個(gè)提示框如此簡單！" data-original-title="Twitter Bootstrap 彈出框">懸停彈出</a>
    </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="/twitter-bootstrap/twitter-bootstrap-v2/js/bootstrap-tooltip.js"></script>
<script src="/twitter-bootstrap/twitter-bootstrap-v2/js/bootstrap-popover.js"></script>
<script>
    $(function ()
    { $("#example").popover();
        $("#example_left").popover({placement:'left'});
        $("#example_top").popover({placement:'top'});
        $("#example_bottom").popover({placement:'bottom'});
    });
</script>
</body>
</html>

在線查看實(shí)例

selector

selector 值的類型是 string，默認(rèn)值是 false。通過使用該選項(xiàng)可以把 Tooltip 對象授權(quán)給定的目標(biāo)。

trigger

trigger 值的類型可以是 string，默認(rèn)值是 'hover'，focus 和 manual 是其他可以使用的值。這個(gè)選項(xiàng)用于決定 tooltip（工具提示插件）如何開始。下面的實(shí)例演示了如何使用 focus 選項(xiàng)觸發(fā) Popover（彈出框）。

實(shí)例

<div class="container">
    <h2>使用Bootstrap trigger 選項(xiàng)創(chuàng)建彈出框</h2>
    <div class="well">
        <a href="#" id="example" class="btn btn-success" rel="popover" data-content="為我的網(wǎng)站創(chuàng)建一個(gè)提示框如此簡單！" data-original-title="Twitter Bootstrap 彈出框">懸停彈出</a>
    </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="/twitter-bootstrap/twitter-bootstrap-v2/js/bootstrap-tooltip.js"></script>
<script src="/twitter-bootstrap/twitter-bootstrap-v2/js/bootstrap-popover.js"></script>
<script>
    $(function ()
    { $("#example").popover({trigger: 'focus'});
    });
</script>

在線查看實(shí)例

title

title 值的類型可以是 string 或 function，默認(rèn)值是 ''。即默認(rèn)不顯示 title 屬性的值。

content

content 值的類型可以是 string 或 function，默認(rèn)值是 ''。即默認(rèn)不顯示 data-content 屬性的值。下面是一個(gè)使用 title 和 data-content 選項(xiàng)的實(shí)例。該實(shí)例也演示了如何把多個(gè)選項(xiàng)一起使用。

實(shí)例

<div class="container">
    <h2>Bootstrap彈出框使用title和content選項(xiàng)</h2>
    <div class="well">
        <a href="#" id="example" class="btn btn-success" rel="popover">懸停彈出</a>
    </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="/twitter-bootstrap/twitter-bootstrap-v2/js/bootstrap-tooltip.js"></script>
<script src="/twitter-bootstrap/twitter-bootstrap-v2/js/bootstrap-popover.js"></script>
<script>
    $(function ()
    { $("#example").popover({title: 'Twitter Bootstrap Popover', content: "為我的網(wǎng)站創(chuàng)建一個(gè)提示框如此簡單！"});
    });
</script>

在線查看實(shí)例

delay

delay 值的類型可以是 number 或 object，默認(rèn)值是 0。這決定了顯示和隱藏 popover（彈出框）的等待時(shí)間，以毫秒為單位。如果值設(shè)置為一個(gè)數(shù)字，則等待時(shí)間會應(yīng)用于顯示和隱藏。如果值設(shè)置為一個(gè)對象，則結(jié)構(gòu)為 delay: { show: 500, hide: 100}，其中 500 和 100 是以毫秒為單位的。

改變 popover（彈出框）的默認(rèn)標(biāo)記和樣式

Popover 彈出窗口的默認(rèn)標(biāo)記是位于 bootstrap-popover.js 文件的行號 92。如下所示：

template: '<div class="popover"><div class="arrow"></div><div class="popover-inner"><h3 class="popover-title"></h3><div class="popover-content"><p></p></div></div></div>'

您可以更改它，放上您自己的標(biāo)記。

Popover 彈出窗口的默認(rèn)樣式位于行號 3027 到 3118。您可以修改它，放上您自己的樣式。

點(diǎn)擊這里，下載本教程中使用到的所有 HTML、CSS、JS 和圖片文件。

以上內(nèi)容是否對您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號