Bootstrap筆記—折疊實(shí)例代碼
更新時(shí)間：2017年03月13日 17:07:59 作者：erdouzhang
本篇文章主要介紹了Bootstrap筆記—折疊實(shí)例代碼，詳細(xì)的介紹了折疊效果實(shí)例，包括一組多組等，非常具有實(shí)用價(jià)值，需要的朋友可以參考下。
1. 基礎(chǔ)折疊
展示如下：
<body>
<div class="container">
<!-- 按鈕 -->
<button class="btn btn-default" data-toggle="collapse" data-target="#shows">按鈕</button>
<!-- 折疊內(nèi)容 -->
<div id="shows" class="collapse">
<div class="well">
我是折疊的內(nèi)容
</div>
</div>
</div>
</body>
2. 折疊一組
<body>
<div class="container">
<!-- 折疊組 -->
<div class="panel-group">
<div class="panel panel-default">
<!-- 折疊panel頭部 -->
<div class="panel-heading">
<h4 class="panel-title">
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" data-toggle="collapse" data-target="#chanel_demo">欄目管理</a>
</h4>
</div>
<!-- 折疊panel內(nèi)容 -->
<div class="collapse panel-collapse" id="chanel_demo"><!-- 添加一個(gè)collapse類會(huì)默認(rèn)隱藏折疊內(nèi)容 -->
<div class="panel-body">
<ul>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >增加文章</a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >增加標(biāo)題</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</body>
3.折疊多組
<body>
<div class="container">
<!-- 折疊組 -->
<div class="panel-group">
<!-- 第一個(gè)功能 -->
<div class="panel panel-default">
<!-- 折疊panel頭部 -->
<div class="panel-heading">
<h4 class="panel-title">
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" data-toggle="collapse" data-target="#chanel_demo1">第一個(gè)折疊標(biāo)題</a>
</h4>
</div>
<!-- 折疊panel內(nèi)容 -->
<div class="collapse in panel-collapse" id="chanel_demo1"><!-- 添加一個(gè)collapse類會(huì)默認(rèn)隱藏折疊內(nèi)容 -->
<div class="panel-body">
<ul>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >折疊內(nèi)容一</a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >折疊內(nèi)容二</a></li>
</ul>
</div>
</div>
</div>
<!-- 第二個(gè)功能 -->
<div class="panel panel-default">
<!-- 折疊panel頭部 -->
<div class="panel-heading">
<h4 class="panel-title">
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" data-toggle="collapse" data-target="#chanel_demo2">第二個(gè)折疊標(biāo)題</a>
</h4>
</div>
<!-- 折疊panel內(nèi)容 -->
<div class="collapse panel-collapse" id="chanel_demo2">
<div class="panel-body">
<ul>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >折疊內(nèi)容一</a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >折疊內(nèi)容二</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</body>
4. 折疊多組 只顯示一組折疊內(nèi)容
<body>
<div class="container">
<!-- 折疊組 -->
<div class="panel-group" id="panelcontainer">
<!-- 第一個(gè)功能 -->
<div class="panel panel-default">
<!-- 折疊panel頭部 -->
<div class="panel-heading">
<h4 class="panel-title">
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" data-toggle="collapse" data-target="#chanel_demo1" data-parent="#panelcontainer">第一個(gè)折疊標(biāo)題</a>
</h4>
</div>
<!-- 折疊panel內(nèi)容 -->
<div class="collapse in panel-collapse" id="chanel_demo1"><!-- 添加一個(gè)collapse類會(huì)默認(rèn)隱藏折疊內(nèi)容 -->
<div class="panel-body">
<ul>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >折疊內(nèi)容一</a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >折疊內(nèi)容二</a></li>
</ul>
</div>
</div>
</div>
<!-- 第二個(gè)功能 -->
<div class="panel panel-default">
<!-- 折疊panel頭部 -->
<div class="panel-heading">
<h4 class="panel-title">
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" data-toggle="collapse" data-target="#chanel_demo2" data-parent="#panelcontainer">第二個(gè)折疊標(biāo)題</a>
</h4>
</div>
<!-- 折疊panel內(nèi)容 -->
<div class="collapse panel-collapse" id="chanel_demo2">
<div class="panel-body">
<ul>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >折疊內(nèi)容一</a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >折疊內(nèi)容二</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</body>
5. 折疊–下拉菜單
<body>
<div class="container">
<!-- 折疊組 -->
<div class="panel-group">
<!-- 第一個(gè)功能 -->
<div class="panel panel-default">
<!-- 折疊panel頭部 -->
<div class="panel-heading">
<h4 class="panel-title">
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" data-toggle="collapse" data-target="#chanel_demo1">第一個(gè)折疊標(biāo)題</a>
</h4>
</div>
<!-- 折疊panel內(nèi)容 -->
<div class="collapse in panel-collapse" id="chanel_demo1">
<ul class="list-group">
<li class="list-group-item"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >折疊內(nèi)容一</a></li>
<li class="list-group-item"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >折疊內(nèi)容二</a></li>
<li class="list-group-item"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >折疊內(nèi)容三</a></li>
</ul>
</div>
</div>
</div>
</div>
</body>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- bootstrap折疊調(diào)用collapse()后data-parent不生效的快速解決辦法
- Bootstrap基本插件學(xué)習(xí)筆記之折疊(22)
- BootStrap實(shí)現(xiàn)響應(yīng)式布局導(dǎo)航欄折疊隱藏效果（在小屏幕、手機(jī)屏幕瀏覽時(shí)自動(dòng)折疊隱藏）
- Bootstrap 折疊（Collapse）插件用法實(shí)例詳解
- Bootstrap3.0學(xué)習(xí)教程之JS折疊插件
- Bootstrap打造一個(gè)左側(cè)折疊菜單的系統(tǒng)模板(一)
- Bootstrap打造一個(gè)左側(cè)折疊菜單的系統(tǒng)模板(二)
- Bootstrap每天必學(xué)之折疊（Collapse）插件
- Bootstrap每天必學(xué)之折疊
- Bootstrap創(chuàng)建可折疊的組件
相關(guān)文章
JS實(shí)現(xiàn)回到頁(yè)面頂部動(dòng)畫效果的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)?lái)一篇JS實(shí)現(xiàn)回到頁(yè)面頂部動(dòng)畫效果的簡(jiǎn)單實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-05-05
這篇文章主要介紹了20個(gè)JS簡(jiǎn)寫技巧提升工作效率，本文特點(diǎn)以言簡(jiǎn)意賅為主，圍繞JS簡(jiǎn)寫技巧的話題展開全文，具有一定的查看價(jià)值 ，需要的小伙伴可以參考一下2021-12-12
bootstrap基礎(chǔ)知識(shí)學(xué)習(xí)筆記
這篇文章主要針對(duì)bootstrap基礎(chǔ)知識(shí)為大家整理了詳細(xì)的學(xué)習(xí)筆記,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-11-11
Echarts可以幫助我們快速構(gòu)建柱狀圖、餅圖、條形圖,這對(duì)于多圖形化展示數(shù)據(jù)來(lái)說(shuō)尤其方便,可幫助我們快速開發(fā),下面這篇文章主要給大家介紹了關(guān)于Echarts中l(wèi)egend屬性使用的相關(guān)資料,需要的朋友可以參考下2022-04-04
javascript中setAttribute兼容性用法分析
這篇文章主要介紹了javascript中setAttribute兼容性用法,結(jié)合實(shí)例形式分析了javascript使用setAttribute進(jìn)行屬性設(shè)置操作的相關(guān)使用技巧,需要的朋友可以參考下2016-12-12
如何在JavaScript中實(shí)現(xiàn)私有屬性的寫類方式(二)
這篇文章主要介紹了如何在JavaScript中實(shí)現(xiàn)私有屬性的寫類方式。需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2013-12-12
JS中promise特點(diǎn)與信任問(wèn)題解決
大家都知道Promise解決了回調(diào)地獄的問(wèn)題,“回調(diào)地獄”所說(shuō)的嵌套其實(shí)是指異步的嵌套,它帶來(lái)了兩個(gè)問(wèn)題:可讀性的問(wèn)題和信任問(wèn)題,下面這篇文章主要給大家介紹了關(guān)于JS中promise特點(diǎn)與信任問(wèn)題解決的相關(guān)資料,需要的朋友可以參考下2022-06-06
js 回車提交一些新手朋友還是比較陌生的，本文介紹兩種實(shí)現(xiàn)方法:jQuery方法、JavaScript方法,感興趣的朋友可以研究下2012-12-12
這篇文章主要給大家介紹了關(guān)于async/await地獄該如何避免的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2018-05-05
使用RN Animated做一個(gè)“添加購(gòu)物車”動(dòng)畫的方法
這篇文章主要介紹了使用RN Animated做一個(gè)“添加購(gòu)物車”動(dòng)畫的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-09