資料結構
網路
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 次瀏覽
廣告