使用 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 次浏览

助力你的 职业生涯

通过完成课程获得认证

入门
广告