(1) 打开 html 文档，添加一个div标签，包装 Clearance Sale 按钮和三个选项列表。给这个div 添加一个特殊的类 collapse，以及一个唯一的 ID，以便 JavaScript 插件找到它，同时也添加一个同名的类,代码如下（可以参考文档：#collapse）：
<div> <h2>Narrow your selection</h2> <div> ... </div> </div>
(2) 保存文件并刷新浏览器。你会发现 Clearance Sale 按钮和选项列表从眼前消失了。只剩下选项面板上方的 h2 标题了，效果图如下：
现在需要一个切换按钮，在点击时显示筛选项。
(3) 然后我们在这个h2标题中添加一个button按钮以及相应属性如下：
<div> <h2>Narrow your selection <button type="button" data-toggle="collapse" data-target="#options-panel"> <span></span> </button> ...
简单解释下上面的标记：
□ 给 h2 添加的 clearfix 类可以确保它包含切换按钮，因为切换按钮是浮动到右边的；
□ 类 btn 和 btn-primary 会给新的按钮添加 Bootstrap 的基本按钮样式，背景颜色为 @brand-primary；
□ 类 pull-right 会把按钮浮动到右侧；
□ 在 button 元素中，放了一个 Font Awesome 齿轮图标，使用 fa-2x 类放大到两倍。
保存并刷新浏览器，可以看到显示效果如下：
(4) 下面要写一些规则，在中大屏幕中隐藏切换按钮并展开选项面板。为此，可以在 _product-grid.less 中添加以下规则：
@media (min-width:@screen-sm-min){ .options-panel{ display:block; } .options-panel-toggle { display:none; } }
(5) 这些规则的作用如下：
□ 媒体查询保证只把规则应用到小中大视口；
□ 第一条规则抵消 collapse 类的作用，它默认是隐藏元素；
□ 第二条则隐藏切换按钮。
保存并刷新，应该就能看到想要的效果了。
在超小视口中，选项列表会折叠起来，但切换按钮可见：
在小、中、大视口，切换按钮隐藏，选项列表可见：
这样，我们的这个页面就完工了。
4.小结
这个示例，我们做了以下事情：
□ 利用 Bootstrap 的样式快速实现了面包屑、页面标题和分页导航，并根据需要进行了定制；
□ 调整了 Bootstrap 的网格样式，为商品创建了整齐的布局，关键是所有商品的高度要一致；
□ 为复杂的 Clearance Sale 按钮应用了样式，用到了 @brand-feature 这个红色背景；
□ 利用 btn 类的样式让筛选按钮更容易点击或触摸，通过自定义满足了我们的特殊需求；
□ 使用 Bootstrap 的分栏类，加上响应式调整，对齐了筛选项列表，而且适合多视口；
□ 在自定义样式表中借用 Font Awesome 样式在筛选项旁边添加复选框；
□ 设置了选项面板在窄视口中折叠，在小中大视口中可见。
此例显示效果地址： （附《Bootstrap 实战》的PDF文档和源码链接：(jb51.net).rar）
本例源码下载：bootstrap-code-05.zip
如果大家还想深入学习，可以点击这里进行学习，再为大家附3个精彩的专题：