bootstrap(5)关于导航
关于导航
首先说明一点，在Bootstrap中的导航组件都依赖于同一个.nav类，状态类是共用的，下面添加的nav样式都是基于 .nav的基类上添加的
1，导航样式
（1）在ul上添加样式
导航样式代码如下：
<ul class="nav nav-tabs">
<li role="presentation" class="active"><a href="#">Home</a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages</a></li>
</ul>
标签页：
.nav-tabs
标签页是下面这种效果：
胶囊式标签：
.nav-pills
胶囊式标签是下面这种效果
2,通过在后面添加类名为 class="stacked"可以实现标签页的垂直效果
3，通过添加class="nav-justified"可以实现响应式效果
当屏幕宽度大于768px的时候，标签可以实现水平效果此时所有的宽度相加等于屏幕的宽度，，当宽度小于768px的时候，标签则会发生重叠效果，每一个标签或者胶囊单独占一行
（2）我们对于li元素上添加的效果
1，实现禁用的链接
通过在相应的li选项上添加 .disabled类来实现
代码如下：
<ul>
......
<li role="presentation" class="disabled" ><a href="">disabled link</a></li>
......
</ul>
2，在选项中添加下拉菜单选项只要应用到 li元素的选项上添加dropdown下拉class就可以了
代码如下：
<ul class="nav nav-tabs">
.....
<li role="presentation" class="dropdown">
<a class="dropdown-toggle " data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
Dropdown<span class="caret"></span>
</a>
<ul class="dropdown-menu">
.....
</ul>
</li>
</ul>
效果如上图所示
胶囊式的下拉菜单和标签只要将
class="nav nav-tabs"换为 class="nav nav-pills"就可以了
二：关于导航条
（1）导航条的样式问题：
实现一个简单的导航条（navbar）：
与普通的标签相比，这个元素呈现出的导航栏呈现一个条状的特征
如果需要使用导航组件实现导航条功能，需要在ul外侧的逻辑父元素上添加role="navigation"属性，或者用一个<nav>元素
代码如下：
<div class="navbar navbar-default" role="navigation"><!--role是为了方便屏幕阅读器理解此处内容-->
<ul class="nav navbar-nav">
<li class="active"><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">PHP</a></li>
</ul>
</div>
效果如下：
当屏幕缩小的时候，就变成了下面这幅图的样子：
(2)带有标题的菜单，通过在导航条最外面的元素内添加 class="navbar-header" 和 class="navbar-brand"来实现的
代码如下：
需要添加的内容：
<div class=navbar-header>
<a href="##" class="navbar-brand">前端开发</a>
</div>
我们通过为菜单栏添加标题得到的效果如下:
(2)关于二级菜单
我们是如何实现二级菜单的呢？
二级菜单是下面的这种效果：
如何实现,其实很简单，我们只要在导航条内添加下拉菜单的按钮就可以了
代码如下：
<div class="navbar navbar-default" role="navigation"><!--role是为了方便屏幕阅读器理解此处内容-->
<div class="navbar-header">
<a href="#" class="navbar-brand ">前端学习</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
<li>
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
PHP<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">jQuery</a></li>
<li><a href="#">Vue</a></li>
<li><a href="#">NodeJS</a></li>
</ul>
</li>
</ul>
</div>
并且当我们屏幕缩小的时候会出现下面的效果：
（3）对于导航栏元素的各种操作样式
1》》对于导航条中的<button>元素，我们通过为<button>元素添加class为 .navbar-btn后可以实现在导航条中垂直居中的效果
<button type="button" class="btn btn-default navbar-btn">Sign in</button>
效果如下：
使用 .navbar-btn 可以用在<a>和 <input>元素内，但是在 .navbar-nav内，.navbar-btn不应该用在<a>元素上
2》》对于导航条内的文本，我们想让导航条内的文本出现垂直居中的效果，只要在要居中的元素内加上 class="navbar-text"
3》》使用 .navbar-left 和 .navbar-right来实现导航链接，表单，按钮或者文本在导航条内的对齐
4》》通过添加 .navbar-fixed-top可以实现将导航条固定在顶部,
通过添加 .navbar-fixed-bottom可以实现将导航条固定在底部
通过添加.navbar-static-top类可以实现创建一个与页面等宽度的导航条，会随着页面向下滚动而消失
5》》通过添加 .navbar-inverse可以改变导航条的外观
<div class="navbar navbar-default navbar-inverse" role="navigation" >
<div class="container">
.......
</div>
</div>
效果如下：
6》》面包屑布局：
我们要显示当前的位置应该如何显示呢？
例如我们要实现下面的效果：
代码如下：
<ol class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Library</a></li>
<li class="active">Data</li>
</ol>
给总体的元素添加一个class为 breadcrumb的class,后面跟上 <li>元素用来实现面包屑
我们观察bootstrap源码我们可以知道这个是如何实现的：
.breadcrumb {
padding: 8px 15px;
margin-bottom: 20px;
list-style: none;
background-color: #f5f5f5;
border-radius: 4px;
}
.breadcrumb > li {
display: inline-block;
}
.breadcrumb > li + li:before {
padding: 0 5px;
color: #ccc;
content: "/\00a0";
}
.breadcrumb > .active {
color: #777;
}
我们看到，这个是对于class为 breadcrumb的元素下的li元素添加一个 "/"来实现的 通过 before {content来实现的}
并且对于添加了class为 active 的元素使用 color:#777改变了颜色，这个应该应用到当前所在的位置
