导航
- 基本
nav组件不包含任何.active状态
- 直接用
nav标签或ul标签
- 更改导航的水平对齐方式，例如为中心
.justify-content-center
.flex-column通过使用该实用程序更改弹性项目方向来堆叠导航- 添加
.nav-tabs类以生成选项卡式界面
- 或
.nav-pills改用胶囊按钮式
- 使用
.nav-fill，所有水平空间都被占用，按比例填充
- 对于等宽元素，使用
.nav-justified. 所有水平空间都将被导航链接占用，但与.nav-fill不同的是，每个导航项目的宽度都相同。
- 在元素上指定
data-toggle="tab"或即可激活选项卡或药丸按钮导航
- 添加
.fade到每个.tab-pane. 第一个选项卡窗格还必须.show使初始内容可见
代码练习：
<ul class="nav justify-content-center nav-tabs">
<li>
<a href="#" class="nav-link active nav-item">首页</a>
</li>
<li>
<a href="#" class="nav-link nav-item">分类</a>
</li>
<li>
<a href="#" class="nav-link disabled nav-item">内容</a>
</li>
</ul>
<br />
<nav class="nav flex-column">
<a href="#" class="nav-link active">首页</a>
<a href="#" class="nav-link">分类</a>
<a href="#" class="nav-link disabled">内容</a>
</nav>
<br />
<nav class="nav nav-pills">
<a href="#" class="nav-link active nav-item">首页</a>
<a href="#" class="nav-link nav-item">分类1</a>
<a href="#" class="nav-link nav-item">分类2</a>
<a href="#" class="nav-link disabled nav-item">内容</a>
</nav>
<br />
<ul class="nav nav-pills nav-fill">
<li class="nav-item">
<a class="nav-link active" href="#">aa</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">bb</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">cc</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">dd</a>
</li>
</ul>
<br />
<nav class="nav nav-tabs">
<a href="#one" class="nav-link active nav-item" data-toggle="tab">首页</a>
<a href="#two" class="nav-link nav-item" data-toggle="tab">分类1</a>
<a href="#three" class="nav-link nav-item" data-toggle="tab">内容</a>
</nav>
<div>
<div id="one" class="tab-pane fade show active">
首页内容..............
</div>
<div id="two" class="tab-pane fade">
分类1.................
</div>
<div id="three" class="tab-pane fade">
分类2.................
</div>
</div>
导航条
- 最外层可以用一个
<nav></nav>标签，在里面写上.navbar属性，可用navbar-dark/light和bg-dark/light进行导航条字体颜色和背景颜色的设置
- 在nav里的左边可插入LOGO或其他内容，可设置
.navbar-brand属性来使文字进行与上面导航条的对比，以显示出来
- 每一个列表项可放在ul标签里的li标签li标签里，用a标签进行呈现
- ul标签需要添加
.navbar-nav属性，li标签需要添加.nav-item属性，a标签需要添加.nav-link属性
- 做成响应式的话，在nav里添加
.navbar-expand-md表示中等屏幕显示
- 想要大屏幕显示，中等屏幕隐藏的话，将ul包裹在div里，div添加
.collapse和.navbar-collapse属性
- 可以给中等屏幕及以下添加图标，点击图标，菜单显示，添加以下代码：
<button class="navbar-toggler" data-toggle="collapse" data-target="#navbar">
<span class="navbar-toggler-icon"></span>
</button>
- 也可将ul标签和li标签去掉，直接用div标签和a标签，可减少代码量
- 可在导航条里加文本，通过设置
.navbar-text属性使文本样式与导航条样式更统一
- 可用
.active或.disabled属性设置菜单选项的激活与禁用状态
练习：
<!--<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<span class="navbar-brand">LOGO</span>
<button class="navbar-toggler" data-toggle="collapse" data-target="#navbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbar">
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link" href="#">首页</a></li>
<li class="nav-item"><a class="nav-link" href="#">菜单1</a></li>
<li class="nav-item"><a class="nav-link" href="#">菜单2</a></li>
</ul>
</div>
</nav>-->
<br />
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<span class="navbar-brand">LOGO</span>
<button class="navbar-toggler" data-toggle="collapse" data-target="#navbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbar">
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#">首页</a>
<a class="nav-item nav-link" href="#">菜单1</a>
<a class="nav-item nav-link disabled" href="#">菜单2</a>
<span class="navbar-text">文本</span>
</div>
</div>
</nav>
