1. 動畫過渡 Transition

Bootstrap 對一些組件默認使用過渡動畫效果，這種效果是由 CSS3 實現，故不支持 IE 6-8。

模態彈窗 (Modal) 的滑動和漸變效果；

選項卡 (Tab) 的漸變效果；

警告框 (Alert) 的漸變效果；

圖片輪播 (Carousel) 的滑動效果；

2. 模態彈窗 Modal

Bootstrap 模態彈窗通常有以下表現——

點擊某按鈕后彈窗，彈窗內容為文件描述、圖片等，也可帶有按鈕操作；

模態彈窗固定在瀏覽器中；

模態彈窗寬度自適應，且 .modal-dialog 水平居中；

當渲染視界寬度大于 768px 時，模態彈出窗的寬度為 600px；

窗體彈出時，底部有一層透明的黑色蒙版效果；

.modal>.modal-dialog>.modal-content>(.modal-header+.modal-body+.modal-footer)

2.1. 彈窗結構

模態彈窗的真正內容都放置在 .modal-content 中，其主要設置了彈窗的邊框、邊距、背景色和陰影等樣式。包括三個部分——

彈出框頭部 .modal-header：主要包括標題和關閉按鈕；

彈出框主體 .modal-body：彈出框的主要內容；

彈出框腳部 .modal-footer：主要放置操作按鈕；

其中，.modal-footer 通常用來放置按鈕，已對其包含的按鈕做了一定的樣式處理。

2.2. 彈窗尺寸

.modal-dialog.modal-lg；

.modal-dialog.modal-sm；

2.3. 彈窗動畫

.modal.fade 模態彈窗將有一個過渡動畫效果；

2.4. 彈窗觸發

1) 通過屬性觸發彈窗

為觸發按鈕設置 [data-toggle="modal" data-target]；

其中 data-target 屬性指定為模態彈窗 .modal 的 ID 或者 CSS 選擇符；

若使用 a 元素作為觸發模態彈窗的按鈕，則可用 href 屬性替代 data-target；

彈窗屬性觸發 data- 參數設置一覽表

2) 通過 JS 觸發彈窗

a. 屬性設置

彈窗 JS 觸發屬性一覽表

示例：

$(function(){

$('.btn').click(function () {

$('#mymodal‘’).modal({

keyboard: false

});

});

});

b. 參數設置

參數

使用方法

描述

toggle

$('#mymodal').modal('toggle')

觸發時，反轉模態彈窗的狀態。若模態彈窗顯示，則關閉；反之則顯示

show

$('#mymodal').modal('show')

觸發時，顯示模態彈窗

hide

$('#mymodal').modal('hide')

觸發時，關閉模態彈窗

c. 事件設置

事件類型

描述

show.bs.modal

在 show 方法調用時立即觸發(尚未顯示之前)；如果單擊了一個元素，那么該元素將作為事件的 relatedTarget 屬性

shown.bs.modal

該事件在模態彈窗完全顯示后(并且等 CSS 動畫完成之后)觸發；如果單擊了一個元素，那么該元素將作為 relatedTarget 事件

hide.bs.modal

在 hide 方法調用時(但還未關閉隱藏)立即觸發

hidden.bs.modal

該事件在模態彈窗完全關閉后(并且 CSS 動畫完成之后)觸發

示例：

$('#myModal').on('hidden.bs.modal',

function (e) {

// 處理代碼...

}

)

3. 下拉菜單 Dropdown

下拉菜單一般出現在導航條中。

ul.nav.navbar-nav>li.dropdown>(a[data-toggle="dropdown" data-target="#"]>b.caret+ul.dropdown-menu>li>a)

3.1. 下拉菜單觸發

1) 通過屬性觸發下拉菜單

對菜單項鏈接或按鈕添加 data-toggle="dropdown" 屬性；

為避免點擊鏈接導致頁面跳到頂部，可用 data-target="#" 替代

href="#"；

2) 通過 JS 觸發下拉菜單

dropdown() 方法：單擊按鈕后彈出菜單，再次單擊時收起菜單：

$(function(){

$('.dropdown-toggle').dropdown();

})

使用 toggle 參數：當菜單隱藏時，單擊后顯示菜單；反之，當菜單顯示時，單擊后隱藏菜單。

$('.dropdown-toggle').one('click',function(){

$(this).dropdown('toggle');

})

4. 滾動監視 Scrollspy

當用戶鼠標滾動時，滾動條的位置會自動更新導航條中相應的導航項；

用戶拖動滾動條，當滾動到特定板塊上時，上方相應的導航項就會高亮顯示；

4.1. 滾動監視觸發

1) 通過屬性觸發滾動監視

導航區設置：ul.nav#nav>(li.active>a[href="#id0"])+(li>a[href="#id1"])+...；

監控區設置：[data-target="#nav" data-spy="scroll" data-offset="60"]>#id0+#id1+...；

監控區 data-target 屬性需與導航區 .nav 的 ID 一致，監控區子項的 ID 則需與導航區子項中的 href 屬性一一對應；

定義監控區樣式，設置容器以產生垂直滾動條：

.scrollspy {

height: 500px;

font-size: 20px;

overflow: auto;

}

可在 body 中加監控：將 data-spy、data-target 等追加在 body 中，但導航條必須設置為頂部固定樣式 .navbar.navbar-default.navbar-fixed-top；

2) 通過 JS 觸發滾動監視

直接觸發：

$(function(){

$('#scrollspy').scrollspy({

target: '#nav'

});

})

scrollspy() 除 target 參數外，還有一個 offset 參數，其默認值為

10；

滾動監控所作用的 DOM 有增刪頁面元素的操作時，需要調用

scrollspy('refresh') 方法：

$(function(){

$('[data-spy="scroll"]').each(function(){

var $spy=$(this).scrollspy('refresh');

})

})

需要注意的是，該方法只對屬性觸發有效。

5. 選項卡 Tab

5.1. 選項卡觸發

1) 通過屬性觸發選項卡

與菜單結合的選項卡：ul.nav.nav-tabs>li(.active)>a[data-toggle="tab" href="#id"]；

膠囊式導航 .nav-pill 也有選項卡的功能：ul.nav.nav-pills>li(.active)>a[data-toggle="pill" href="#id"]；

底部的可切換面板：.tab-content>#id.tab-pane.fade(.in.active)

添加 fade 類名可使面板的隱藏與顯示在切換的過程效果更流暢，產生漸入的效果；在添加 fade 類名的元素要追加 in 類名才會顯示；

2) 通過 JS 觸發選項卡

在選項的單擊事件中調用 tab('show') 方法，顯示對應的標簽面板內容。(此方法不再需要 data-toggle="tab" 或 data-toggle="pill" 自定義屬性)——

$(function(){

$('#myTab a').click(function (ev) {

ev.preventDefault();

$(this).tab('show');

});

})

6. 提示框 Tooltip

6.1. 提示框觸發

Bootstrap 提示框不能直接由自定義屬性觸發，需要通過 JS 觸發。

1) 設置提示框屬性

常用 a 或 button：[data-toggle="tooltip"]；

設置 data-original-title 或 title 用于存放提示信息(若同時設置，則 data-original-title 優先級高于 title)；

設置 data-placement 控制提示信息框的四種位置：top、right、bottom 和 left；

提示框屬性觸發 data- 參數設置一覽表

2) 通過 JS 觸發提示框

指定屬性周全的元素觸發——

$(function(){

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

});

指定元素，追加參數后觸發——

$(function(){

$('#myTooltip').tooltip({

title: '我是一個提示框，我在頂部出現',

placement: 'top'

});

});

彈窗 JS 觸發屬性一覽表

7. 彈出框 Popover

Bootstrap 彈出框外表與提示框差不多，不同在于：彈出框除了有標題

title 以外還增加了內容 content 部分；樣式風格上彈出框有邊框、圓角、背景、陰影以及三角形等樣式；提示框的默認觸發事件是 hover 和 focus，而彈出框是 click。

7.1. 彈出框觸發

與提示框一樣，彈出框也只能通過 JS 觸發。

1) 設置彈出框屬性

常用 a 或 button：[data-toggle="popover" data-original-title="提示信息" data-placement=""]；

比提示框多出 data-content="提示內容" 屬性；

彈出框屬性觸發 data- 參數設置一覽表

2) 通過 JS 觸發彈出框

指定屬性周全的元素觸發——

$(function(){

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

});

指定元素，追加參數后觸發——

$(function(){

$('#myPopover').popover({

title:"我是彈出框的標題",

content:"我是彈出框的內容",

placement:"top"

});

});

8. 警告框 Alert

Bootstrap 警告框插件是在警示框組件的基礎上添加單擊 X 能關閉警告框的功能。

8.1. 通過屬性關閉警告框

×

恭喜您操作成功！

關閉按鈕，不一定非要用 X，可以是普通的按鈕元素或者鏈接元素，只需要保證關閉元素帶有 data-dismiss="alert" 屬性即可。

關閉按鈕時，首先會查找 data-target 屬性，再查找 href 屬性，如果關閉按鈕都沒有定義這兩個屬性，就會操作其父元素。即，關閉按鈕不在

.alert 容器內時，只要關閉按鈕的 data-target(或者 a 元素的

href)屬性值與 .alert 容器 ID 一致，則關閉元素放在容器外也可以關閉警告框。

8.2. 通過 JS 關閉警告框

$(function(){

$('#close').on('click', function(){

$(this).alert('close');

});

});

9. 按鈕 Button

9.1. 按鈕加載狀態

a) 通過屬性提供單擊加載狀態

class="btn btn-primary"

id="loaddingBtn"

data-loading-text="正在加載中,請稍等..."

type="button" >

加載

b) 通過 JS 提供單擊加載狀態

$(function(){

$('#loaddingBtn').click(function () {

$(this).button('loading');

});

});

9.2. 單選按鈕

.btn-group[data-toggle="buttons"]>label>input#id[type="radio" name]

9.3. 復選按鈕

.btn-group[data-toggle="buttons"]>label>input#id[type="checkbox" name]

9.4. 按鈕狀態切換

a) 通過屬性切換按鈕狀態

button[data-toggle="button"]

b) 通過 JS 切換按鈕狀態

切換按鈕狀態(得到焦點)：

$('#myButton').button('toggle');

重新恢復按鈕：

$('#myButton').button('reset');

任意參數：

$('#myButton').button('任意字符參數名');

可替換 data-任意字符參數名-text 的屬性值為「按鈕上顯示的文本值」。

10. 折疊 Collapse

每個標題對應一個內容，這兩個部分組合起來稱為一個 panel 面板，多個 panel 構成 panel-group 面板組，即手風琴折疊的結構。

10.1. 聲明式觸發

#accordion.panel-group>.panel.panel-accordion.panel-default>(.panel-heading>hn.panel-title>a[href="#id" / data-target="#id" data-toggle="collapse" data-parent="#accordion"])+(#id.panel-collapse>.panel-body)

.panel-collapse 一級追加 collapse 類名后可使之不可視，按需追加；默認打開的項則再追加 in 類名；

11. 圖片輪播 Carousel

一個輪播圖片主要包括三個部分——

輪播圖片

輪播圖片計數器

輪播圖片控制器

#id.carousel.slide>{[ol.carousel-indicators>(li(.active))]+

.carousel-inner>.item(.active)>a>img}

若要添加圖片文字說明，可在 img 后添加：

圖片標題

描述內容...

前后控制器代碼(放置在最后)：

11.2. 通過屬性觸發圖片輪播

data-ride="carousel"；

data-target="#id"：取值 carousel 定義的 ID 名或者其他樣式識別符；

data-slide="prev/next"：該屬性值同樣定義在輪播圖控制器的 a 鏈接上，同時設置控制器 href="#id"，取值為容器 carousel 的 ID 名或其他樣式識別符；

data-slide-to：用來傳遞某個幀的下標，取數值，可直接跳轉到這個指定的幀(下標從 0 開始計)。

data- 屬性一覽表：

屬性名稱

類型

默認值

描述

data-interval

number

5000

幻燈片輪換的等待時間(毫秒)。如果為false,輪播將不會自動開始循環

data-pause

string

hover

默認鼠標懸停留在幻燈片區域即停止播放，離開即開始播放

data-wrap

布爾值

true

輪播是否持續循環

示例——

...

11.3. 通過 JS 觸發圖片輪播

$('.carousel/#id').carousel({

...// 參數

});

JS 屬性一覽表：

屬性名稱

類型

默認值

描述

interval

number

5000

幻燈片輪換的等待時間(毫秒)。如果為false,輪播將不會自動開始循環

pause

string

hover

默認鼠標懸停留在幻燈片區域即停止播放，離開即開始播放

wrap

布爾值

true

輪播是否持續循環

特殊調用方法：

.carousel('cycle')：從左向右循環播放；

.carousel('pause')：停止循環播放；

.carousel('number')：循環到指定的幀，下標從 0 開始；

.carousel('prev')：返回到上一幀；

.carousel('next')：下一幀；

12. 固定定位 Affix

Affix 的主要功能是使某個需要固定的元素在瀏覽器窗口中固定(元素帶有 affix 類名固定)和不固定(元素不帶有 affix 類名)的效果。

Affix 效果常見的有以下三種——

頂部固定

側邊欄固定

底部固定

12.1. 通過屬性觸發固定定位

data-spy="affix"：表示元素固定不變的；

data-offset="整數值"：表示元素 top 和 bottom 的值都是該數值，其包括兩種方式——data-offset-top 和 data-offset-bottom，可單獨以這兩種方式表現；

注意：需聲明監控：

13. 自定義配置

Bootstrap 組件

Bootstrap 插件

Bootstrap 的 LESS 版本變量設置

組件設置提供了公共樣式 Common CSS，U I組件 Components 和 JS 組件 JavaScript components 三個部分。

總結

以上是生活随笔為你收集整理的bootstrap 彈窗默認打開_Bootstrap 手册 07 - JS 组件篇的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。