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)文章
本文通過(guò)實(shí)例代碼給大介紹了js多文件上傳的實(shí)現(xiàn)方法，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下2017-01-01
這篇文章主要給大家介紹了關(guān)于echarts中圖例右置且豎排的相關(guān)資料,Echarts可以幫助我們快速構(gòu)建柱狀圖、餅圖、條形圖,這對(duì)于多圖形化展示數(shù)據(jù)來(lái)說(shuō)尤其方便,可幫助我們快速開(kāi)發(fā),需要的朋友可以參考下2023-08-08
基于JavaScript實(shí)現(xiàn)Json數(shù)據(jù)根據(jù)某個(gè)字段進(jìn)行排序
這篇文章主要介紹了基于JavaScript實(shí)現(xiàn)Json數(shù)據(jù)根據(jù)某個(gè)字段進(jìn)行排序的相關(guān)資料,需要的朋友可以參考下2015-11-11
20個(gè)拿來(lái)就能用的JavaScript技巧分享
這篇文章主要來(lái)和大家一起探討一下20?種?JavaScript?技巧和竅門,每種技巧和竅門都有通俗易懂的示例,讓我們一起來(lái)提升你的?JavaScript?技能吧2023-10-10
GWT中復(fù)制到剪貼板 js+flash實(shí)現(xiàn)復(fù)制 兼容性比較好
今天看到有個(gè)Google Code的項(xiàng)目，叫ZeroClipboard，大意是使用flash作為媒介，將內(nèi)容復(fù)制到剪貼板。這比用純javascript好，因?yàn)椴煌瑸g覽器會(huì)出于安全的原因，有不同反應(yīng)，例如IE會(huì)給出提示，有的瀏覽器不支持復(fù)制到剪貼板。2010-03-03
JavaScript實(shí)現(xiàn)自動(dòng)對(duì)頁(yè)面上敏感詞進(jìn)行屏蔽的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)自動(dòng)對(duì)頁(yè)面上敏感詞進(jìn)行屏蔽的方法,涉及javascript針對(duì)頁(yè)面字符串查找及替換的相關(guān)技巧,需要的朋友可以參考下2015-07-07
深入理解JavaScript系列(13) This? Yes,this!
在這篇文章里，我們將討論跟執(zhí)行上下文直接相關(guān)的更多細(xì)節(jié)。討論的主題就是this關(guān)鍵字。實(shí)踐證明，這個(gè)主題很難，在不同執(zhí)行上下文中this的確定經(jīng)常會(huì)發(fā)生問(wèn)題2012-01-01
彪哥1.1(智能表格)提供下載...2006-09-09
用函數(shù)式編程技術(shù)編寫優(yōu)美的 JavaScript_ibm
函數(shù)式編程語(yǔ)言在學(xué)術(shù)領(lǐng)域已經(jīng)存在相當(dāng)長(zhǎng)一段時(shí)間了，但是從歷史上看，它們沒(méi)有豐富的工具和庫(kù)可供使用。隨著 .NET 平臺(tái)上的 Haskell 的出現(xiàn)，函數(shù)式編程變得更加流行。一些傳統(tǒng)的編程語(yǔ)言，例如 C++ 和 JavaScript，引入了由函數(shù)式編程提供的一些構(gòu)造和特性。在許多情況下，JavaScript 的重復(fù)代碼導(dǎo)致了一些拙劣的編碼。如果使用函數(shù)式編程，就可以避免這些問(wèn)題。此外，可以利用函數(shù)式編程風(fēng)格編寫更加優(yōu)美的回調(diào)。2008-05-05
JavaScript正則表達(dá)式函數(shù)總結(jié)（常用）
正則表達(dá)式作為一種匹配處理字符串的利器在很多語(yǔ)言中都得到了廣泛實(shí)現(xiàn)和應(yīng)用.這篇文章主要介紹了JavaScript正則表達(dá)式函數(shù)總結(jié),需要的朋友可以參考下2018-02-02