上一篇：Bootstrap4 提示框下一篇：Bootstrap4 滾動監(jiān)聽

Bootstrap4 彈出框

彈出框控件類似于提示框，它在鼠標(biāo)點(diǎn)擊到元素后顯示，與提示框不同的是它可以顯示更多的內(nèi)容。

如何創(chuàng)建彈出框

通過向元素添加 data-toggle="popover" 來來創(chuàng)建彈出框。

title 屬性的內(nèi)容為彈出框的標(biāo)題，data-content 屬性顯示了彈出框的文本內(nèi)容：

注意: 彈出框要寫在 jQuery 的初始化代碼里: 然后在指定的元素上調(diào)用 popover() 方法。

以下實(shí)例可以在文檔的任何地方使用彈出框：

實(shí)例

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

運(yùn)行代碼 ?

指定彈出框的位置

默認(rèn)情況下彈出框顯示在元素右側(cè)。

可以使用 data-placement 屬性來設(shè)定彈出框顯示的方向: top, bottom, left 或 right:

實(shí)例

運(yùn)行代碼 ?

按鈕中使用:

實(shí)例

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> Popover on top </button> <button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> Popover on right </button> <button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> Popover on bottom </button> <button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> Popover on left </button>

運(yùn)行代碼 ?