Bootstrap 导航/滑动门（nav）

Bootstrap
导航/滑动门（nav）

开发工具与关键技术：Visual Studio 前端

作者：盘子

撰写时间：2019年5 月27 日

.nav导航/滑动门(nav)

1、基本导航样式

Bootstrap中提供的导航可共享通用标记和样式，从基础.nav样式类到活动与禁用状态。交换class选择符以在每种样式之间切换。

基础.nav组件采用Flexbox弹性布局构建，并为构建所有类型的导航组件提供了坚实的基础，包括一些风格覆盖（以及列表）、一些更大pading连接间隙和基本的禁用样式。

基础的 .nav组件不包含任何的 .active 状态，而下面的案例代码中刚好使用 .active 类别，.active 类别主要是为了说明class不会触发任何特殊的样式。见代码截图如下：（由于整个页面的代码过于长，所以只截取了主要用法部分）

可以使用在很多地方，所以你的标记可以非常灵活，比如使用在

• 列表，或者自定义一个
  组件，因为 .nav 基于 display: flex定义，导航链接的行为与导航项目相同，不需要额外的标记。

2、对齐方式与导航方向

它的可用样式，使用通用样式定义 .nav元件，根据需要进行混合搭配、或自行建立。

.nav内容有两种扩展class属性， 使用.nav-fill会将 .nav-item按照比例分配空间。注意：这会占用所有的水平空间，但不是每个导航项目的宽度相同。

.nav导航的水平对齐与垂直排列：

通过使用flexbox布局属性可以轻松的更改导航的水平对齐方式，默认的情况下是左对齐。flexbox布局属性，如：

通用样式更改Flexa弹性项目的方向来设计导航，如在特定的viewport屏幕下需要堆叠，可使用响应式定义（如 .flex-sm-column样式）

垂直导航也可以没有

• 选择器，如：
  .nav滑动门主要是加入.nav-tabs 以生成选项卡标签（滑动门，同时结合 tab
  JavaScript 插件来构建的tabs滑动门。选项卡（滑动门）组件可以是简单的tabs标签页，也可以适用于胶囊式导航样式。。这两个标签页在HTML中标记是相同的，不同的是tabs标签页使用.nav-tabs，胶囊式标签页使用.nav-pills。除了使用的数据属性不同，它们在显示的样式上也有所不同，胶囊式标签页有自带颜色的点击切换按钮，就像我们平时所使用的带颜色Button按钮。如下面的效果图所示，tabs标签页的切换按钮如图左上角“导航栏”、“门诊预约”两个切换按钮，胶囊式标签页的切换按钮如图中的“个人信息”、“个人日程信息”两个切换按钮，它们是自带颜色为蓝色的，在这里给添加了一张背景图片，所以没有显示出它的自带蓝色。选项卡（滑动门）除了做成水平滑动形式，还可以做成垂直滑动形式。

4、使用数据属性

只要在原素上指定data-toggle=“tab” 或 data-toggle=“pill” 即可启动选项卡或胶囊式导航，而无需编写任何JavaScrip，并可在 .nav-tabs 或 .nav-pills使用这些数据属性。

5、Fade 淡入淡出

要使标签淡入淡出，请添加.fade 到每个. .tab-pane，第一个选项卡窗格还必须定义.show 使默认初始内容可见。

JavaScript 行为/滑动门

它具有与.nav导航/滑动门相同的功能，使用JavaScript标签页插件，单元包含或通过编译 bootstrap.js 文件来扩展我们的标签和按钮，以创建可选的选项卡、甚至是下拉菜单。具体的使用方法在这就不做多说，有需要的动手去体验会更好。

最后是实现的效果图，见截图如下：

点击左上角的“导航栏”、“门诊预约”切换按钮可以进行两个页面的互相切换，请看图一、图二的按钮颜色（白色为当前点击到的页面）。如图一里面的页面也是可以进行自由切换的两个选项卡标签页。代码截图只截取了主要用法部分，使用时样式部分可自行设置。