国产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 分頁(yè) Bootstrap 徽章（Badges） Bootstrap 進(jìn)度條 Bootstrap 警告（Alerts） Bootstrap 列表組 Bootstrap 面板（Panels） Bootstrap 面包屑導(dǎo)航（Breadcrumbs） Bootstrap 輸入框組 Bootstrap 縮略圖 Bootstrap 下拉菜單（Dropdowns） Bootstrap 頁(yè)面標(biāo)題（Page Header） Bootstrap 字體圖標(biāo)(Glyphicons) Bootstrap 插件 Bootstrap 按鈕（Button） Bootstrap 標(biāo)簽頁(yè)（Tab） Bootstrap 插件概覽 Bootstrap 彈出框（Popover） Bootstrap 附加導(dǎo)航（Affix） Bootstrap 滾動(dòng)監(jiān)聽（Scrollspy） Bootstrap 過(guò)渡效果（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 折疊（Collapse）

折疊（Collapse）插件可以很容易地讓頁(yè)面區(qū)域折疊起來(lái)。無(wú)論您用它來(lái)創(chuàng)建折疊導(dǎo)航還是內(nèi)容面板，它都允許很多內(nèi)容選項(xiàng)。

如果您想要單獨(dú)引用該插件的功能，那么您需要引用 collapse.js。同時(shí)，也需要在您的 Bootstrap 版本中引用 Transition（過(guò)渡）插件?；蛘撸?Bootstrap 插件概覽 一章中所提到，您可以引用 bootstrap.js 或壓縮版的 bootstrap.min.js。

您可以使用折疊（Collapse）插件：

  • 創(chuàng)建可折疊的分組或折疊面板（accordion），如下所示： 
    <!DOCTYPE?html>
<html>
<head>
???<title>Bootstrap?實(shí)例?-?折疊面板</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="panel-group"?id="accordion">
??<div?class="panel?panel-default">
????<div?class="panel-heading">
??????<h4?class="panel-title">
????????<a?data-toggle="collapse"?data-parent="#accordion"?
??????????href="#collapseOne">
??????????點(diǎn)擊我進(jìn)行展開，再次點(diǎn)擊我進(jìn)行折疊。第?1?部分
????????</a>
??????</h4>
????</div>
????<div?id="collapseOne"?class="panel-collapse?collapse?in">
??????<div?class="panel-body">
????????Nihil?anim?keffiyeh?helvetica,?craft?beer?labore?wes?anderson?
????????cred?nesciunt?sapiente?ea?proident.?Ad?vegan?excepteur?butcher?
????????vice?lomo.
??????</div>
????</div>
??</div>
??<div?class="panel?panel-default">
????<div?class="panel-heading">
??????<h4?class="panel-title">
????????<a?data-toggle="collapse"?data-parent="#accordion"?
??????????href="#collapseTwo">
??????????點(diǎn)擊我進(jìn)行展開，再次點(diǎn)擊我進(jìn)行折疊。第?2?部分
????????</a>
??????</h4>
????</div>
????<div?id="collapseTwo"?class="panel-collapse?collapse">
??????<div?class="panel-body">
????????Nihil?anim?keffiyeh?helvetica,?craft?beer?labore?wes?anderson?
????????cred?nesciunt?sapiente?ea?proident.?Ad?vegan?excepteur?butcher?
????????vice?lomo.
??????</div>
????</div>
??</div>
??<div?class="panel?panel-default">
????<div?class="panel-heading">
??????<h4?class="panel-title">
????????<a?data-toggle="collapse"?data-parent="#accordion"?
??????????href="#collapseThree">
??????????點(diǎn)擊我進(jìn)行展開，再次點(diǎn)擊我進(jìn)行折疊。第?3?部分
????????</a>
??????</h4>
????</div>
????<div?id="collapseThree"?class="panel-collapse?collapse">
??????<div?class="panel-body">
????????Nihil?anim?keffiyeh?helvetica,?craft?beer?labore?wes?anderson?
????????cred?nesciunt?sapiente?ea?proident.?Ad?vegan?excepteur?butcher?
????????vice?lomo.
??????</div>
????</div>
??</div>
</div>

</body>
</html>

    結(jié)果如下所示：

    折疊面板
    1. data-toggle="collapse" 添加到您想要展開或折疊的組件的鏈接上。
    2. href 或 data-target 屬性添加到父組件，它的值是子組件的 id。
    3. data-parent 屬性把折疊面板（accordion）的 id 添加到要展開或折疊的組件的鏈接上。
  • 創(chuàng)建不帶 accordion 標(biāo)記的簡(jiǎn)單的可折疊組件（collapsible），如下所示： 
    <!DOCTYPE?html>
<html>
<head>
???<title>Bootstrap?實(shí)例?-?簡(jiǎn)單的可折疊組件</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>

<button?type="button"?class="btn?btn-primary"?data-toggle="collapse"?
???data-target="#demo">
???簡(jiǎn)單的可折疊組件
</button>

<div?id="demo"?class="collapse?in">
??Nihil?anim?keffiyeh?helvetica,?craft?beer?labore?wes?anderson?
??cred?nesciunt?sapiente?ea?proident.?Ad?vegan?excepteur?butcher?
??vice?lomo.
</div>

</body>
</html>

    結(jié)果如下所示：

    簡(jiǎn)單的可折疊組件

    正如您在實(shí)例中看到的，我們創(chuàng)建了一個(gè)可折疊的組件，與折疊面板（accordion）不同，我們沒(méi)有添加屬性 data-parent。

用法

下表列出了折疊（Collapse）插件用于處理繁重的伸縮的 class：

Class 描述 實(shí)例
.collapse 隱藏內(nèi)容。 實(shí)例 ?
.collapse.in 顯示內(nèi)容。 實(shí)例 ?
.collapsing 當(dāng)過(guò)渡效果開始時(shí)被添加，當(dāng)過(guò)渡效果完成時(shí)被移除。 ?

您可以通過(guò)以下兩種方式使用折疊（Collapse）插件：

  • 通過(guò) data 屬性：向元素添加 data-toggle="collapse" 和 data-target，自動(dòng)分配可折疊元素的控制。data-target 屬性接受一個(gè) CSS 選擇器，并會(huì)對(duì)其應(yīng)用折疊效果。請(qǐng)確保向可折疊元素添加 class .collapse。如果您希望它默認(rèn)情況下是打開的，請(qǐng)?zhí)砑宇~外的 class .in。

    為了向可折疊控件添加類似折疊面板的分組管理，請(qǐng)?zhí)砑?data 屬性 data-parent="#selector"。

  • 通過(guò) JavaScript：可通過(guò) JavaScript 激活 collapse 方法，如下所示： 
    $('.collapse').collapse()

選項(xiàng)

有一些選項(xiàng)是通過(guò) data 屬性或 JavaScript 來(lái)傳遞的。下表列出了這些選項(xiàng)：

選項(xiàng)名稱 類型/默認(rèn)值 Data 屬性名稱 描述
parent selector
默認(rèn)值：false 		data-parent 如果提供了一個(gè)選擇器，當(dāng)可折疊項(xiàng)目顯示時(shí)，指定父元素下的所有可折疊的元素將被關(guān)閉。這與創(chuàng)痛的折疊面板（accordion）的行為類似 - 這依賴于 accordion-group 類。
toggle boolean
默認(rèn)值：true 		data-toggle 切換調(diào)用可折疊元素。

方法

下面是一些折疊（Collapse）插件中有用的方法：

方法 描述 實(shí)例
Options: .collapse(options) 激活內(nèi)容為可折疊元素。接受一個(gè)可選的 options 對(duì)象。 
$('#identifier').collapse({
??toggle:?false
})
Toggle: .collapse('toggle') 切換顯示/隱藏可折疊元素。 
$('#identifier').collapse('toggle')
Show: .collapse('show') 顯示可折疊元素。 
$('#identifier').collapse('show')
Hide: .collapse('hide') 隱藏可折疊元素。 
$('#identifier').collapse('hide')

實(shí)例

下面的實(shí)例演示了方法的用法：

<!DOCTYPE?html>
<html>
<head>
???<title>Bootstrap?實(shí)例?-?折疊（Collapse）插件方法</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="panel-group"?id="accordion">
???<div?class="panel?panel-default">
??????<div?class="panel-heading">
?????????<h4?class="panel-title">
????????????<a?data-toggle="collapse"?data-parent="#accordion"?
???????????????href="#collapseOne">
???????????????點(diǎn)擊我進(jìn)行展開，再次點(diǎn)擊我進(jìn)行折疊。第?1?部分--hide?方法
????????????</a>
?????????</h4>
??????</div>
??????<div?id="collapseOne"?class="panel-collapse?collapse?in">
?????????<div?class="panel-body">
????????????Nihil?anim?keffiyeh?helvetica,?craft?beer?labore?wes?anderson?cred?
????????????nesciunt?sapiente?ea?proident.?Ad?vegan?excepteur?butcher?vice?
????????????lomo.
?????????</div>
??????</div>
???</div>
???<div?class="panel?panel-success">
??????<div?class="panel-heading">
?????????<h4?class="panel-title">
????????????<a?data-toggle="collapse"?data-parent="#accordion"?
???????????????href="#collapseTwo">
???????????????點(diǎn)擊我進(jìn)行展開，再次點(diǎn)擊我進(jìn)行折疊。第?2?部分--show?方法
????????????</a>
?????????</h4>
??????</div>
??????<div?id="collapseTwo"?class="panel-collapse?collapse">
?????????<div?class="panel-body">
????????????Nihil?anim?keffiyeh?helvetica,?craft?beer?labore?wes?anderson?cred?
????????????nesciunt?sapiente?ea?proident.?Ad?vegan?excepteur?butcher?vice?
????????????lomo.
?????????</div>
??????</div>
???</div>
???<div?class="panel?panel-info">
??????<div?class="panel-heading">
?????????<h4?class="panel-title">
????????????<a?data-toggle="collapse"?data-parent="#accordion"?
???????????????href="#collapseThree">
???????????????點(diǎn)擊我進(jìn)行展開，再次點(diǎn)擊我進(jìn)行折疊。第?3?部分--toggle?方法
????????????</a>
?????????</h4>
??????</div>
??????<div?id="collapseThree"?class="panel-collapse?collapse">
?????????<div?class="panel-body">
????????????Nihil?anim?keffiyeh?helvetica,?craft?beer?labore?wes?anderson?cred?
????????????nesciunt?sapiente?ea?proident.?Ad?vegan?excepteur?butcher?vice?
????????????lomo.
?????????</div>
??????</div>
???</div>
???<div?class="panel?panel-warning">
??????<div?class="panel-heading">
?????????<h4?class="panel-title">
????????????<a?data-toggle="collapse"?data-parent="#accordion"?
???????????????href="#collapseFour">
???????????????點(diǎn)擊我進(jìn)行展開，再次點(diǎn)擊我進(jìn)行折疊。第?4?部分--options?方法
????????????</a>
?????????</h4>
??????</div>
??????<div?id="collapseFour"?class="panel-collapse?collapse">
?????????<div?class="panel-body">
????????????Nihil?anim?keffiyeh?helvetica,?craft?beer?labore?wes?anderson?cred?
????????????nesciunt?sapiente?ea?proident.?Ad?vegan?excepteur?butcher?vice?
????????????lomo.
?????????</div>
??????</div>
???</div>
</div>
<script?type="text/javascript">
???$(function?()?{?$('#collapseFour').collapse({
??????toggle:?false
???})});
???$(function?()?{?$('#collapseTwo').collapse('show')});
???$(function?()?{?$('#collapseThree').collapse('toggle')});
???$(function?()?{?$('#collapseOne').collapse('hide')});
</script>??

</body>
</html>

結(jié)果如下所示：

折疊（Collapse）插件方法

事件

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

事件 描述 實(shí)例
show.bs.collapse 在調(diào)用 show 方法后觸發(fā)該事件。 
$('#identifier').on('show.bs.collapse',?function?()?{
??//?執(zhí)行一些動(dòng)作...
})
shown.bs.collapse 當(dāng)折疊元素對(duì)用戶可見時(shí)觸發(fā)該事件（將等待 CSS 過(guò)渡效果完成）。 
$('#identifier').on('shown.bs.collapse',?function?()?{
??//?執(zhí)行一些動(dòng)作...
})
hide.bs.collapse 當(dāng)調(diào)用 hide 實(shí)例方法時(shí)立即觸發(fā)該事件。 
$('#identifier').on('hide.bs.collapse',?function?()?{
??//?執(zhí)行一些動(dòng)作...
})
hidden.bs.collapse 當(dāng)折疊元素對(duì)用戶隱藏時(shí)觸發(fā)該事件（將等待 CSS 過(guò)渡效果完成）。 
$('#identifier').on('hidden.bs.collapse',?function?()?{
??//?執(zhí)行一些動(dòng)作...
})

實(shí)例

下面的實(shí)例演示了事件的用法：

<!DOCTYPE?html>
<html>
<head>
???<title>Bootstrap?實(shí)例?-?折疊（Collapse）插件事件</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="panel-group"?id="accordion">
???<div?class="panel?panel-info">
??????<div?class="panel-heading">
?????????<h4?class="panel-title">
????????????<a?data-toggle="collapse"?data-parent="#accordion"?
???????????????href="#collapseexample">
???????????????點(diǎn)擊我進(jìn)行展開，再次點(diǎn)擊我進(jìn)行折疊。--shown?事件
????????????</a>
?????????</h4>
??????</div>
??????<div?id="collapseexample"?class="panel-collapse?collapse">
?????????<div?class="panel-body">
????????????Nihil?anim?keffiyeh?helvetica,?craft?beer?labore?wes?anderson?
????????????cred?nesciunt?sapiente?ea?proident.?
????????????Ad?vegan?excepteur?butcher?vice?lomo.
?????????</div>
??????</div>
???</div>
</div>

<script?type="text/javascript">
???$(function?()?{?
??????$('#collapseexample').on('show.bs.collapse',?function?()?{
?????????alert('嘿，當(dāng)您展開時(shí)會(huì)提示本警告');})
???});
</script>?


</body>
</html>

結(jié)果如下所示：

折疊（Collapse）插件事件
Previous article： Next article：