資料結構
網路
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>
停用選項卡導航菜單鏈接
示例
disable 類用於在 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 個瀏覽量
廣告