国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

directory search
Bootstrap 基礎(chǔ)教程 Bootstrap 環(huán)境安裝 Bootstrap 教程 Bootstrap CSS Bootstrap CSS 概覽 Bootstrap 按鈕 Bootstrap 表單 Bootstrap 表格 Bootstrap 代碼 Bootstrap 輔助類 Bootstrap 排版 Bootstrap 圖片 Bootstrap 網(wǎng)格系統(tǒng) Bootstrap 網(wǎng)格系統(tǒng)實(shí)例：堆疊的水平 Bootstrap 網(wǎng)格系統(tǒng)實(shí)例：手機(jī)、平板電腦、臺(tái)式電腦 Bootstrap 網(wǎng)格系統(tǒng)實(shí)例：中型和大型設(shè)備 Bootstrap 響應(yīng)式實(shí)用工具 Bootstrap 布局組件 Bootstrap Well Bootstrap 按鈕下拉菜單 Bootstrap 按鈕組 Bootstrap 標(biāo)簽 Bootstrap 超大屏幕（Jumbotron） Bootstrap 導(dǎo)航欄 Bootstrap 導(dǎo)航元素 Bootstrap 多媒體對(duì)象（Media Object） Bootstrap 分頁 Bootstrap 徽章（Badges） Bootstrap 進(jìn)度條 Bootstrap 警告（Alerts） Bootstrap 列表組 Bootstrap 面板（Panels） Bootstrap 面包屑導(dǎo)航（Breadcrumbs） Bootstrap 輸入框組 Bootstrap 縮略圖 Bootstrap 下拉菜單（Dropdowns） Bootstrap 頁面標(biāo)題（Page Header） Bootstrap 字體圖標(biāo)(Glyphicons) Bootstrap 插件 Bootstrap 按鈕（Button） Bootstrap 標(biāo)簽頁（Tab） Bootstrap 插件概覽 Bootstrap 彈出框（Popover） Bootstrap 附加導(dǎo)航（Affix） Bootstrap 滾動(dòng)監(jiān)聽（Scrollspy） Bootstrap 過渡效果（Transition） Bootstrap 警告框（Alert） Bootstrap 輪播（Carousel） Bootstrap 模態(tài)框（Modal）插件 Bootstrap 提示工具（Tooltip） Bootstrap 下拉菜單（Dropdown） Bootstrap 折疊（Collapse） Bootstrap 附錄 Bootstrap CSS編碼規(guī)范 Bootstrap HTML編碼規(guī)范 Bootstrap UI 編輯器
characters

Bootstrap 彈出框（Popover）

彈出框（Popover）與工具提示（Tooltip）類似，提供了一個(gè)擴(kuò)展的視圖。如需激活彈出框，用戶只需把鼠標(biāo)懸停在元素上即可。彈出框的內(nèi)容完全可使用 Bootstrap 數(shù)據(jù) API（Bootstrap Data API）來填充。該方法依賴于工具提示（tooltip）。

如果您想要單獨(dú)引用該插件的功能，那么您需要引用 popover.js，它依賴于 工具提示（Tooltip）插件。或者，正如 Bootstrap 插件概覽 一章中所提到，您可以引用 bootstrap.js 或壓縮版的 bootstrap.min.js。

用法

彈出框（Popover）插件根據(jù)需求生成內(nèi)容和標(biāo)記，默認(rèn)情況下是把彈出框（popover）放在它們的觸發(fā)元素后面。您可以有以下兩種方式添加彈出框（popover）：

  • 通過 data 屬性：如需添加一個(gè)彈出框（popover），只需向一個(gè)錨/按鈕標(biāo)簽添加 data-toggle="popover" 即可。錨的 title 即為彈出框（popover）的文本。默認(rèn)情況下，插件把彈出框（popover）設(shè)置在頂部。 
    <a?href="#"?data-toggle="popover"?title="Example?popover">
???請(qǐng)懸停在我的上面
</a>
  • 通過 JavaScript：通過 JavaScript 啟用彈出框（popover）： 
    $('#identifier').popover(options)

彈出框（Popover）插件不像之前所討論的下拉菜單及其他插件那樣，它不是純 CSS 插件。如需使用該插件，您必須使用 jquery 激活它（讀取 javascript）。使用下面的腳本來啟用頁面中的所有的彈出框（popover）：

$(function?()?{?$("[data-toggle='popover']").popover();?});

實(shí)例

下面的實(shí)例演示了通過 data 屬性使用彈出框（Popover）插件的用法。

<!DOCTYPE?html>
<html>
<head>
???<title>Bootstrap?實(shí)例?-?彈出框（Popover）插件</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="左側(cè)的?Popover?中的一些內(nèi)容">
??????左側(cè)的?Popover
???</button>
???<button?type="button"?class="btn?btn-primary"?title="Popover?title"??
??????data-container="body"?data-toggle="popover"?data-placement="top"?
??????data-content="頂部的?Popover?中的一些內(nèi)容">
??????頂部的?Popover
???</button>
???<button?type="button"?class="btn?btn-success"?title="Popover?title"??
??????data-container="body"?data-toggle="popover"?data-placement="bottom"?
??????data-content="底部的?Popover?中的一些內(nèi)容">
??????底部的?Popover
???</button>
???<button?type="button"?class="btn?btn-warning"?title="Popover?title"??
??????data-container="body"?data-toggle="popover"?data-placement="right"?
??????data-content="右側(cè)的?Popover?中的一些內(nèi)容">
??????右側(cè)的?Popover
???</button>
???</div>

???<script>$(function?()?
??????{?$("[data-toggle='popover']").popover();
??????});
???</script>
</div>

</body>
</html>

結(jié)果如下所示：

彈出框（Popover）插件

選項(xiàng)

有一些選項(xiàng)是通過 Bootstrap 數(shù)據(jù) API（Bootstrap Data API）添加或通過 JavaScript 調(diào)用的。下表列出了這些選項(xiàng)：

選項(xiàng)名稱 類型/默認(rèn)值 Data 屬性名稱 描述
animation boolean
默認(rèn)值：true 		data-animation 向彈出框應(yīng)用 CSS 褪色過渡效果。
html boolean
默認(rèn)值：false 		data-html 向彈出框插入 HTML。如果為 false，jQuery 的 text 方法將被用于向 dom 插入內(nèi)容。如果您擔(dān)心 XSS 攻擊，請(qǐng)使用 text。
placement string|function
默認(rèn)值：top 		data-placement 規(guī)定如何定位彈出框（即 top|bottom|left|right|auto）。
當(dāng)指定為 auto 時(shí)，會(huì)動(dòng)態(tài)調(diào)整彈出框。例如，如果 placement 是 "auto left"，彈出框?qū)?huì)盡可能顯示在左邊，在情況不允許的情況下它才會(huì)顯示在右邊。
selector string
默認(rèn)值：false 		data-selector 如果提供了一個(gè)選擇器，彈出框?qū)ο髮⒈晃傻街付ǖ哪繕?biāo)。
title string | function
默認(rèn)值：'' 		data-title 如果未指定 title 屬性，則 title 選項(xiàng)是默認(rèn)的 title 值。
trigger string
默認(rèn)值：'hover focus' 		data-trigger 定義如何觸發(fā)彈出框： click| hover | focus | manual。您可以傳遞多個(gè)觸發(fā)器，每個(gè)觸發(fā)器之間用空格分隔。
delay number | object
默認(rèn)值：0 		data-delay 延遲顯示和隱藏彈出框的毫秒數(shù) - 對(duì) manual 手動(dòng)觸發(fā)類型不適用。如果提供的是一個(gè)數(shù)字，那么延遲將會(huì)應(yīng)用于顯示和隱藏。如果提供的是對(duì)象，結(jié)構(gòu)如下所示： 
delay:
{?show:?500,?hide:?100?}
container string | false
默認(rèn)值：false 		data-container 向指定元素追加彈出框。
實(shí)例： container: 'body'

方法

下面是一些彈出框（Popover）插件中有用的方法：

方法 描述 實(shí)例
Options: .popover(options) 向元素集合附加彈出框句柄。 
$().popover(options)
Toggle: .popover('toggle') 切換顯示/隱藏元素的彈出框。 
$('#element').popover('toggle')
Show: .popover('show') 顯示元素的彈出框。 
$('#element').popover('show')
Hide: .popover('hide') 隱藏元素的彈出框。 
$('#element').popover('hide')
Destroy: .popover('destroy') 隱藏并銷毀元素的彈出框。 
$('#element').popover('destroy')

實(shí)例

下面的實(shí)例演示了彈出框（Popover）插件的方法：

<!DOCTYPE?html>
<html>
<head>
???<title>Bootstrap?實(shí)例?-?彈出框（Popover）插件方法</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?popover-show"?
??????title="Popover?title"?data-container="body"?
??????data-toggle="popover"?data-placement="left"?
??????data-content="左側(cè)的?Popover?中的一些內(nèi)容?——?show?方法">
??????左側(cè)的?Popover
???</button>
???<button?type="button"?class="btn?btn-primary?popover-hide"?
??????title="Popover?title"?data-container="body"?
??????data-toggle="popover"?data-placement="top"?
??????data-content="頂部的?Popover?中的一些內(nèi)容?——?hide?方法">
??????頂部的?Popover
???</button>
???<button?type="button"?class="btn?btn-success?popover-destroy"?
??????title="Popover?title"?data-container="body"?
??????data-toggle="popover"?data-placement="bottom"?
??????data-content="底部的?Popover?中的一些內(nèi)容?——?destroy?方法">
??????底部的?Popover
???</button>
???<button?type="button"?class="btn?btn-warning?popover-toggle"?
??????title="Popover?title"?data-container="body"?
??????data-toggle="popover"?data-placement="right"?
??????data-content="右側(cè)的?Popover?中的一些內(nèi)容?——?toggle?方法">
??????右側(cè)的?Popover
???</button><br><br><br><br><br><br>
???<p?class="popover-options">
??????<a?href="#"?type="button"?class="btn?btn-warning"?title="<h2>Title</h2>"??
?????????data-container="body"?data-toggle="popover"?data-content="
?????????<h4>Popover?中的一些內(nèi)容?——?options?方法</h4>">
?????????Popover
??????</a>
???</p>
???<script>
??????$(function?()?{?$('.popover-show').popover('show');});
??????$(function?()?{?$('.popover-hide').popover('hide');});
??????$(function?()?{?$('.popover-destroy').popover('destroy');});
??????$(function?()?{?$('.popover-toggle').popover('toggle');});
?????$(function?()?{?$(".popover-options?a").popover({html?:?true?});});
???</script>
</div>

</body>
</html>

結(jié)果如下所示：

彈出框（Popover）插件方法

事件

下表列出了彈出框（Popover）插件中要用到的事件。這些事件可在函數(shù)中當(dāng)鉤子使用。

事件 描述 實(shí)例
show.bs.popover 當(dāng)調(diào)用 show 實(shí)例方法時(shí)立即觸發(fā)該事件。 
$('#mypopover').on('show.bs.popover',?function?()?{
??//?執(zhí)行一些動(dòng)作...
})
shown.bs.popover 當(dāng)彈出框?qū)τ脩艨梢姇r(shí)觸發(fā)該事件（將等待 CSS 過渡效果完成）。 
$('#mypopover').on('shown.bs.popover',?function?()?{
??//?執(zhí)行一些動(dòng)作...
})
hide.bs.popover 當(dāng)調(diào)用 hide 實(shí)例方法時(shí)立即觸發(fā)該事件。 
$('#mypopover').on('hide.bs.popover',?function?()?{
??//?執(zhí)行一些動(dòng)作...
})
hidden.bs.popover 當(dāng)工具提示對(duì)用戶隱藏時(shí)觸發(fā)該事件（將等待 CSS 過渡效果完成）。 
$('#mypopover').on('hidden.bs.popover',?function?()?{
??//?執(zhí)行一些動(dòng)作...
})

實(shí)例

下面的實(shí)例演示了彈出框（Popover）插件的事件：

<!DOCTYPE?html>
<html>
<head>
???<title>Bootstrap?實(shí)例?-?彈出框（Popover）插件事件</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?clas="container"?style="padding:?100px?50px?10px;"?>
???<button?type="button"?class="btn?btn-primary?popover-show"?
??????title="Popover?title"?data-container="body"?
??????data-toggle="popover"?
??????data-content="左側(cè)的?Popover?中的一些內(nèi)容?——?show?方法">
??????左側(cè)的?Popover
???</button>

???</div>
???<script>
??????$(function?()?{?$('.popover-show').popover('show');});
??????$(function?()?{?$('.popover-show').on('shown.bs.popover',?function?()?{
??????alert("當(dāng)顯示時(shí)警告消息");
???})});
???</script>
</div>

</body>
</html>

結(jié)果如下所示：

彈出框（Popover）插件事件
Previous article： Next article：