本篇内容介绍了“Bootstrap中如何导航组件和选项卡组件”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！
成都创新互联公司专注于企业成都全网营销、网站重做改版、邵阳网站定制设计、自适应品牌网站建设、成都h5网站建设、商城网站定制开发、集团公司官网建设、外贸网站建设、高端网站制作、响应式网页设计等建站业务，价格优惠性价比高，为邵阳等各大城市提供网站开发制作服务。
1 导航基础
导航栏是网站系统必须的功能，以前为了做好一个导航栏，需要花很多的功夫，现在有了 Bootstrap5导航，从此做一个漂亮的导航栏，只是片刻功夫复制粘贴就可以完成。
导航演示
你还可以让你的代码更简洁
首页
文章
图片
视频
这段代码显示的与上面是一样的，至于里面的不可用按钮，除非出于某种特殊目的（例如会员可用，对普通人显示不可用），否则没必要放在菜单处。
这两种写法各有优点;
第一种更有条理一点，在导航中有其他修饰元素，如图标等的时候，更加清晰，另外还可以通过写li的样式类来更改链接显示方式，甚至在有些公司，会通过代码量来考核员工的工作绩效（听说不少公司这样干）。
第二种则更为简洁，第二种能实现的，第一种都能，反之不成立，毕竟lite版都是阉割了一些功能的。
后面的演示我就用第二种，所有的演示换成第一种都是完全没问题的。
2 常用样式
2.1 水平对齐
使用弹性盒子通用类可以轻松更改导航的水平对齐方式。
默认情况下导航会向左对齐，您可以轻松地将其更改为居中或向右对齐。
导航演示
您可能还看出了，一个页面中可以放置多个导航。
2.2 垂直导航
通过使用.flex-column通用类更改导航为垂直导航。如果只希望在特定的viewports下堆叠，可使用响应式版本（例如.flex-sm-column）。
导航演示
ps:这个响应是当大于断点的时候垂直，因为垂直导航一般用于二级导航或者页内导航，屏幕太小的话，垂直导航占用了阅读空间，所以剧不用了。如果你想屏幕变小后可以隐藏水平导航的功能，下一章的导航工具条会具体介绍。
2.3 选项卡样式
使用基本的导航，并加入.nav-tabs以生成具有分页标签的界面。透过后面“选项卡使用”中的分页JavaScript插件来创造可切换的块。
选项卡样式很简单，要想实现具体功能，后面会详细介绍，后面也有详细代码。
2.4 胶囊
胶囊使用和选项卡相同，但使用.nav-pills取代nav-tabs：
2.5 填充并对齐
.nav内容有两种宽度扩展用的Class，使用.nav-fill会将.nav-item内容按照比例分配空间。注意，这会占用所有的水平空间，但并不是每个导航项目都具有相同宽度。
创建等宽元素请使用.nav-justified。所有的水平空间将被导航连接占据，但与上面的.nav-fill不同，每个导航项都将是相同的宽度。
首页
文章
图片
只有会员可以观看的视频视频
首页
文章
图片
只有会员可以观看的视频视频
大家可以对比一下两种对齐的区别。
3 导航组件的进一步扩展
3.1 使用弹性盒子实用类
如果需要响应式的导航变化，请使用一系列弹性盒子通用类。这些通用类在断点之间提供更多的自定义设定。在下面的示例中，我们的导航将在最小断点以下堆叠，并从small断点开始采用水平排版以填满所有可用宽度。
导航演示
Active
Longer nav link
Link
Disabled
不同浏览器宽度下的显示。
3.2 使用下拉列表
加入额外的HTML和下拉菜单JavaScript插件
带下拉列表的选项卡
导航演示
Active
Dropdown
- Action
- Another action
- Something else here
- Separated link
Link
Disabled
带下拉列表的胶囊只需要将nav-tabs换成nav-pills
4 使用选项卡
4.1 普通选项卡
前面的选项卡只有样式，是不起作用的。其实bootstrap已经为我们写好js代码，他们都在bootstrap.bundle.min.js中了。
导航演示
首页
资料
联系方式
首页内容
这里可以放文字、列表等一切页面元素
个人资料
这里可以放文字、列表等一切页面元素
联系方式
这里可以放文字、列表等一切页面元素
