Bootstrap 4 导航组件
Bootstrap 4 提供了 .nav 、 .nav-item 和 .nav-link CSS 类用于创建一个简单的导航栏
<ul class="nav"> <li class="nav-item"> <a class="nav-link" href="#">首页</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Python</a> </li> <li class="nav-item"> <a class="nav-link" href="#">PHP</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Perl</a> </li> </ul>
禁用某个导航项
可以将 .disabled 添加到 .nav-link 元素上来禁用一个导航项
<ul class="nav"> <li class="nav-item"> <a class="nav-link" href="#">首页</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Python</a> </li> <li class="nav-item"> <a class="nav-link" href="#">PHP</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Perl</a> </li> </ul>
导航对齐方式
默认情况下，导航条是左对齐的
可以在 .nav 元素上添加 .justify-content-center CSS 类设置导航居中显示
添加 .justify-content-end CSS 类设置导航右对齐
<!-- 导航居中 --> <ul class="nav justify-content-center"> <!-- 导航右对齐 --> <ul class="nav justify-content-end">
垂直导航
默认情况下，导航是水平的
可以在 .nav 元素上添加 .flex-column 创建垂直导航
<ul class="nav flex-column">
导航栏等宽
在 .nav 元素上添加 .nav-justified CSS 类可以设置导航项齐行等宽显示
<ul class="nav nav-justified">