Bootstrap 教程
Bootstrap Popover（彈出框）是使用定制的 Jquery 插件創(chuàng)建的。它可以用來顯示任何元素的一些信息。
在本教程中，您將看到如何使用 Bootstrap Popover，以及如何使用一些可用選項進行定制。
您必須引用 Jquery、Bootstrap CSS 和兩個 JavaScript files - 一個用于 Bootstrap Tooltip（工具提示插件），一個用于 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。彈出框依賴工具提示插件，因此需要先加載工具提示插件。
下面的表格解釋了上面的代碼。它將幫助您理解如何使用 Bootstrap Popover（彈出框）。
| 代碼 | 解釋 |
|---|---|
| id="example" | 分配給相關(guān)錨的 id，id 的值指向后邊要實現(xiàn) popover（彈出框）的 JavaScript。 |
| class="btn btn-danger" | 創(chuàng)建一個按鈕。btn btn-danger 是實例中使用的 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（彈出框）的標題。 |
| 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 () | 準備文檔。Jquery 命令。 |
| $("#example").popover(); | 訪問 id example，并在上面實現(xiàn) popover()。 |
這里我們沒有在 box 外創(chuàng)建 popover（彈出框），不通過任何的定制，即沒有通過 popover() 使用任何的選項。
所以，我們可以總結(jié)出 Bootstrap Popover（彈出框）的用法是：
$(function ()
{ $("identifier").popover(options);
});
其中 identifier 是一個 Jquery 選擇器，用于標識相關(guān)的容器元素。接下來，我們來看看 options 都有哪些。
下面是一些通過 popover() 定制 Popover（彈出框）外觀和感觀時可能使用到的選項。
animation 值的類型是 boolean，默認值是 true。用于給 tooltip（工具提示插件）帶來 css 漸變過渡效果。
placement 值的類型可以是 string 或者 function，默認值是 'right'，top、bottom 和 left 是其他幾個可以使用的值。這個選項用于決定環(huán)繞錨文本周圍的 Popover（彈出框）是位置。下面是一個使用 placement 選項的實例。
selector 值的類型是 string，默認值是 false。通過使用該選項可以把 Tooltip 對象授權(quán)給定的目標。
trigger 值的類型可以是 string，默認值是 'hover'，focus 和 manual 是其他可以使用的值。這個選項用于決定 tooltip（工具提示插件）如何開始。下面的實例演示了如何使用 focus 選項觸發(fā) Popover（彈出框）。
title 值的類型可以是 string 或 function，默認值是 ''。即默認不顯示 title 屬性的值。
content 值的類型可以是 string 或 function，默認值是 ''。即默認不顯示 data-content 屬性的值。下面是一個使用 title 和 data-content 選項的實例。該實例也演示了如何把多個選項一起使用。
delay 值的類型可以是 number 或 object，默認值是 0。這決定了顯示和隱藏 popover（彈出框）的等待時間，以毫秒為單位。如果值設(shè)置為一個數(shù)字，則等待時間會應用于顯示和隱藏。如果值設(shè)置為一個對象，則結(jié)構(gòu)為 delay: { show: 500, hide: 100}，其中 500 和 100 是以毫秒為單位的。
Popover 彈出窗口的默認標記是位于 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>' ????????????
您可以更改它，放上您自己的標記。
Popover 彈出窗口的默認樣式位于行號 3027 到 3118。您可以修改它，放上您自己的樣式。
其他擴展