数据结构
网络
RDBMS
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化学
生物
数学
英语
经济学
心理学
社会研究
时尚研究
法律研究使用 Bootstrap 创建一个带选项卡的导航菜单
要创建一个带有选项卡的导航菜单，首先创建一个带有 .nav 基本类和添加 .nav-tabs 类的基本无序列表。在网页上的导航选项卡如下所示 -
创建一个导航选项卡
使用 nav 和 nav-tabs 创建一个导航选项卡 -
<ul class = "nav nav-tabs"> <li class = "active"><a href = "#">Home</a></li> <li><a href = "#">About</a></li> <li><a href = "#">Products</a></li> <li><a href = "#">Contact Us</a></li> </ul>
设置当前页
上面，我们将 主页 设置为 活动，因为我们希望它成为当前页 -
<li class = "active"><a href = "#">Home</a></li>
创建带有下拉菜单的带选项卡的导航菜单
示例
让我们看一个创建带有选项卡的导航菜单的示例 -
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<link href = "/bootstrap/css/bootstrap.min.css" rel = "stylesheet">
<script src = "/scripts/jquery.min.js"></script>
<script src = "/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<p>My Website</p>
<ul class = "nav nav-tabs">
<li class = "active"><a href = "#">Home</a></li>
<li><a href = "#">About</a></li>
<li><a href = "#">Products</a></li>
<li><a href = "#">Contact Us</a></li>
</ul>
</body>
</html>
禁用带选项卡的导航菜单链接
示例
disabled 类用于在 Bootstrap 中 禁用 菜单链接 -
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<link href = "/bootstrap/css/bootstrap.min.css" rel = "stylesheet">
<script src = "/scripts/jquery.min.js"></script>
<script src = "/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<p>My Website</p>
<ul class = "nav nav-tabs">
<li class = "active"><a href = "#">Home</a></li>
<li><a href = "#">About</a></li>
<li><a href = "#">Products</a></li>
<li class = "disabled"><a href = "#">Jobs</a></li>
<li><a href = "#">Contact Us</a></li>
</ul>
</body>
</html>
更新于：2023 年 10 月 27 日
270 次浏览
广告