Bootstrap 5學習教程，從入門到精通，Bootstrap 5 導航語法知識點及案例代碼（17）

Bootstrap 5 導航語法知識點及案例代碼

Bootstrap 5 提供了強大的導航組件，幫助開發者快速構建響應式且美觀的導航欄。

一、Bootstrap 5 導航組件概述

Bootstrap 5 提供了多種導航組件，主要包括：

  1. 導航欄（Navbar）：用于網站的主要導航區域，支持響應式設計。
  2. 導航（Nav）：基礎的導航組件，可以用于標簽頁、導航菜單等。
  3. 面包屑導航（Breadcrumb）：顯示當前頁面的位置路徑。

本指南將重點介紹 導航欄（Navbar） 和 導航（Nav） 的使用。

二、導航欄（Navbar）語法知識點

1. 基本結構

<nav class="navbar navbar-expand{-sm|-md|-lg|-xl|-xxl} navbar-light bg-light"><div class="container-fluid"><!-- 品牌/logo --><a class="navbar-brand" href="#">品牌</a><!-- 切換按鈕（移動端） --><button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="切換導航"><span class="navbar-toggler-icon"></span></button><!-- 導航鏈接 --><div class="collapse navbar-collapse" id="navbarNav"><ul class="navbar-nav"><li class="nav-item"><a class="nav-link active" aria-current="page" 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" href="#" tabindex="-1" aria-disabled="true">禁用</a></li></ul></div></div>
</nav>

2. 主要類說明

  • navbar：基礎類，定義導航欄。
  • navbar-expand{-sm|-md|-lg|-xl|-xxl}：控制導航欄在不同屏幕尺寸下的展開行為。
  • navbar-light / navbar-dark：設置導航欄的文字和圖標顏色。
  • bg-light / bg-dark 等：設置導航欄的背景顏色。
  • navbar-brand：品牌或網站名稱。
  • navbar-toggler：切換按鈕，用于在移動端顯示或隱藏導航鏈接。
  • navbar-collapse：包含導航鏈接的容器。
  • navbar-nav：導航鏈接的容器。
  • nav-item：單個導航項。
  • nav-link：導航鏈接。

3. 響應式設計

通過添加 navbar-expand-{breakpoint} 類，可以控制導航欄在不同屏幕尺寸下的顯示方式。例如：

  • navbar-expand-sm：在小屏幕（≥576px）下展開。
  • navbar-expand-md：在中屏幕（≥768px）下展開。
  • navbar-expand-lg：在大屏幕（≥992px）下展開。
  • navbar-expand-xl：在超大屏幕（≥1200px）下展開。
  • navbar-expand-xxl：在超超大屏幕（≥1400px）下展開。

4. 導航欄顏色

Bootstrap 提供了多種預定義的顏色類：

  • navbar-light bg-light：淺色背景，文字為深色。
  • navbar-dark bg-dark：深色背景，文字為淺色。
  • 其他顏色類如 bg-primary, bg-success, bg-danger 等也可使用。

5. 導航欄內容

導航欄可以包含以下內容：

  • 品牌/logo：使用 navbar-brand。
  • 導航鏈接：使用 nav-link。
  • 下拉菜單：結合 dropdown 組件。
  • 表單元素：如搜索框。
  • 按鈕：如登錄按鈕。

三、導航（Nav）語法知識點

1. 基本結構

<ul class="nav"><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" href="#">鏈接</a></li><li class="nav-item"><a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">禁用</a></li>
</ul>

2. 主要類說明

  • nav：基礎類，定義導航。
  • nav-item：單個導航項。
  • nav-link：導航鏈接。
  • active：表示當前活動的鏈接。
  • disabled：禁用鏈接。

3. 對齊方式

  • 左對齊（默認）：

    <ul class="nav">...
</ul>

  • 居中對齊：

    <ul class="nav justify-content-center">...
</ul>

  • 右對齊：

    <ul class="nav justify-content-end">...
</ul>

4. 垂直導航

<ul class="nav flex-column">...
</ul>

5. 導航選項卡（Tabs）

<ul class="nav nav-tabs"><li class="nav-item"><a class="nav-link active" href="#">活動</a></li><li class="nav-item"><a class="nav-link" href="#">鏈接</a></li>...
</ul>

6. 導航藥丸（Pills）

<ul class="nav nav-pills"><li class="nav-item"><a class="nav-link active" href="#">活動</a></li><li class="nav-item"><a class="nav-link" href="#">鏈接</a></li>...
</ul>

7. 填充和調整

  • 填充：

    <ul class="nav nav-pills nav-fill">...
</ul>

  • 等寬：

    <ul class="nav nav-pills nav-justified">...
</ul>

四、案例代碼

以下是一個包含導航欄和導航鏈接的完整示例，代碼中包含詳細注釋：

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>Bootstrap 5 導航示例</title><!-- Bootstrap 5 CSS --><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body><!-- 導航欄 --><nav class="navbar navbar-expand-lg navbar-dark bg-dark"><div class="container-fluid"><!-- 品牌 --><a class="navbar-brand" href="#">我的網站</a><!-- 切換按鈕（移動端） --><button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="切換導航"><span class="navbar-toggler-icon"></span></button><!-- 導航鏈接 --><div class="collapse navbar-collapse" id="navbarNav"><ul class="navbar-nav me-auto mb-2 mb-lg-0"><!-- 首頁 --><li class="nav-item"><a class="nav-link active" aria-current="page" href="#">首頁</a></li><!-- 關于我們 --><li class="nav-item"><a class="nav-link" href="#">關于我們</a></li><!-- 服務 --><li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">服務</a><ul class="dropdown-menu" aria-labelledby="navbarDropdown"><li><a class="dropdown-item" href="#">服務一</a></li><li><a class="dropdown-item" href="#">服務二</a></li><li><hr class="dropdown-divider"></li><li><a class="dropdown-item" href="#">其他服務</a></li></ul></li><!-- 聯系 --><li class="nav-item"><a class="nav-link" href="#">聯系</a></li></ul><!-- 搜索表單 --><form class="d-flex" role="search"><input class="form-control me-2" type="search" placeholder="搜索" aria-label="搜索"><button class="btn btn-outline-success" type="submit">搜索</button></form></div></div></nav><!-- 主內容 --><div class="container mt-4"><h1>歡迎來到我的網站</h1><p>這是一個使用 Bootstrap 5 構建的導航欄示例。</p></div><!-- Bootstrap 5 JS 和依賴項 --><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

代碼說明

  1. 引入 Bootstrap 5 CSS 和 JS：

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

    使用 CDN 引入 Bootstrap 5 的 CSS 和 JS 文件。

  2. 導航欄結構：

    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">...
</nav>
    • navbar-expand-lg：在大屏幕（≥992px）下展開。
    • navbar-dark bg-dark：深色背景，文字為淺色。

  3. 品牌：

    <a class="navbar-brand" href="#">我的網站</a>

    設置導航欄的品牌名稱。

  4. 切換按鈕：

    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="切換導航"><span class="navbar-toggler-icon"></span>
</button>

    在移動端顯示一個切換按鈕，用于展開或折疊導航鏈接。

  5. 導航鏈接：

    <div class="collapse navbar-collapse" id="navbarNav"><ul class="navbar-nav me-auto mb-2 mb-lg-0">...</ul>...
</div>
    • collapse navbar-collapse：包含導航鏈接的容器，支持響應式折疊。
    • navbar-nav：導航鏈接的容器。
    • me-auto：將導航鏈接推到左側，右側留出空間給搜索表單。

  6. 下拉菜單：

    <li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">服務</a><ul class="dropdown-menu" aria-labelledby="navbarDropdown"><li><a class="dropdown-item" href="#">服務一</a></li>...</ul>
</li>

    使用 dropdown 組件創建下拉菜單。

  7. 搜索表單：

    <form class="d-flex" role="search"><input class="form-control me-2" type="search" placeholder="搜索" aria-label="搜索"><button class="btn btn-outline-success" type="submit">搜索</button>
</form>

    使用 Bootstrap 的表單類創建一個搜索框和提交按鈕。

  8. 主內容容器：

    <div class="container mt-4">...
</div>

    使用 container 類創建一個響應式容器，并添加頂部外邊距。

五、擴展功能

1. 固定導航欄

  • 固定頂部：

    <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">...
</nav>

  • 固定底部：

    <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-bottom">...
</nav>

  • 粘性頂部（在滾動時固定）：

    <nav class="navbar navbar-expand-lg navbar-dark bg-dark sticky-top">...
</nav>

2. 顏色主題

Bootstrap 提供了多種顏色主題，可以根據需要選擇：

  • bg-primary：主要顏色。
  • bg-secondary：次要顏色。
  • bg-success：成功顏色。
  • bg-danger：危險顏色。
  • bg-warning：警告顏色。
  • bg-info：信息顏色。
  • bg-light：淺色。
  • bg-dark：深色。

3. 導航欄內容對齊

  • 左側對齊（默認）。

  • 居中對齊：

    <div class="navbar-nav mx-auto">...
</div>

  • 右側對齊：

    <div class="navbar-nav ms-auto">...
</div>

4. 導航欄中添加按鈕

<div class="collapse navbar-collapse" id="navbarNav">...<button class="btn btn-outline-light me-2" type="button">按鈕</button><button class="btn btn-primary" type="button">注冊</button>
</div>

六、總結

通過以上語法知識點和案例代碼，Bootstrap 5 的導航組件應該已經對初學者變得清晰易懂。關鍵在于理解各個類的用途和組合方式，以及如何利用 Bootstrap 的響應式設計特性來適應不同的設備屏幕。

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/diannao/87539.shtml
繁體地址，請注明出處：http://hk.pswp.cn/diannao/87539.shtml
英文地址，請注明出處：http://en.pswp.cn/diannao/87539.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

清除 docker 無用的 鏡像/容器

清除 docker 無用的 鏡像/容器

清除 docker 無用的 鏡像/容器 刪除 <none> 的 docker 鏡像 使用以下命令刪除所有 的 Docker 鏡像&#xff08;即懸空鏡像 / dangling images&#xff09;&#xff1a; docker image prune -f這會自動刪除所有沒有 tag 的鏡像&#xff08;&#xff09;&#xff0c;不會…
閱讀更多...
使用Charles抓包工具提升API調試與性能優化效率

使用Charles抓包工具提升API調試與性能優化效率

在軟件開發過程中&#xff0c;網絡請求調試和性能優化往往成為開發者遇到的挑戰&#xff0c;尤其是在進行API接口調試時。開發者需要確保網絡請求的正確性、響應時間以及系統的整體性能。然而&#xff0c;傳統的調試方法常常無法提供足夠的細節來深入分析問題&#xff0c;進而影…
閱讀更多...
如何協調各項目關鍵節點的沖突與依賴

如何協調各項目關鍵節點的沖突與依賴

在多項目并行的環境下&#xff0c;關鍵節點間的沖突與依賴是導致項目延期、資源浪費和溝通誤解的主要根源。要高效協調此類問題&#xff0c;企業應重點從建立透明的進度依賴圖、使用項目管理工具對齊節點、推動跨部門協同機制入手。其中&#xff0c;通過Gantt圖或關鍵路徑法實現…
閱讀更多...
mongodb單節點改副本集模式

mongodb單節點改副本集模式

前一陣將三節點的副本集改成了單節點&#xff0c;但后面業務代碼出現問題&#xff1a;無法使用事務&#xff0c;因為事務只有在副本集上能用&#xff0c;單節點無法使用&#xff0c;故需要改回副本集模式&#xff0c;而我目前僅有一臺服務器&#xff0c;所以考慮在一臺服務器上…
閱讀更多...
Android 修改了頁面的xml布局，使用了databinding，這時候編譯時需要用到apt嗎

Android 修改了頁面的xml布局，使用了databinding，這時候編譯時需要用到apt嗎

deepseek回答&#xff1a; 在 Android 開發中使用 DataBinding 時&#xff0c;不需要顯式使用 apt&#xff08;Annotation Processing Tool&#xff09;。以下是詳細說明&#xff1a; 1. DataBinding 的編譯機制 DataBinding 是 Android Gradle 插件原生支持的功能&#xff…
閱讀更多...
服務器如何從http升級到https（nginx）

服務器如何從http升級到https（nginx）

1.證書申請 可以到阿里云或者華為云去申請證書&#xff0c;申請完下載證書是個壓縮包&#xff0c;然后解壓 可以到到幾個文件夾&#xff0c;找到 .Nginx 文件夾打開 會有兩個文件&#xff0c;將這兩個文件上傳至nginx/conf/cert文件夾下&#xff08;cert需要手…
閱讀更多...
6.19_JAVA_微服務

6.19_JAVA_微服務

1、跑后端的時候要把數據庫跑起來&#xff0c;否則會報錯。 2、predicate斷言&#xff1a; 預言&#xff1a;predict 3、gateway&#xff1a;出路口 4、API&#xff1a;List.of("a", "b", "c");把abc編程一個集合。 5、 6、shortcutFieldOrd…
閱讀更多...
Linux 基礎命令：`ls`、`cd`、`du` 快速入門

Linux 基礎命令：`ls`、`cd`、`du` 快速入門

在 Linux 系統中&#xff0c;ls、cd 和 du 是日常操作中最常用的三個命令。掌握它們能大幅提升文件管理效率。 1. ls&#xff1a;查看目錄內容 用途&#xff1a;列出當前或指定目錄下的文件和子目錄。 常用命令&#xff1a; ls -l # 詳細列表&#xff08;權限、大…
閱讀更多...
408第一季 - 數據結構 - 散列表

408第一季 - 數據結構 - 散列表

散列表 概念 散列表本身就是為了查找 原始人思想 散列表思想 6%5 是 1 1%5 也是1 沖突 沖突怎么辦&#xff1f; 線性探測法 就往后找&#xff0c;1跑到索引為2 然后查找&#xff0c;可以發現&#xff0c;只要沒沖突就只用查找1次 然后你想找10的話&#xff0c;發現索引為0…
閱讀更多...
Spring Boot 集成 Elasticsearch（含 ElasticsearchRestTemplate 示例）

Spring Boot 集成 Elasticsearch（含 ElasticsearchRestTemplate 示例）

Elasticsearch 是一個基于 Lucene 的分布式搜索服務器&#xff0c;具有高效的全文檢索能力。在現代應用中&#xff0c;尤其是需要強大搜索功能的系統中&#xff0c;Elasticsearch 被廣泛使用。 Spring Boot 提供了對 Elasticsearch 的集成支持&#xff0c;使得開發者可以輕松地…
閱讀更多...
CMake實踐：指定gcc版本編譯和交叉編譯

CMake實踐：指定gcc版本編譯和交叉編譯

目錄 1.指定gcc版本編譯 1.1.通過CMake參數來實現 1.2.使用 RPATH/RUNPATH 直接指定庫路徑 1.3.使用符號鏈接和 LD_LIBRARY_PATH 1.4.使用 wrapper 腳本封裝 LD_LIBRARY_PATH 2.交叉編譯 2.1.基本用法 2.2.工具鏈文件關鍵配置 2.3.多平臺工具鏈示例 2.4.注意事項 2.…
閱讀更多...
詳解鴻蒙Next倉頡開發語言中的全屏模式

詳解鴻蒙Next倉頡開發語言中的全屏模式

大家好&#xff0c;今天跟大家分享一下倉頡開發語言中的全屏模式。 和ArkTS一樣&#xff0c;倉頡的新建項目默認是非全屏模式的&#xff0c;如果你的應用顏色比較豐富&#xff0c;就會發現屏幕上方和底部的留白&#xff0c;這是應用自動避讓了屏幕上方攝像頭區域和底部的導航條…
閱讀更多...
LoRA 淺析

LoRA 淺析

1. 核心思想 LoRA 是一種參數高效的微調方法&#xff0c;旨在減少微調大型語言模型 (LLMs) 所需的計算資源和存儲空間。其核心思想是&#xff1a; 凍結預訓練模型權重&#xff1a; 在微調過程中&#xff0c;保持預訓練 LLM 的原始權重不變。引入低秩矩陣&#xff1a; 對于 LL…
閱讀更多...
軟件范式正在經歷第三次革命

軟件范式正在經歷第三次革命

核心主題&#xff1a;軟件范式正在經歷第三次根本性革命&#xff08;軟件3.0&#xff09;&#xff0c;其核心是“智能體”&#xff08;Agent&#xff09;&#xff0c;未來十年將是“智能體的十年”。 邏輯模塊解析&#xff1a; 軟件的三次重生革命 軟件1.0&#xff1a; 傳統編…
閱讀更多...
JavaScript 變量與運算符全面解析：從基礎到高級應用

JavaScript 變量與運算符全面解析：從基礎到高級應用

昨天學長說可以放緩一下學習進度,剛好最近期末復習也不是很緊張,所以來重新復習一下js的一些知識點。 一&#xff1a;變量 &#xff08;1&#xff09;變量聲明 來簡單看一下變量的一些知識點。首先是變量聲明&#xff1a;變量聲明盡量使用數組字母下劃線 來舉幾個例子&#x…
閱讀更多...
移動語義對性能優化的具體示例

移動語義對性能優化的具體示例

前言 本文章對比了&#xff1a;小中大字符串在普通傳值、傳值移動、傳左值引用、傳右值引用、模板完美轉發、內聯版本等多種測試&#xff0c;對比各個方式的性能優異&#xff1a; 測試代碼1 #include <iostream> #include <string> #include <chrono> #incl…
閱讀更多...
C/C++ 和 OpenCV 來制作一個能與人對弈的實體棋盤機器人

C/C++ 和 OpenCV 來制作一個能與人對弈的實體棋盤機器人

項目核心架構 整個系統可以分為四個主要模塊&#xff1a; 視覺感知模塊 (Vision Perception Module): 任務: 使用攝像頭“看懂”棋盤。工具: C, OpenCV。功能: 校準攝像頭、檢測棋盤邊界、進行透視變換、分割 64 個棋盤格、識別每個格子上的棋子、檢測人類玩家的走法。 決策模…
閱讀更多...
SpringBoot擴展——日志管理！

SpringBoot擴展——日志管理！

Spring Boot擴展 在Spring Boot中可以集成第三方的框架如MyBatis、MyBatis-Plus和RabbitMQ等統稱為擴展。每一個擴展會封裝成一個集成&#xff0c;即Spring Boot的starter&#xff08;依賴組件&#xff09;。starter是一種非常重要的機制&#xff0c;不需要煩瑣的配置&#xf…
閱讀更多...
【JSON-To-Video】AI智能體開發：為視頻圖片元素添加動效（滑入、旋轉、滑出），附代碼

【JSON-To-Video】AI智能體開發：為視頻圖片元素添加動效（滑入、旋轉、滑出），附代碼

各位朋友們&#xff0c;大家好&#xff01; 今天要教大家如何在 JSON - To - Video 中為視頻內圖片元素添加滑入、旋轉、滑出的動效。 如果您還不會封裝制作自己的【視頻工具插件】&#xff0c;歡迎查看之前的教程&#xff01; AI智能體平臺&#xff0c;如何封裝自定義短視頻…
閱讀更多...
Spring Boot(九十二)：Spring Boot實現連接不上數據庫就重啟服務

Spring Boot(九十二)：Spring Boot實現連接不上數據庫就重啟服務

場景： 在線上部署時，若服務器因斷電等原因意外重啟，項目及其依賴的數據庫服務通常需要配置為自動啟動。此時，如果數據庫服務啟動較慢或失敗，Spring Boot 項目會因無法建立數據庫連接而啟動失敗。 需求： 為確保項目啟動成功，需要讓 Spring Boot 項目等待數據庫服務完全就…
閱讀更多...
最新文章

Copyright @ 2022~2023