Bootstrap - 導航演示



什麼是導航欄?

Bootstrap 導航欄是網頁頂部響應式的導航標題。它可以根據螢幕尺寸展開或摺疊,為網站提供使用者友好的導航體驗。

Bootstrap 提供內建的 CSS 類來建立標準導航欄。

  • .navbar 類用於建立導航欄元件。

  • .navbar-brand 類表示網站或應用程式的品牌或徽標。

  • .navbar-collapse 類使導航選單摺疊成下拉選單或切換按鈕。

  • .navbar-nav 類用於建立具有多個導航連結或專案的水平導航選單。

  • .nav-item 類應應用於導航欄內的每個列表項(<li>)。

  • .nav-link 類用於樣式化導航元件中的錨標記(<a>)。

以下是一些導航欄的示例。

示例 描述 下載連結
基本導航欄 此示例顯示 Bootstrap 中導航欄的基本結構。 下載
抽屜式導航欄 此示例顯示在響應式網頁設計中使用抽屜式導航欄。 下載
靜態導航欄 此示例顯示固定在其網頁位置上的靜態導航欄的實現。 下載
固定導航欄 此示例顯示固定在視口頂部的導航欄 (fixed-top)。 下載
底部導航欄 此示例顯示導航欄固定在頁面底部。 下載
抽屜式導航欄 此示例顯示一個可以擴充套件為滑動抽屜式選單的導航欄。 下載
廣告