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

简介: 本文目录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表示这是一个选项卡样式的导航元素,所以效果如下:

image.png

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>

image.png

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>

image.png

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>

效果如下:

image.png

4. 面包屑导航

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


   面包屑导航

               <ul class="breadcrumb">

                   <li><a href="#">首页</a></li>

                   <li><a href="#">关于我们</a></li>

                   <li><a href="#">品牌信息</a></li>

               </ul>

效果如下:

image.png

5. 小结

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

相关文章
|
21天前
|
前端开发
Bootstrap5 导航5
示例展示了两种导航菜单:胶囊式和选项卡式,均包含活动链接、下拉菜单(含三个子链接)及禁用链接。这些菜单使用 Bootstrap 类实现响应式设计。
|
21天前
Bootstrap5 导航4
`.nav-pills` 类可将导航项设置为胶囊形状,使界面更加美观。通过添加 `.nav-justified` 类,可以使导航项等宽对齐,适用于不同屏幕尺寸的布局。示例代码展示了如何使用这些类创建胶囊导航和等宽导航。
|
21天前
Bootstrap5 导航3
使用 `.flex-column` 类可创建垂直导航,而 `.nav-tabs` 类则将导航转换为选项卡形式。通过添加 `.active` 类来标记当前选中的选项卡。示例代码展示了如何实现这些效果。
|
22天前
Bootstrap5 导航2
导航对齐方式:使用 `.justify-content-center` 类可使导航居中显示,使用 `.justify-content-end` 类可使导航右对齐。垂直导航:使用 `.flex-column` 类可创建垂直导航。
|
22天前
Bootstrap5 导航1
Bootstrap5 导航简介:使用 .nav 类创建水平导航栏,.nav-item 类应用于每个列表项,.nav-link 类用于每个链接。示例代码展示了如何实现这一功能,包括禁用状态的链接。
|
4月前
|
JavaScript 前端开发
BootStrap在Vue中的安装使用详细教程
这篇文章提供了在Vue项目中安装和使用Bootstrap的详细教程,包括安装jQuery、引入Bootstrap、配置Webpack以及在项目中进行测试和查看效果的步骤。
BootStrap在Vue中的安装使用详细教程
|
6月前
|
前端开发 Apache 数据库
ThinkPHP+Bootstrap简约自适应网址导航网站源码
使用 ThinkPHP+bootstrap 开发,后台采用全局 ajax 无刷新加载,前后台自适应,前台页面非常简洁适合自己收藏网站或做导航网站。
94 1
|
7月前
|
前端开发 JavaScript 容器
Bootstrap 5 保姆级教程(十五):表单
Bootstrap 5 保姆级教程(十五):表单
N..
|
7月前
|
开发框架 前端开发 UED
Bootstrap的CSS组件
Bootstrap的CSS组件
N..
68 0
|
前端开发 容器