Bootstrap学习笔记 18

来源：互联网发布：gta5韩国妹子捏脸数据编辑：程序博客网时间：2024/05/16 06:10
Collapse

实现Collapse

在某个元素（比如<div>）加上 .collapse 类，该元素用来显示折叠的内容
为了控制折叠内容的显示与隐藏，需要增加另外一个元素（ <a> 或者 <button>），并且加上 data-toggle="collapse" 类
为了将折叠元素与控制折叠的元素关联起来，需要在折叠元素上加上 id=xxx 并且在控制折叠的元素上加上 data-target=#xxx（<a>可以使用 href=#xxx 代替）。xxx必须保持一致。注意 # 不能省略。
示例

<!DOCTYPE html><html>    <head>        <meta charset="utf-8"/>        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>        <link rel="stylesheet" href="./bower_components/bootstrap/dist/css/bootstrap.min.css"/>        <script src="./node_modules/jquery/dist/jquery.min.js"></script>        <script src="./bower_components/bootstrap/dist/js/bootstrap.min.js"></script>        <title>Collapse</title>        <script>            function showHTMLContent(showElement, codeElement) {                $(showElement).html($('<div/>').text($(codeElement).html()).html());            }            $(function() {                showHTMLContent('#showBtnCollapse', '#btnCollapse');                showHTMLContent('#showLinkCollapse', '#linkCollapse');                showHTMLContent('#showListCollapse', '#listCollapse');                showHTMLContent('#showPanelCollapse', '#panelCollapse');                showHTMLContent('#showPanelGroupCollapse', '#panelGroupCollapse');                $('#addInClass').click(function() {                    if (this.checked) {                        $('#cpp').addClass('in');                    } else {                        $('#cpp').removeClass('in');                    }                    showHTMLContent('#showBtnCollapse', '#btnCollapse');                });            });        </script>    </head>    <body>        <div class="container">            <h1>Button Collapse</h1>            <form>                <input type="checkbox" id="addInClass"> set visible default <br>            </form>            <h2>代码</h2>            <pre id="showBtnCollapse"></pre>            <h2>样式</h2>            <div id="btnCollapse">                <button data-toggle="collapse" data-target="#cpp" class="btn btn-primary">C++</button>                <div id="cpp" class="collapse">                    C++是C语言的继承，它既可以进行C语言的过程化程序设计，                    又可以进行以抽象数据类型为特点的基于对象的程序设计，                    还可以进行以继承和多态为特点的面向对象的程序设计。                </div>            </div>            <br><br>            <h1>Link Collapse</h1>            <h2>代码</h2>            <pre id="showLinkCollapse"></pre>            <h2>样式</h2>            <div id="linkCollapse">                <a data-toggle="collapse" href="#java">Java</a>                <div id="java" class="collapse">                    Java是一门面向对象编程语言，不仅吸收了C++语言的各种优点，                    还摒弃了C++里难以理解的多继承、指针等概念，因此Java语言具有功能强大和简单易用两个特征。                </div>            </div>            <br><br>            <h1>List Collapse</h1>            <h2>代码</h2>            <pre id="showListCollapse"></pre>            <h2>样式</h2>            <div id="listCollapse">                <a data-toggle="collapse" href="#python">Python</a>                <div id="python" class="collapse">                    <ul class="list-group">                        <li class="list-group-item">Python2.7</li>                        <li class="list-group-item">Python3.5</li>                        <li class="list-group-item">Python3.6</li>                    </ul>                </div>            </div>            <br><br>            <h1>Panel Collapse</h1>            <h2>代码</h2>            <pre id="showPanelCollapse"></pre>            <h2>样式</h2>            <div id="panelCollapse">                <div class="panel panel-default">                    <div class="panel-heading">                        <h4 class="panel-title">                            <a data-toggle="collapse" href="#panelTest">Collapsible panel</a>                        </h4>                    </div>                    <div id="panelTest" class="panel-collapse collapse">                        <div class="panel-body">Panel Body</div>                        <div class="panel-footer">Panel Footer</div>                    </div>                </div>            </div>            <br><br>            <h1>Panel Group Collapse</h1>            <h2>代码</h2>            <pre id="showPanelGroupCollapse"></pre>            <h2>样式</h2>            <div id="panelGroupCollapse">                <!-- data-parent 表示当一个折叠被打开时，相同父元素下的其他子元素将会关闭折叠 -->                <div class="panel-group" id="programmingLanguages">                    <div class="panel panel-default">                        <div class="panel-heading">                            <h1 class="panel-title">                                <a data-toggle="collapse" data-parent="#programmingLanguages" href="#go"> Go </a>                            </h1>                        </div>                        <div id="go" class="panel-collapse collapse">                            <div class="panel-body">                                Go是一种新的语言，一种并发的、带垃圾回收的、快速编译的语言。                                它具有以下特点：它可以在一台计算机上用几秒钟的时间编译一个大型的Go程序。                            </div>                        </div>                    </div>                    <div class="panel panel-default">                        <div class="panel-heading">                            <h4 class="panel-title">                                <a data-toggle="collapse" data-parent="#programmingLanguages" href="#php"> PHP </a>                            </h4>                        </div>                        <div id="php" class="panel-collapse collapse">                            <div class="panel-body">                                PHP（外文名:PHP: Hypertext Preprocessor，中文名：“超文本预处理器”）是一种通用开源脚本语言。                                语法吸收了C语言、Java和Perl的特点，利于学习，使用广泛，主要适用于Web开发领域。                            </div>                        </div>                    </div>                    <div class="panel panel-default">                        <div class="panel-heading">                            <h4 class="panel-title">                                <a data-toggle="collapse" data-parent="#programmingLanguages" href="#csharp"> C# </a>                            </h4>                        </div>                        <div id="csharp" class="panel-collapse collapse">                            <div class="panel-body">                                C#是微软公司发布的一种面向对象的、运行于.NET Framework之上的高级程序设计语言。                                并定于在微软职业开发者论坛(PDC)上登台亮相。C#是微软公司研究员Anders Hejlsberg的最新成果。                        </div>                        </div>                    </div>                </div>            </div>                 <br><br><br><br>        </div>    </body></html>
查看运行结果
阅读全文
0 0