导航基础
导航是网站设计中的重要组成部分，它帮助用户在不同的页面之间快速跳转。Bootstrap 5 提供了一套完整的导航组件，包括导航栏、标签页、胶囊式标签页等。
导航栏
导航栏是一种常用的导航工具，通常出现在页面的顶部。它不仅可以包含品牌标识、导航链接，还可以添加搜索框、按钮等其他元素。
基本导航栏
-- -------------------- ---- -------
---- ------------- ---------------- ------------ ----------
---- ------------------------
-- -------------------- ---------------
------- ---------------------- ------------- ------------------------- --------------------------- ------------------------- --------------------- ------------------ ------------
----- -----------------------------------
---------
---- --------------- ---------------- ---------------
--- -------------------
--- -----------------
-- --------------- ------- ------------------- ---------------
-----
--- -----------------
-- ---------------- ---------------
-----
--- -----------------
-- ---------------- ---------------
-----
--- -----------------
-- --------------- --------- -------- ------------- -----------------------------
-----
-----
------
------
------导航栏颜色和背景
你可以通过添加不同的类来改变导航栏的颜色和背景。
-- -------------------- ---- -------
---- ------------- ----------- ---------
---- ------------------------
-- -------------------- ---------------
------- ---------------------- ------------- ------------------------- --------------------------------------- ------------------------------------- --------------------- ------------------ ------------
----- -----------------------------------
---------
---- --------------- ---------------- ---------------------------
--- -------------------
--- -----------------
-- --------------- ------- ------------------- ---------------
-----
--- --------------- ----------
-- --------------- ---------------- -------- ------------------------------- ------------- ------------------------- ----------------------
--
----
--- -------------------- ------------------- ---------------------------------------------
------ --------------------- ---------------------
------ --------------------- ---------------------
------- ------------------------------
------ --------------------- ---------------------
-----
-----
-----
------
------
------标签页和胶囊式标签页
标签页和胶囊式标签页是另一种常见的导航方式，它们可以用来组织和展示内容。
标签页
-- -------------------- ---- -------
--- ---------- --------- ---------- ---------------
--- ---------------- --------------------
------- --------------- ------- ------------- -------------------- ---------------------- ------------- ---------- -------------------- --------------------------------
-----
--- ---------------- --------------------
------- ---------------- ---------------- -------------------- ------------------------- ------------- ---------- ----------------------- ---------------------------------
-----
--- ---------------- --------------------
------- ---------------- ---------------- -------------------- ------------------------- ------------- ---------- ----------------------- -----------------------------------
-----
-----
---- ------------------- ------------------
---- --------------- ---- ---- ------- --------- --------------- -----------------------------------------
---- --------------- ----- ------------ --------------- --------------------------------------------
---- --------------- ----- ------------ --------------- ----------------------------------------------
------胶囊式标签页
胶囊式标签页与标签页类似，只是外观不同。
-- -------------------- ---- -------
--- ---------- --------- ----- -------------- ---------------
--- ---------------- --------------------
------- --------------- ------- ------------------- --------------------- ---------------------------- ------------- ---------- -------------------------- --------------------------------
-----
--- ---------------- --------------------
------- ---------------- ---------------------- --------------------- ------------------------------- ------------- ---------- ----------------------------- ---------------------------------
-----
--- ---------------- --------------------
------- ---------------- ---------------------- --------------------- ------------------------------- ------------- ---------- ----------------------------- -----------------------------------
-----
-----
---- ------------------- ----------------------
---- --------------- ---- ---- ------- --------------- --------------- -----------------------------------------------
---- --------------- ----- ------------------ --------------- --------------------------------------------------
---- --------------- ----- ------------------ --------------- ----------------------------------------------------
------下拉菜单
下拉菜单常用于导航栏中，提供更多的选项。
-- -------------------- ---- -------
---- ------------- ---------------- ------------ ----------
---- ------------------------
-- -------------------- ---------------
------- ---------------------- ------------- ------------------------- ----------------------------------- --------------------------------- --------------------- ------------------ ------------
----- -----------------------------------
---------
---- --------------- ---------------- -----------------------
--- -------------------
--- -----------------
-- --------------- ------- ------------------- ---------------
-----
--- --------------- ----------
-- --------------- ---------------- -------- --------------------------- ------------- ------------------------- ----------------------
--
----
--- --------------------- -----------------------------------------
------ --------------------- ---------------------
------ --------------------- ---------------------
------ --------------------- ---------------------
-----
-----
-----
------
------
------以上是关于 Bootstrap 5 导航的基础介绍，包括导航栏、标签页、胶囊式标签页以及下拉菜单。这些组件可以帮助你构建一个美观且功能强大的导航系统。