Navbar 導覽列
CH7 70
課程練習下載
Bootstrap 路徑 : Components / Navbar
| Navbar 基本運作方式 | 範例
- Navbar 透過
.navbar-expand{ sm | lg | xl }
給予響應式的折疊 ,{ } 內的尺寸可設定想於哪個斷點下顯示摺疊選單- 與 Nav 最大差異於有無摺疊選單
.navbar-light
與.navbar-dark
為 navber 主題.navbar-light
會搭配.bg-light
,字為黑色.navbar-dark
會搭配.bg-dark
,字為白色
.navbar
結構會搭配<a>
連結,如果不想要使用連結,可使用<span>
或其他文字元素取代.navbar-brand
會使用於公司,產品或專案名稱
<nav class="navbar navbar-dark bg-dark">
<a class="navbar-bland" href="#">Navbar<a>
</nav>
<nav class="navbar navbar-dark bg-dark">
<span class="h1" class="navbar-bland">Navbar<a>
</nav>
| Navbar 折疊漢堡選單 | 範例
Navbar + Dropdown + form
架構拆解
- nav.navbar.navbar-light.bg-light.navbar-expand{ sm | lg | xl }
- a.navbar-brand ( 這邊通常放 LOGO , 亦可加入H1)
- button.navbar-toggler data-toggle="collapse" ( .navbar.collapse.collapse 折疊選單被折疊於 button.navbar-toggle 內,需以 data-toggle="collapse" 啟用 。另外 data-target的ID需與.collapse 一樣 )
- span.navbar-toggler-icon
- .navbar-collapse.collapse ( 此折疊選單被折疊於 button.navbar-toggle 內 )
- ul.navbar-nav
- li.nav-item
- a.nav-link
- li.nav-item
- ul.navbar-nav
| Navbar 加入品牌 LOGO 圖片 | 範例
- Logo 圖片請使用 svg 格式
<!-- Just an image -->
<nav class="navbar navbar-light bg-light">
<a class="navbar-brand" href="#">
<img src="圖片路徑" width="30" height="30" alt="">
</a>
</nav>
| Navbar 加入表單 Form | 範例
- Form 表單預設為上下排列,可加入 form.form-inline 讓它呈現水平排列。
| Navbar 更換顏色 Color schemes | 範例
兩主方式
nav.navbar-{ dark | light }
後方的.bg-目標
,目標更換主題色nav.navbar-dark
字為白色nav.navbar-light
字為黑色
nav.navbar-{ dark | light }
加入 style 並於目標處填入色票號碼 #000000
<nav class="navbar navbar-dark bg-目標">
<span class="navbar-text">Lorem, ipsum dolor.</span>
</nav>
<nav class="navbar navbar-light" style="background-color: 目標;">
<span class="navbar-text">
Navbar text with an inline element
</span>
</nav>
| Navbar 定位 Placement |
- .fixed-top , .fixed-bottom 範例
- .sticky-top 範例
- 使用 fixed 的 CLASS 讓 navbar 定位於網頁的上方、下方、網頁往下滑動時依舊固定於上方
.sticky-top
可加在很多地方,例如左方側邊欄上。如需加在選單上,需於內容上方
| fixed-top 與 sticky-top 差異? | 範例
.fixed-top
: 不佔空間,下方內文會被遮住。.sticky-top
: 會佔住空間,下方內文不會被遮住。預設寬度為 100%;
資料來源
- 六角學院 – 精通 Bootstrap 4 開發超強不解釋
- 六角中譯 Bootstrap 官網
- Bootstrap 官方網站