亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

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)實例：堆疊的水平 Bootstrap 網(wǎng)格系統(tǒng)實例：手機、平板電腦、臺式電腦 Bootstrap 網(wǎng)格系統(tǒng)實例：中型和大型設(shè)備 Bootstrap 響應(yīng)式實用工具 Bootstrap 布局組件 Bootstrap Well Bootstrap 按鈕下拉菜單 Bootstrap 按鈕組 Bootstrap 標(biāo)簽 Bootstrap 超大屏幕（Jumbotron） Bootstrap 導(dǎo)航欄 Bootstrap 導(dǎo)航元素 Bootstrap 多媒體對象（Media Object） Bootstrap 分頁 Bootstrap 徽章（Badges） Bootstrap 進度條 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 滾動監(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 折疊（Collapse）

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

如果您想要單獨引用該插件的功能，那么您需要引用 collapse.js。同時，也需要在您的 Bootstrap 版本中引用 Transition（過渡）插件。或者，正如 Bootstrap 插件概覽 一章中所提到，您可以引用 bootstrap.js 或壓縮版的 bootstrap.min.js。

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

  • 創(chuàng)建可折疊的分組或折疊面板（accordion），如下所示： 
    <!DOCTYPE?html>
<html>
<head>
???<title>Bootstrap?實例?-?折疊面板</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">
??????????點擊我進行展開，再次點擊我進行折疊。第?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">
??????????點擊我進行展開，再次點擊我進行折疊。第?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">
??????????點擊我進行展開，再次點擊我進行折疊。第?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)記的簡單的可折疊組件（collapsible），如下所示： 
    <!DOCTYPE?html>
<html>
<head>
???<title>Bootstrap?實例?-?簡單的可折疊組件</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">
???簡單的可折疊組件
</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é)果如下所示：

    簡單的可折疊組件

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

用法

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

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

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

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

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

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

選項

有一些選項是通過 data 屬性或 JavaScript 來傳遞的。下表列出了這些選項：

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

方法

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

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

實例

下面的實例演示了方法的用法：

<!DOCTYPE?html>
<html>
<head>
???<title>Bootstrap?實例?-?折疊（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">
???????????????點擊我進行展開，再次點擊我進行折疊。第?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">
???????????????點擊我進行展開，再次點擊我進行折疊。第?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">
???????????????點擊我進行展開，再次點擊我進行折疊。第?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">
???????????????點擊我進行展開，再次點擊我進行折疊。第?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)鉤子使用。

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

實例

下面的實例演示了事件的用法：

<!DOCTYPE?html>
<html>
<head>
???<title>Bootstrap?實例?-?折疊（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">
???????????????點擊我進行展開，再次點擊我進行折疊。--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)您展開時會提示本警告');})
???});
</script>?


</body>
</html>

結(jié)果如下所示：

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