深入了解Bootstrap中的彈出框-Bootstrap教程-PHP中文網

首頁

web前端

Bootstrap教程

深入了解Bootstrap中的彈出框

青灯夜游

Apr 15, 2021 am 11:14 AM

bootstrap彈出框

本篇文章給大家詳細介紹一下Bootstrap中的彈出框。有一定的參考價值，有需要的朋友可以參考一下，希望對大家有幫助。

深入了解Bootstrap中的彈出框

表面上看，彈出框其實就是一種特殊的提示框，只是多了一個標題而已。但實際上，還是有不同之處的。

基本用法

在製作提示框（tooltip）時，可以使用

於是最基本的用法如下

1、透過 title 屬性的值來定義標題(也可以使用自訂屬性src-title 來設定標題)，title優先權高

2、透過data-content屬性來設定內容

3、設定data-toggle="popover"

深入了解Bootstrap中的彈出框

# 4.使用以下js程式碼進行觸發

$('[data-toggle="popover"]').popover();

<button>点我弹出/隐藏弹出框</button>
<script>
$(function(){
    $(&#39;[data-toggle="popover"]&#39;).popover();

});    
</script>

#屬性參數

在彈出方塊製作時，可以在HTML中定義下表所列的自訂屬性

深入了解Bootstrap中的彈出框 [注意]data-palcement預設居右顯示，而不是居上顯示

<body style="margin-top:100px">
<button type="button" class="btn btn-default" data-toggle="popover" data-placement="top" title="标题" data-content="上侧" >上侧</button>
<button type="button" class="btn btn-default" data-toggle="popover" data-placement="bottom" title="标题" data-content="下侧" >下侧</button>
<button type="button" class="btn btn-default" data-toggle="popover" title="标题" data-content="无动画" data-animation="false" >无动画</button>
<button type="button" class="btn btn-default" data-toggle="popover" title="标题" data-content="有动画" >有动画</button>
<button type="button" class="btn btn-default" data-toggle="popover" title="标题" data-content="hover触发" data-trigger="hover">hover触发</button>
<button type="button" class="btn btn-default" data-toggle="popover" title="标题" data-content="click触发" data-trigger="click">click触发</button>
<button type="button" class="btn btn-default" data-toggle="popover" title="标题" data-content="不延迟">不延迟</button>
<button type="button" class="btn btn-default" data-toggle="popover" title="标题" data-content="延迟500ms" data-delay="500">延迟500ms</button>
<script>
$(function(){
    $(&#39;[data-toggle="popover"]&#39;).popover();

});    
</script>

JS觸發深入了解Bootstrap中的彈出框

popover的JS用法與tooltip的用法一樣，支援使用options物件的方法來向popover()方法傳參

$(element).popover(options);

options物件裡的參數包括amimation、html、placement、selector、original-title、title、trigger、delay、container、template

詳細情況

移步至此

<body style="margin-top:50px">
<button type="button" class="btn btn-default" data-toggle="popover" >按钮</button>
<script>
$(function(){
    $(&#39;[data-toggle="popover"]&#39;).popover({
        title:"我是标题",
        content:&#39;我是内容&#39;
    });
});    
</script>

【關鍵字】

　　除了使用options對象，還可以使用關鍵字，'show'、'hide'、'toggle'、'destroy '

<body style="margin-top:100px;">
<button type="button" class="btn btn-default" data-toggle="popover" data-placement="top" title="标题" data-content="内容" id="btn1">按钮1</button>
<button type="button" class="btn btn-default" data-toggle="popover" data-placement="top" title="标题" data-content="内容"  id="btn2">按钮2</button>
<button type="button" class="btn btn-default" data-toggle="popover" data-placement="top" title="标题" data-content="内容"  id="btn3">按钮3</button>
<button type="button" class="btn btn-default" data-toggle="popover" data-placement="top" title="标题" data-content="内容"  id="btn4">按钮4</button>
<script>
$(function(){
    $(&#39;#btn1&#39;).popover(&#39;show&#39;);//显示弹出框
    $(&#39;#btn2&#39;).popover(&#39;hide&#39;);//关闭弹出框
    $(&#39;#btn3&#39;).popover(&#39;toggle&#39;);//反转弹出框
    $(&#39;#btn4&#39;).popover(&#39;destroy&#39;);//隐藏并销毁弹出框
});    
</script>

【事件】

#該外掛程式支援5種類型的事件訂閱

show.bs.tooltip        show方法调用之后立即触发该事件
shown.bs.tooltip   　　 此事件在tooltip已经显示出来（并且同时在 CSS 过渡效果完成）之后被触发
hide.bs.tooltip        hide方法调用之后立即触发该事件。
hidden.bs.tooltip    　此事件在tooltip被隐藏（并且同时在 CSS 过渡效果完成）之后被触发
inserted.bs.tooltip    当tooltip模板加载到DOM中上时，在show.bs.tooltip触发后，触发该事件

<body style="margin-top:50px;">
<button type="button" class="btn btn-default" data-toggle="popover" data-placement="right" title="标题" data-content="内容" id="btn">按钮</button>
<script>
$(function(){
    $(&#39;#btn&#39;).popover();
    $("#btn").on("show.bs.popover",function(e){
        $(this).html(&#39;关闭&#39;);    
    }).on("hide.bs.popover",function(e){
        $(this).html(&#39;打开&#39;);
    })

});    
</script>

####比較提示框#########1、提示框tooltip 的預設觸發事件是 hover 和 focus，而彈出框popover 是 click######2、提示框tooltip 只有一個內容(title)，而彈出框不僅可以設定標題（title）還可以設定內容(content)######3、提示框tooltip 預設居上顯示，而彈出框popover 預設居右顯示######4、顯示範本不同######提示框tooltip的範本：###

<div>
    <div></div>
    <div></div>
</div>

###彈出框popover的範本：###

<div>
    <div></div>
    <h3></h3>
    <div></div>
</div>

###更多程式相關知識，請造訪：###程式設計教學###！！ ###

以上是深入了解Bootstrap中的彈出框的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文轉載於：博客园。如有侵權，請聯絡admin@php.cn刪除

Bootstrap是用什麼？一個實用的解釋Apr 24, 2025 am 12:16 AM

bootstrapisapowerfulflameworkthatsimplifiesCreatingingResponsive，移動 - firstwebsites.itoffers.itoffers：1）AgridSystemforadaptableBableLayouts，2）2）pre-styledlementslikeButtonslikeButtonSandForms和3）JavaScriptCompriptcomponcomponentsSuchcaroSelSuselforEnhanceSuch forenhanceTinteractivity。

引導程序：從佈局到組件Apr 23, 2025 am 12:06 AM

Bootstrap是一個由Twitter開發的前端框架，集成了HTML、CSS和JavaScript，幫助開發者快速構建響應式網站。其核心功能包括：柵格系統與佈局：基於12列的設計，使用flexbox佈局，支持不同設備尺寸的響應式頁面。組件與樣式：提供豐富的組件庫，如按鈕、模態框等，通過添加類名即可實現美觀效果。工作原理：依賴CSS和JavaScript，CSS使用LESS或SASS預處理器，JavaScript依賴jQuery，實現交互和動態效果。通過這些功能，Bootstrap大大提升了開發

什麼是bootstrap？初學者的介紹Apr 22, 2025 am 12:07 AM

BootstrapisafreeCSSframeworkthatsimplifieswebdevelopmentbyprovidingpre-styledcomponentsandJavaScriptplugins.It'sidealforcreatingresponsive,mobile-firstwebsites,offeringaflexiblegridsystemforlayoutsandasupportivecommunityforlearningandcustomization.

Bootstrap Demystified：一個簡單的解釋Apr 21, 2025 am 12:13 AM

Bootstrapisafree,open-sourceCSSframeworkthathelpscreateresponsive,mobile-firstwebsites.1)Itoffersagridsystemforlayoutflexibility,2)includespre-styledcomponentsforquickdesign,and3)ishighlycustomizabletoavoidgenericlooks,butrequiresunderstandingCSStoop