Bootstrap教程(20)--选项卡式导航、胶囊式导航、面包屑导航

傷城~ 2022-11-03 11:54 228阅读 0赞

***[点此查看全部文字教程、视频教程、源代码][Link 1]***

### 本文目录 ###

*  1. 概述
 *  2. 选项卡式导航
 *   *  2.1 普通选项卡导航
     *  2.2 等宽选项卡导航
 *  3. 胶囊式导航
 *   *  3.1 普通胶囊式导航
     *  3.2 垂直胶囊式导航
 *  4. 面包屑导航
 *  5. 小结

# 1. 概述 #

Bootstrap提供了多种导航控件，本篇就来介绍下常用的选项卡式导航、胶囊式导航及面包屑导航。

# 2. 选项卡式导航 #

## 2.1 普通选项卡导航 ##

选项卡式导航，顾明司仪，看起来就像多个选项卡，基本用法如下：

选项卡式导航
                    <nav>
                        <ul class="nav nav-tabs">
                            <li class="active"><a href="#">首页</a></li>
                            <li><a href="#">关于</a></li>
                            <li><a href="#">内容</a></li>
                        </ul>
                    </nav>

`<nav>`表示导航元素，`nav nav-tabs`表示这是一个选项卡样式的导航元素，所以效果如下：

![在这里插入图片描述][2021022815532072.png_pic_center]

## 2.2 等宽选项卡导航 ##

等宽选项卡导航特别适合用于移动设备，当容器宽度小于768像素时，导航将自动变为堆叠样式。使用`nav-justified`类即可设置等宽模式。

等宽选项卡式导航
                    <nav>
                        <ul class="nav nav-tabs nav-justified">
                            <li class="active"><a href="#">首页</a></li>
                            <li><a href="#">关于</a></li>
                            <li><a href="#">内容</a></li>
                        </ul>
                    </nav>

当容器宽度正常时：  
![在这里插入图片描述][20210228155532184.png_pic_center]  
等容器宽度小于768像素时，导航会自动变为：  
![在这里插入图片描述][20210228155557946.png_pic_center]

# 3. 胶囊式导航 #

## 3.1 普通胶囊式导航 ##

胶囊式导航改变了显示样式，每个导航菜单更加像一个胶囊按钮，而不是选项。使用`nav-pills`类设置胶囊式导航：

胶囊式导航
                    <nav>
                        <ul class="nav nav-pills">
                            <li class="active"><a href="#">首页</a></li>
                            <li><a href="#">关于</a></li>
                            <li><a href="#">内容</a></li>
                        </ul>
                    </nav>

效果如下：  
![在这里插入图片描述][20210228155749830.png_pic_center]

## 3.2 垂直胶囊式导航 ##

可以追加`nav-stacked`样式，将胶囊式导航设置为垂直方向：

垂直方向胶囊式导航
                    <nav>
                        <ul class="nav nav-pills nav-stacked">
                            <li class="active"><a href="#">首页</a></li>
                            <li><a href="#">关于</a></li>
                            <li><a href="#">内容</a></li>
                        </ul>
                    </nav>

效果如下：  
![在这里插入图片描述][20210228155907633.png_pic_center]

# 4. 面包屑导航 #

面包屑导航比较简单，直接为ul添加`breadcrumb`类即可。

面包屑导航
                    <ul class="breadcrumb">
                        <li><a href="#">首页</a></li>
                        <li><a href="#">关于我们</a></li>
                        <li><a href="#">品牌信息</a></li>
                    </ul>

效果如下：  
![在这里插入图片描述][2021022816015113.png_pic_center]

# 5. 小结 #

选项卡式导航和胶囊式导航经常用作除了主导航栏之外的二级内容导航，而面包屑导航经常用于显示当前页面的位置且随时定位到相关页面。

[Link 1]: https://studyingpanda.blog.csdn.net/article/details/105329926
[2021022815532072.png_pic_center]: /images/20221024/b45dfd680a6447128868050782f68284.png
[20210228155532184.png_pic_center]: /images/20221024/64e82210d9e54b74893575ffb3fab679.png
[20210228155557946.png_pic_center]: /images/20221024/2d4917acc9f9434295334691e6414c91.png
[20210228155749830.png_pic_center]: /images/20221024/f78c1e099acc4cd596bc0ac104bd62d9.png
[20210228155907633.png_pic_center]: /images/20221024/1734deb1e50a4aa6ae3e3b3c1e5053ff.png
[2021022816015113.png_pic_center]: /images/20221024/ed8e9473dee84916bf879a2c06083ae0.png