BS3 Navbar
簡介
使用 BS3 的網站其最主導覽列通常都用 .navbar 來實作。主導覽列一般都會佔據螢幕的全寬，因此在螢幕的尺寸變小時，都得做特別的處理，像是將導覽選項隱藏在按鈕中，必須點按按鈕才會出現選項。主導覽列中可以包含的介面元件相當的多樣，可以有圖像、選項、下拉式選項、輸入欄位等等，因此在樣式表中相關類別的定義很繁複，HTML 的程式碼也多，但只要瞭解其基本結構，就很容易看得懂了。
首先，根標記 <nav> 的基礎類別為 .navbar，並在這個元件設定所須的修飾類別。元件內容為一個類別為 .navbar-header 的 <div> 標記，內含要出現在導覽列中的元件。導覽列中的元件又區分成三部份，一部份是不論螢幕大小，都會出現在導覽列中的元件，像是企業的商標，其類別為 .navbar-brand。另外二部則會因應螢幕的大小隱藏或出現，這二部份則利用 collapse 插件來處理，其類別分別為 .navbar-toggle 及 .navbar-collapse。這二部份看範例程式碼的解說會比較清楚。
以下為 .navbar 的修飾類別：
- .navbar-default
- 主導覽列的底色為淡灰色，字體為黑色。
- .navbar-inverse
- 主導覽列的底色為黑色，字體為白色。
- .navbar-static-top
- 去除主導覽列的上、左、右的邊框及邊框的圓角，其餘不變。
- .navbar-fixed-top
- 主導覽列佔據螢幕畫面的全寬，並在捲動螢幕時，保持在螢幕畫面的上方不動。
- .navbar-fixed-bottom
- 主導覽列佔據螢幕畫面的全寬，並在捲動螢幕時，保持在螢幕畫面的下方不動。
下列為 BS3 V3.3.6 中 bootstrap.css 樣式表中 .navbar 相關的部份樣式定義。全部約有近 500 行的定義，為了節省篇幅，這裡只列出很小的一部份。
.navbar {
position: relative;
min-height: 50px;
margin-bottom: 20px;
border: 1px solid transparent;
}
@media (min-width: 768px) {
.navbar {
border-radius: 4px;
}
}
@media (min-width: 768px) {
.navbar-header {
float: left;
}
}
.navbar-collapse {
padding-right: 15px;
padding-left: 15px;
overflow-x: visible;
-webkit-overflow-scrolling: touch;
border-top: 1px solid transparent;
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
}
.navbar-collapse.in {
overflow-y: auto;
}
@media (min-width: 768px) {
.navbar-collapse {
width: auto;
border-top: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
.navbar-collapse.collapse {
display: block !important;
height: auto !important;
padding-bottom: 0;
overflow: visible !important;
}
.navbar-collapse.in {
overflow-y: visible;
}
.navbar-fixed-top .navbar-collapse,
.navbar-static-top .navbar-collapse,
.navbar-fixed-bottom .navbar-collapse {
padding-right: 0;
padding-left: 0;
}
}
.navbar-fixed-top .navbar-collapse,
.navbar-fixed-bottom .navbar-collapse {
max-height: 340px;
}
@media (max-device-width: 480px) and (orientation: landscape) {
.navbar-fixed-top .navbar-collapse,
.navbar-fixed-bottom .navbar-collapse {
max-height: 200px;
}
}
.container > .navbar-header,
.container-fluid > .navbar-header,
.container > .navbar-collapse,
.container-fluid > .navbar-collapse {
margin-right: -15px;
margin-left: -15px;
}
@media (min-width: 768px) {
.container > .navbar-header,
.container-fluid > .navbar-header,
.container > .navbar-collapse,
.container-fluid > .navbar-collapse {
margin-right: 0;
margin-left: 0;
}
}
.navbar-static-top {
z-index: 1000;
border-width: 0 0 1px;
}
@media (min-width: 768px) {
.navbar-static-top {
border-radius: 0;
}
}
.navbar-fixed-top,
.navbar-fixed-bottom {
position: fixed;
right: 0;
left: 0;
z-index: 1030;
}
@media (min-width: 768px) {
.navbar-fixed-top,
.navbar-fixed-bottom {
border-radius: 0;
}
}
.navbar-fixed-top {
top: 0;
border-width: 0 0 1px;
}
.navbar-fixed-bottom {
bottom: 0;
margin-bottom: 0;
border-width: 1px 0 0;
}
.navbar-brand {
float: left;
height: 50px;
padding: 15px 15px;
font-size: 18px;
line-height: 20px;
}
.navbar-brand:hover,
.navbar-brand:focus {
text-decoration: none;
}
.navbar-brand > img {
display: block;
}
@media (min-width: 768px) {
.navbar > .container .navbar-brand,
.navbar > .container-fluid .navbar-brand {
margin-left: -15px;
}
}
.navbar-toggle {
position: relative;
float: right;
padding: 9px 10px;
margin-top: 8px;
margin-right: 15px;
margin-bottom: 8px;
background-color: transparent;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
}
.navbar-toggle:focus {
outline: 0;
}
.navbar-toggle .icon-bar {
display: block;
width: 22px;
height: 2px;
border-radius: 1px;
}
.navbar-toggle .icon-bar + .icon-bar {
margin-top: 4px;
}
@media (min-width: 768px) {
.navbar-toggle {
display: none;
}
}
.navbar-nav {
margin: 7.5px -15px;
}
.navbar-nav > li > a {
padding-top: 10px;
padding-bottom: 10px;
line-height: 20px;
}
@media (max-width: 767px) {
.navbar-nav .open .dropdown-menu {
position: static;
float: none;
width: auto;
margin-top: 0;
background-color: transparent;
border: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
.navbar-nav .open .dropdown-menu > li > a,
.navbar-nav .open .dropdown-menu .dropdown-header {
padding: 5px 15px 5px 25px;
}
.navbar-nav .open .dropdown-menu > li > a {
line-height: 20px;
}
.navbar-nav .open .dropdown-menu > li > a:hover,
.navbar-nav .open .dropdown-menu > li > a:focus {
background-image: none;
}
}
@media (min-width: 768px) {
.navbar-nav {
float: left;
margin: 0;
}
.navbar-nav > li {
float: left;
}
.navbar-nav > li > a {
padding-top: 15px;
padding-bottom: 15px;
}
}
範例
範例中展示了 .navbar-default 及 .navbar-inverse 兩種樣式的導覽列。導覽列中含有二個靠左的選項及一個下拉式選單及一個靠右的搜尋選項。當螢幕縮小時，所有選項會隱藏於一個按鈕中。點按按鈕則會以下拉式選單的表現方式出現所有的選項。
CSS
<style>
html {
width:100%;
height:100%;
}
body {
margin: 0 auto;
max-width:1000px;
padding:20px;
}
</style>
CSS 中沒有特別的樣式需要設定。
HTML
<body>
</body>
HTML 程式碼第 2~40 行和第 42~80 行的程式碼，除了第 2 行和第 42 行的類別有 .navbar-default 及 .navbar-inverse 的區分外，其實是完全一樣的，所以只註解第 2~40 行的程式碼。
第 2 行建立一個導覽列的容器元件。
第 5~13 行建立導覽列的內容。
第 6 行建立企業的商標，通常會放置一個圖像，這裡簡單的用文字替代。
第 7～12 行建立一個圖像有三條橫線的按鈕，設定其類別為 .navbar-toggle 及 .collapsed 表示此元件會和另一元件進行切換，目前的狀態為隱藏。這裡要注意 .collapsed 的拼法為 collapse 的過去式，在 bootstrap.css 中是找不到這個類別定義的，它是在 bootstrap.js 程式中用來區分元件狀態為隱藏或顯現之用，千萬不要拼錯了。
第 7 行尚有二個自訂屬性 data-toggle="collapse" 表示切換的模式為隱藏或顯現， data-target="#navbar-collapse-1" 則指定切換時的目標元件是 id 值設定為 navbar-collapse-1 的元件。這裡也要注意兩邊的值要符合。
第 16~38 行建立要和按鈕切換顯現的內容元件。
第 16 行設定其 id 為 "navbar-collapse-1", 類別為 .navbar-collpase 及 .collapse，注意這裡的拼法 collapse 不是過去式。
第 17~31 行建立選項及下拉式選單。
第 32~37 行建立搜尋功能。用 .navbar-right 類別設定，將選項置於導覽列的右方。
沒有留言:
張貼留言