Bootstrap3实用教程
4.11.1 折叠插件的使用方法
阅读(

Bootstrap基础

Bootstrap全局样式

Bootstrap组件

Bootstrap插件

概述

过渡

模态对话框

下拉菜单

滚动监听

标签页

工具提示

弹出提示

警告框

按钮

折叠

折叠插件(collapse.js)可以很容易地让页面区域折叠起来。当列表菜单的条目特别多,而页面空间有限时,使用类似于手风琴的折叠菜单可以节约页面空间,方便用户浏览。

使用方法

Bootstrap中,折叠组件的基本结构是在一个 class="accordion" 的容器中,包含一个或多个 class="accordion-group" 的折叠面板子容器。如:

<div class="accordion">
  <div class="accordion-group"></div>
  ...
  <div class="accordion-group"></div>
</div>

每个折叠面板包含两部分内容:一个是标题部分,一个是内容部分。

标题部分使用 class="accordion-heading" 的元素定义,用于定义导航的标题。标题中一般会包含一个链接,必须为链接添加 data-toggle="collapse" 和 data-target 属性,data-target 属性接受一个 CSS 选择器,并会对其应用折叠效果。

内容部分使用 class="accordion-body collapse" 的元素定义,如果希望某个内容部分默认被展开,可以给它添加一个 .in 类。如:

<div class="accordion">
  <div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle" href="#collapseOne">
        Collapsible Group Item #1
      </a>
    </div>
    <div id="collapseOne" class="accordion-body collapse in">
      <div class="accordion-inner">
        Anim pariatur ...
      </div>
    </div>
  </div>
  <div class="accordion-group">
    ...
  </div>
</div>

至此,一个包含两个折叠面板的折叠组件就完成了。效果如图 4‑19所示:

折叠插件
图4-19 折叠插件

关于作者

歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我写出更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验