Bootstrap筆記—折疊實例代碼
更新時間：2017年03月13日 17:07:59 作者：erdouzhang
本篇文章主要介紹了Bootstrap筆記—折疊實例代碼，詳細(xì)的介紹了折疊效果實例，包括一組多組等，非常具有實用價值，需要的朋友可以參考下。
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"><!-- 添加一個collapse類會默認(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">
<!-- 第一個功能 -->
<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">第一個折疊標(biāo)題</a>
</h4>
</div>
<!-- 折疊panel內(nèi)容 -->
<div class="collapse in panel-collapse" id="chanel_demo1"><!-- 添加一個collapse類會默認(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>
<!-- 第二個功能 -->
<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">第二個折疊標(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">
<!-- 第一個功能 -->
<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">第一個折疊標(biāo)題</a>
</h4>
</div>
<!-- 折疊panel內(nèi)容 -->
<div class="collapse in panel-collapse" id="chanel_demo1"><!-- 添加一個collapse類會默認(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>
<!-- 第二個功能 -->
<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">第二個折疊標(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">
<!-- 第一個功能 -->
<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">第一個折疊標(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>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- bootstrap折疊調(diào)用collapse()后data-parent不生效的快速解決辦法
- Bootstrap基本插件學(xué)習(xí)筆記之折疊(22)
- BootStrap實現(xiàn)響應(yīng)式布局導(dǎo)航欄折疊隱藏效果（在小屏幕、手機屏幕瀏覽時自動折疊隱藏）
- Bootstrap 折疊（Collapse）插件用法實例詳解
- Bootstrap3.0學(xué)習(xí)教程之JS折疊插件
- Bootstrap打造一個左側(cè)折疊菜單的系統(tǒng)模板(一)
- Bootstrap打造一個左側(cè)折疊菜單的系統(tǒng)模板(二)
- Bootstrap每天必學(xué)之折疊（Collapse）插件
- Bootstrap每天必學(xué)之折疊
- Bootstrap創(chuàng)建可折疊的組件
相關(guān)文章
本文通過實例代碼給大介紹了js多文件上傳的實現(xiàn)方法，非常不錯，具有參考借鑒價值，需要的朋友參考下2017-01-01
這篇文章主要給大家介紹了關(guān)于echarts中圖例右置且豎排的相關(guān)資料,Echarts可以幫助我們快速構(gòu)建柱狀圖、餅圖、條形圖,這對于多圖形化展示數(shù)據(jù)來說尤其方便,可幫助我們快速開發(fā),需要的朋友可以參考下2023-08-08
基于JavaScript實現(xiàn)Json數(shù)據(jù)根據(jù)某個字段進行排序
這篇文章主要介紹了基于JavaScript實現(xiàn)Json數(shù)據(jù)根據(jù)某個字段進行排序的相關(guān)資料,需要的朋友可以參考下2015-11-11
這篇文章主要來和大家一起探討一下20?種?JavaScript?技巧和竅門,每種技巧和竅門都有通俗易懂的示例,讓我們一起來提升你的?JavaScript?技能吧2023-10-10
GWT中復(fù)制到剪貼板 js+flash實現(xiàn)復(fù)制 兼容性比較好
今天看到有個Google Code的項目，叫ZeroClipboard，大意是使用flash作為媒介，將內(nèi)容復(fù)制到剪貼板。這比用純javascript好，因為不同瀏覽器會出于安全的原因，有不同反應(yīng)，例如IE會給出提示，有的瀏覽器不支持復(fù)制到剪貼板。2010-03-03
JavaScript實現(xiàn)自動對頁面上敏感詞進行屏蔽的方法
這篇文章主要介紹了JavaScript實現(xiàn)自動對頁面上敏感詞進行屏蔽的方法,涉及javascript針對頁面字符串查找及替換的相關(guān)技巧,需要的朋友可以參考下2015-07-07
深入理解JavaScript系列(13) This? Yes,this!
在這篇文章里，我們將討論跟執(zhí)行上下文直接相關(guān)的更多細(xì)節(jié)。討論的主題就是this關(guān)鍵字。實踐證明，這個主題很難，在不同執(zhí)行上下文中this的確定經(jīng)常會發(fā)生問題2012-01-01
彪哥1.1(智能表格)提供下載...2006-09-09
用函數(shù)式編程技術(shù)編寫優(yōu)美的 JavaScript_ibm
函數(shù)式編程語言在學(xué)術(shù)領(lǐng)域已經(jīng)存在相當(dāng)長一段時間了，但是從歷史上看，它們沒有豐富的工具和庫可供使用。隨著 .NET 平臺上的 Haskell 的出現(xiàn)，函數(shù)式編程變得更加流行。一些傳統(tǒng)的編程語言，例如 C++ 和 JavaScript，引入了由函數(shù)式編程提供的一些構(gòu)造和特性。在許多情況下，JavaScript 的重復(fù)代碼導(dǎo)致了一些拙劣的編碼。如果使用函數(shù)式編程，就可以避免這些問題。此外，可以利用函數(shù)式編程風(fēng)格編寫更加優(yōu)美的回調(diào)。2008-05-05
JavaScript正則表達式函數(shù)總結(jié)（常用）
正則表達式作為一種匹配處理字符串的利器在很多語言中都得到了廣泛實現(xiàn)和應(yīng)用.這篇文章主要介紹了JavaScript正則表達式函數(shù)總結(jié),需要的朋友可以參考下2018-02-02