全面解析Bootstrap中nav、collapse的使用方法

一、导航分析（nav) 源码文件： _navs.scss：导航模块 Mixins/_nav-divider.scss：分隔线 Mixins/_nav-vertical-align.scss：垂直对齐 1、只是用css进行了样式修饰，对Js没有任何依赖 2、导航模块可以包含下拉模块 3、实现了水平、垂直、水平平均分配（table-cell实现，4.0移除）、tabs、胶囊等样式 4、Nav-divider：有一个像素的高度实现分隔线 5、Nav-stacked：垂直对齐实现 6、提供了tab-content类，用于包裹tab，然后tab-pane做为内容区域，用于tab页的扩展 7、Nav-ta Bootstrap是世界上最流行的前端开发框架之一，它为开发者提供了丰富的组件和样式，使网站设计和开发更加高效。在本文中，我们将深入探讨Bootstrap中两个关键组件的使用方法：`nav` 和 `collapse`。 ### 一、Bootstrap 导航(`nav`)组件 Bootstrap 的 `nav` 组件用于创建各种类型的导航菜单，包括水平、垂直、带有下拉选项的菜单等。它基于 SCSS 源码文件 `_navs.scss` 进行样式定义，同时利用 Mixins 文件如 `_nav-divider.scss` 和 `_nav-vertical-align.scss` 来实现分隔线和垂直对齐功能。 1. **样式独立性**：`nav` 组件仅使用 CSS 进行样式修饰，不依赖 JavaScript。这使得在不需要交互效果时，仅使用 CSS 就能实现基础的导航样式。 2. **下拉模块**：`nav` 支持包含下拉菜单，为用户提供更丰富的交互体验。 3. **布局样式**：`nav` 可以实现水平、垂直以及水平平均分配的布局。在 Bootstrap 4.0 版本中，水平平均分配通过 `table-cell` 实现，但已被移除。此外，还支持 `tabs` 和胶囊状的样式。 4. **Nav-divider**：`<nav-divider>` 用于在导航项之间创建分隔线，具有一个像素的高度，有助于视觉区分。 5. **Nav-stacked**：此类用于将水平导航转换为垂直布局，使导航项堆叠起来。 6. **Tab 内容**：Bootstrap 提供了 `tab-content` 类，用于包裹 `tab`，而 `tab-pane` 作为内容区域，用于扩展 tab 页。这样可以方便地实现 tab 切换效果。 7. **Dropdown 优化**：在 `nav-tabs` 下的 dropdown 做了特殊处理，向上收缩一个像素，以消除与底部线条之间的空白间隙。 ### 二、Bootstrap 折叠(`collapse`)组件 `collapse` 组件用于实现内容的折叠和展开效果，源码主要位于 Mixins 文件 `_component-animations.scss` 和 JavaScript 文件 `bootstrap/collapse.js`。 1. **数据收集**：`collapse` 使用 `$this.data()` 方法收集 `data-*` 属性数据，这些数据用于控制组件的行为。 2. **Parent 属性**：允许设置一个 `parent` 属性，通过该属性可以控制一组 `collapse` 元素的展开和折叠，实现一控多的效果。例如，隐藏同一父级下所有子列表的代码展示了这一特性。 3. **与 `.panel` 配合**：`collapse` 组件通常与 `.panel` 类结合使用，以便于管理和查找子列表。 4. **`end()` 方法**：jQuery 的 `end()` 方法用于恢复筛选链，回到链开始的状态，例如在 `$(“p”).find(‘.bak’).find(‘span’).end()` 示例中，`end()` 使得链回到 `$(“p”)`. 5. **`scrollHeight` 属性**：在 `collapse` 中，`scrollHeight` 用于获取元素的完整高度，包括不可见部分，用于计算展开或折叠时的最大高度。 6. **元素处理**：在 `collapse` 中，元素分为两类：展开或隐藏的元素本身(`$element`)和触发折叠操作的按钮(`$trigger`)。 7. **高度重绘与计算**：在 `hidden` 方法中，会先重绘折叠区域的高度，然后获取实际高度，以确保正确隐藏或展开。 8. **联动触发**：`hidden` 方法的触发通常是通过 `show` 方法中的条件判断，例如隐藏其他激活的 `collapse` 元素。 Bootstrap 的 `nav` 和 `collapse` 组件提供了强大的导航和折叠功能，它们在网页布局和交互中起着至关重要的作用。通过理解和掌握这两个组件的使用，开发者能够轻松创建出具有专业外观和用户体验的网站。