Bootstrap2用户指南
5.11.1 使用方法
阅读(

Bootstrap基础

Bootstrap框架

Bootstrap基本样式

Bootstrap组件

Bootstrap插件

概述

过渡

模态对话框

下拉菜单

滚动监听

标签页

工具提示

弹出提示

警告框

按钮

折叠

当列表菜单的条目特别多,而页面空间有限时,使用类似于手风琴的折叠菜单是不错的选择,因为它可以节约页面空间,方便用户浏览。

折叠插件需要 bootstrap-collapse.js 文件支持,在使用该插件之前,应该导入 jQuery 和 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" 的元素定义,用于定义导航的标题;一个内容部分,使用 class="accordion-body collapse" 的元素定义,如果希望某个内容部分默认被展开,再给它添加一个 .in 类。

标题部分一般会包含一个 class="accordion-toggle" 的链接,并通过 href 属性定义链接的目标,即内容部分的 id。内容部分包含一个或多个 class="accordion-inner" 的子内容区。完整代码如下:

<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>

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

Bootstrap折叠插件Collapse
图5-18 Bootstrap折叠插件Collapse

关于作者

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

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

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

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验