Bootstrap 使用相當多的 Class 來加疊製作網頁上的功能與效果，由其是 Nav 的架構上也是如此，透過分析記錄下每個 Class 的功能。
水平排列
<ul class="list-inline"> 把表單變成水平排列
See the Pen bootstrap-覽列_Navigation Bar分析_.list-inline by Jimmy_Wu (@Jimmy_Wu) on CodePen.light
基本標籤 tabs
ul.nav.nav-tabs 成為有下方底線的 Tabs。
See the Pen bootstrap-覽列_Navigation Bar分析_.nav.nav-tabs by Jimmy_Wu (@Jimmy_Wu) on CodePen.light
ul.nav.nav-tabs 裡的 li.active 會成為 tabs 的目前頁面。
See the Pen bootstrap-覽列_Navigation Bar分析_.nav.nav-tabs by Jimmy_Wu (@Jimmy_Wu) on CodePen.light
可下拉式的標籤 dropdown tabs
See the Pen bootstrap-覽列_Navigation Bar分析_.dropdown by Jimmy_Wu (@Jimmy_Wu) on CodePen.light
- 增加下拉式選 <li> 的地方加上這段，以建立一個超連結，而這個超連結的 class 是 <class="dropdown-toggle">。
- <data-toggle="dropdown"> 是 javascript 構成，點擊該超連結時不會外連而會出現下拉式選單，如果沒有這段不管怎麼點，下拉式選單都不會出現。
- <ul class="dropdown-menu"> <ul> 標籤裡面，放的就是下拉式選單的內容，裡面加上 .dropdown-menu 沒有這段的話，下拉式選單不會隱藏在主選單當中。
動態性標籤 Dynamic Tabs
讓網頁中文字的內容，可以隨著點選的tab而動態（淡入/淡出）的效果
See the Pen bootstrap-覽列_Navigation Bar分析_動態性標籤（Dynamic Tabs） by Jimmy_Wu (@Jimmy_Wu) on CodePen.light
- data-toggle="tab" 對應的 javascript 語法，將
href=”#目標id名” 替換 .tab-content 內的區塊元素。 - class="tab-content" 讓下曾 div 動態產生 .active，因為 .tab-content > .tab-pane 的 css 屬性是 display: none; ，正好配合 .active 的 CSS 屬性 display: block;； display: none; 於 .tab-content 內不佔位，針對 .active 讓元素出現與隱藏。
- .fade 以淡入、淡出的方式呈現。
- .in 先淡入（顯示）戴入元素區塊內容，在區塊戴入後不會在出現元素中，配合 .in.active 為預設顯示的元素區塊。
基本的導覽列 navigation bar
See the Pen bootstrap-覽列_基本的導覽列/navigation bar分析 by Jimmy_Wu (@Jimmy_Wu) on CodePen.light
nav 在導覽列中，我們會用到 <nav> 這個 html 標籤，這裡只是沿用 <nav> 這個標籤，如果要用 <div> 也是可以。
註：在官網中有特別說明，若使用的是 div 這個標籤，最好可以加上 role="navigation"，以利無障礙網頁的設計。
.nav.navbar-default 原本淡灰底黑字改成 .nav.navbar-inverse 會變成黑底反白字。
See the Pen bootstrap-覽列_基本的導覽列/navigation bar分析.navbar-inverse by Jimmy_Wu (@Jimmy_Wu) on CodePen.light
.navbar-header 放的是導覽列的標頭，後面一般會接網頁的 logo 或是名稱，如果要接圖片的話，只需把裡面文字的地方 Brand 的文字字串改成 <img alt="Brand" src="..."> 就會變成圖片 logo。
固定在頁頂的導覽列只要加上 .navbar-fixed-top，就會將 <nav> 固定於上方，不過 <body> 就要將蓋到的地方加上 padding 控制，導覽列預設的高度是 50px。
See the Pen bootstrap-覽列_固定在頁頂的導覽列/navigation bar.navbar-fixed-top分析 by Jimmy_Wu (@Jimmy_Wu) on CodePen.light
適應性網頁的導覽列
See the Pen bootstrap-覽列_適應性網頁的導覽列分析 by Jimmy_Wu (@Jimmy_Wu) on CodePen.light
- .navbar-header > button.navbar-toggle 構成漢堡圖，於區塊的右方。
- data-toggle="collapse" 收合控制，帶有動畫效果，若沒有這部份的話點按漢堡圖沒有做用
- data-target="#myNavbar" 指向一個元素的id#myNavbar，可以取任意的名字，對應到 #myNavbar.collapse.navbar-collapse 開合區塊。
- <span class="icon-bar"></span> 漢堡圖三絛線裡的一條
- .collapse.navbar-collapse 大於720寬度將元素安排水平排列。
- .navbar-nav.navbar-right 將功能登入登出齊右， .navbar-nav 屬性質為 float: left; 齊右，用 .navbar-right 屬性值 float: right !important; 疊過 float: left;
Comments are closed.