https://getbootstrap.com/docs/5.3/components/navs-tabs/
Bootstrap中的导航具有通用的标记和样式,从基本的.nav
类到活动和禁用状态。
基本的.nav
组件使用flexbox构建,为构建各种类型的导航组件提供了坚实的基础。它包括一些样式覆盖(用于与列表一起工作)、一些链接内边距以增大点击区域,以及基本的禁用样式。
创建基本导航
要创建基本的水平菜单,可以将.nav
类添加到<ul>
元素,然后为每个<li>
元素添加.nav-item
类,并将.nav-link
类添加到它们的链接元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="bootstrap5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
</head>
<body>
<div class="container">
<ul class="nav">
<li class="nav-item">
<a class="nav-link" href="#">首页</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">前端框架</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">后端框架</a>
</li>
</ul>
</div>
<script src="bootstrap5/js/bootstrap.bundle.min.js"></script>
</body>
</html>
导航对齐
禁用链接
完整代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="bootstrap5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
</head>
<body>
<div class="container">
<ul class="nav justify-content-center">
<li class="nav-item">
<a class="nav-link" href="#">首页</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">前端框架</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">后端框架</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">课程开发中</a>
</li>
</ul>
</div>
<script src="bootstrap5/js/bootstrap.bundle.min.js"></script>
</body>
</html>
垂直导航栏
完整代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="bootstrap5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
</head>
<body>
<div class="container">
<ul class="nav flex-column justify-content-center">
<li class="nav-item">
<a class="nav-link" href="#">首页</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">前端框架</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">后端框架</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">课程开发中</a>
</li>
</ul>
</div>
<script src="bootstrap5/js/bootstrap.bundle.min.js"></script>
</body>
</html>
选项卡式导航
https://getbootstrap.com/docs/5.3/components/navs-tabs/#tabs
添加类.nav-tabs
到基本导航来生成选项卡式的导航,并将.active
类添加到活动/当前链接。
完整代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="bootstrap5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
</head>
<body>
<div class="container">
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link" href="#">首页</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#">前端框架</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">后端框架</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">课程开发中</a>
</li>
</ul>
</div>
<script src="bootstrap5/js/bootstrap.bundle.min.js"></script>
</body>
</html>
选项卡导航中添加了字体图标
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="bootstrap5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
</head>
<body>
<div class="container">
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link" href="#"><i class="bi bi-house"></i> 首页</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#"> <i class="bi bi-book-half"></i> 前端框架</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="bi bi-book"></i> 后端框架</a>
</li>
<li class="nav-item">
<a class="nav-link disabled"><i class="bi bi-hourglass"></i> 课程开发中</a>
</li>
</ul>
</div>
<script src="bootstrap5/js/bootstrap.bundle.min.js"></script>
</body>
</html>
胶囊式导航
https://getbootstrap.com/docs/5.3/components/navs-tabs/#pills
在基本导航的基础中添加.nav-pills
类来创建胶囊式导航。
完整代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="bootstrap5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
</head>
<body>
<div class="container">
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link" href="#"><i class="bi bi-house"></i> 首页</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#"> <i class="bi bi-book-half"></i> 前端框架</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="bi bi-book"></i> 后端框架</a>
</li>
<li class="nav-item">
<a class="nav-link disabled"><i class="bi bi-hourglass"></i> 课程开发中</a>
</li>
</ul>
</div>
<script src="bootstrap5/js/bootstrap.bundle.min.js"></script>
</body>
</html>
等宽的选项卡
使用.nav-justified
,所有水平空间都将被导航链接占据,每个导航项的宽度都将相同。
完整代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="bootstrap5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
</head>
<body>
<div class="container">
<ul class="nav nav-pills nav-justified">
<li class="nav-item">
<a class="nav-link" href="#"><i class="bi bi-house"></i> 首页</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#"> <i class="bi bi-book-half"></i> 前端框架</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="bi bi-book"></i> 后端框架</a>
</li>
<li class="nav-item">
<a class="nav-link disabled"><i class="bi bi-hourglass"></i> 课程开发中</a>
</li>
</ul>
</div>
<script src="bootstrap5/js/bootstrap.bundle.min.js"></script>
</body>
</html>