bootstrap中導航條用什麼包裹

在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 的

元素來包裝它。

標籤定義導覽連結的部分。

當然，你也可以使用

元素，但務必設定role="navigation"屬性，以確保讓使用輔助設備的使用者明確知道這是一個導航區域。另外，為了獲得適當的對齊和內邊距，可以把整個導航條放在 .container或 .container-fluid 的容器中。

相關推薦：bootstrap教學

#

以上是bootstrap中導航條用什麼包裹的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn