在bootstrap中,導航條以「nav」元素來包裹,nav元素用於定義導航連結的部分,使用該元素包覆導航條可以讓導航條具有響應式特性,語法為「< nav>導航條」。
本教學操作環境:Windows10系統、bootstrap3.3.7版、DELL G3電腦
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中文網其他相關文章!