Bootstrap4 教程
1. Bootstrap4 教程 2. Bootstrap4 安装使用 3. Bootstrap4 网格系统 4. Bootstrap4 文字排版 5. Bootstrap4 颜色 6. Bootstrap4 图像形状 7. Bootstrap4 Jumbotron 8. Bootstrap4 信息提示框 9. Bootstrap4 按钮 10. Bootstrap4 按钮组 11. Bootstrap4 徽章(Badges) 12. Bootstrap4 进度条 13. Bootstrap4 分页 14. Bootstrap4 列表组 15. Bootstrap4 卡片 16. Bootstrap4 下拉菜单 17. Bootstrap4 折叠 18. Bootstrap4 导航 19. Bootstrap4 导航栏 20. Bootstrap4 表单 21. Bootstrap4 表单控件 22. Bootstrap4 轮播 23. Bootstrap4 模态框 24. Bootstrap4 提示框 25. Bootstrap4 弹出框 26. Bootstrap4 滚动监听 27. Bootstrap4 小工具 28. Bootstrap 4 Flex(弹性)布局 29. Bootstrap 4 多媒体对象 30. Bootstrap4 创建一个网页

Bootstrap4 导航

Bootstrap4 导航

如果你想创建一个简单的水平导航栏,可以在 <ul> 元素上添加 .nav类,在每个 <li> 选项上添加 .nav-item 类,在每个链接上添加 .nav-link 类:

实例

<ul class="nav"> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li> </ul>

55面试教程网 »

导航对齐方式

.justify-content-center 类设置导航居中显示, .justify-content-end 类设置导航右对齐。

实例

<!-- 导航居中 --> <ul class="nav justify-content-center"> <!-- 导航右对齐 --> <ul class="nav justify-content-end"> </div>

55面试教程网 »

垂直导航

.flex-column 类用于创建垂直导航:

实例

<ul class="nav flex-column">

55面试教程网 »

选项卡

使用 .nav-tabs 类可以将导航转化为选项卡。然后对于选中的选项使用 .active 类来标记。

实例

<ul class="nav nav-tabs"> <li class="nav-item"> <a class="nav-link active" href="#">Active</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li> </ul>

55面试教程网 »

胶囊导航

.nav-pills 类可以将导航项设置成胶囊形状。

实例

<ul class="nav nav-pills"> <li class="nav-item"> <a class="nav-link active" href="#">Active</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li> </ul>

55面试教程网 »

导航等宽

.nav-justified 类可以设置导航项齐行等宽显示。

实例

<ul class="nav nav-pills nav-justified">..</ul> <ul class="nav nav-tabs nav-justified">..</ul>

55面试教程网 »

胶囊下拉菜单

实例

<ul class="nav nav-pills"> <li class="nav-item"> <a class="nav-link active" href="#">Active</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">Dropdown</a> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a> </div> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li> </ul>

55面试教程网 »

选项卡下拉菜单

实例

<ul class="nav nav-tabs"> <li class="nav-item"> <a class="nav-link active" href="#">Active</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">Dropdown</a> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a> </div> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li> </ul>

55面试教程网 »

动态选项卡

如果你要设置选项卡是动态可切换的,可以在每个链接上添加 data-toggle="tab" 属性。 然后在每个选项对应的内容的上添加 .tab-pane 类。

如果你希望有淡入效果可以在 .tab-pane 后添加 .fade类:

实例

<!-- Nav tabs --> <ul class="nav nav-tabs"> <li class="nav-item"> <a class="nav-link active" data-toggle="tab" href="#home">Home</a> </li> <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#menu1">Menu 1</a> </li> <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#menu2">Menu 2</a> </li> </ul> <!-- Tab panes --> <div class="tab-content"> <div class="tab-pane active container" id="home">...</div> <div class="tab-pane container" id="menu1">...</div> <div class="tab-pane container" id="menu2">...</div> </div>

55面试教程网 »

胶囊状动态选项卡

胶囊状动态选项卡只需要将以上实例的代码中 data-toggle 属性设置为 data-toggle="pill":

实例

<!-- Nav pills --> <ul class="nav nav-pills"> <li class="nav-item"> <a class="nav-link active" data-toggle="pill" href="#home">Home</a> </li> <li class="nav-item"> <a class="nav-link" data-toggle="pill" href="#menu1">Menu 1</a> </li> <li class="nav-item"> <a class="nav-link" data-toggle="pill" href="#menu2">Menu 2</a> </li> </ul> <!-- Tab panes --> <div class="tab-content"> <div class="tab-pane active container" id="home">...</div> <div class="tab-pane container" id="menu1">...</div> <div class="tab-pane container" id="menu2">...</div> </div>

55面试教程网 »