Bootstrap 4参考手册

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>

尝试一下 »

导航对齐方式

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

实例

<ul class="nav justify-content-center">  <ul class="nav justify-content-end"> </div>

尝试一下 »

垂直导航

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

实例

尝试一下 »

选项卡

使用 .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>

尝试一下 »

胶囊导航

.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>

尝试一下 »

导航等宽

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

实例

尝试一下 »

胶囊下拉菜单

实例

<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>

尝试一下 »

选项卡下拉菜单

实例

<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>

尝试一下 »

动态选项卡

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

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

实例

<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>  <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>

尝试一下 »

胶囊状动态选项卡

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

实例

<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>  <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>

尝试一下 »

	Bootstrap4 导航

Bootstrap 4

Bootstrap 是一套用于 HTML、CSS 和 JS 开发的开源工具集。利用我们提供的 Sass 变量和大量 mixin、响应式栅格系统、可扩展的预制组件、基于 jQuery 的强大的插件系统，能够快速为你的想法开发出原型或者构建整个 app 。

主页	https://getbootstrap.com/
源码	https://github.com/twbs/bootstrap
版本	4
发布版本	4.0.0-beta.2

Bootstrap 4目录

1.快速开始 \| Getting started
2.组件·信息提示框 \| Alerts
3.组件·徽章 \| Badges
4.组件·面包屑导航 \| Breadcrumb
5.组件·按钮组 \| Button group
6.组件·按钮 \| Buttons
7.组件·卡片 \| Cards
8.组件·轮播 \| Carousel
9.组件·折叠 \| Collapse
10.组件·下拉菜单 \| Dropdowns
11.组件·表单 \| Forms
12.组件·输入框组 \| Input group
13.组件·大屏幕 \| Jumbotron
14.组件·列表组 \| List group
15.组件·模态框 \| Modal
16.组件·导航栏 \| Navbar
17.组件·导航 \| Navs
18.组件·分页 \| Pagination
19.组件·弹出框 \| Popovers
20.组件·进度条 \| Progress
21.组件·滚动监听 \| Scrollspy
22.组件·提示工具 \| Tooltips
23.内容 \| Content
24.布局 \| Layout
25.迁移 \| Migration
26.实用工具 \| Utilities
27.Bootstrap4 网格系统
28.Bootstrap4 按钮组
29.Bootstrap4 按钮
30.Bootstrap4 图像形状
31.Bootstrap4 表格
32.Bootstrap4 颜色
33.Bootstrap4 文字排版
34.Bootstrap4 轮播
35.Bootstrap4 表单控件
36.Bootstrap4 表单
37.Bootstrap4 导航栏
38.Bootstrap4 导航
39.Bootstrap4 折叠
40.Bootstrap4 下拉菜单
41.Bootstrap4 卡片
42.Bootstrap4 分页
43.Bootstrap4 小工具
44.Bootstrap4 滚动监听
45.Bootstrap4 弹出框
46.Bootstrap4 提示框
47.Bootstrap4 模态框
48.Bootstrap 4 多媒体对象
49.Bootstrap 4 Flex（弹性）布局
50.Bootstrap4 创建一个网页
51.Bootstrap4 自定义表单
52.Bootstrap4 面包屑导航（Breadcrumb）