bootstrap中導航條用什麼包裹
- WBOY原創
- 2022-02-11 16:54:032393瀏覽
在bootstrap中，導航條以「nav」元素來包裹，nav元素用於定義導航連結的部分，使用該元素包覆導航條可以讓導航條具有響應式特性，語法為「< nav>導航條」。
本教學操作環境：Windows10系統、bootstrap3.3.7版、DELL G3電腦
bootstrap中導覽條用什麼包
Bootstrap中的導航條（navbar）是放在應用程式或網站的頭部，作為導航的響應式基礎元件，它能夠根據瀏覽器視窗寬度，自動調整導航條的顯示狀態，在行動裝置上折疊（並且可開啟可關），在視口（viewport）寬度增加時逐漸變為水平展開模式。
預設樣式的導航條
Bootstrap的導航條包含兩部分內容：一部分用來放置圖示按鈕，由.navbar-header的容器定義；另一部分用來放置導航元件，由.nav-collapse.collapse的容器定義。
.navbar-header 容器中通常包含網站名稱和圖示按鈕，網站名稱總是可見的，而圖示按鈕卻只在小螢幕下可見。網站名稱是一個 .navbar-brand 的連結。圖示按鈕是一個.navbar-toggle類別的按鈕，其中包含三個 class=“icon-bar” 的 元素。定義按鈕時，也要為它提供 data-toggle 和 data-target 屬性。 data-toggle 屬性告訴 JavaScript 這個按鈕要做什麼，data-target 屬性指示點擊按鈕時要顯示的選單元素。
.nav-collapse.collapse 容器中通常只包含導航元件，如導航連結、表單、按鈕、下拉式選單、文字、非導航連結等，導航元件只在大螢幕下水平展開，在小螢幕下方要點擊圖示按鈕後才顯示出來。對於簡單的導航條，這裡通常只包含導航連結。導覽連結使用 .nav.navbar 的列表元素定義。
為了讓導航條具有響應式特性，通常使用一個 .navbar 的
當然，你也可以使用
相關推薦：bootstrap教學
#以上是bootstrap中導航條用什麼包裹的詳細內容。更多資訊請關注PHP中文網其他相關文章！