BS3 Navs
簡介
BS3 中有個名為 .nav 的 CSS 基礎類別，這個類別又是所有導覽 (navigation) 介面元件的基石，其它幾個導覽介面元件像是： .nav-bar, .nav-tabs, .nav-pills 等，都是以 .nav 為基本樣式，再加以擴充而成。.nav 原則上都搭配 <ul>, <li>, <a> 幾個標記使用，可以很容易產生一個導覽的介面元件，<li> 中含有可供選取的選項，具有 .active 及 .disabled 兩個狀態。如果 <li> 具有 .nav-divider 類別且標記中不含內容，則該 <li> 顯示成分隔線，藉以分隔不同性質的選項。<a> 中的 href 屬性值則指向所要導覽的位置。
以下為 BS3 V3.3.6 中 bootstrap.css 樣式表中 .nav 相關的樣式定義。
.nav {
padding-left: 0;
margin-bottom: 0;
list-style: none;
}
.nav > li {
position: relative;
display: block;
}
.nav > li > a {
position: relative;
display: block;
padding: 10px 15px;
}
.nav > li > a:hover,
.nav > li > a:focus {
text-decoration: none;
background-color: #eee;
}
.nav > li.disabled > a {
color: #777;
}
.nav > li.disabled > a:hover,
.nav > li.disabled > a:focus {
color: #777;
text-decoration: none;
cursor: not-allowed;
background-color: transparent;
}
.nav .open > a,
.nav .open > a:hover,
.nav .open > a:focus {
background-color: #eee;
border-color: #337ab7;
}
.nav .nav-divider {
height: 1px;
margin: 9px 0;
overflow: hidden;
background-color: #e5e5e5;
}
.nav > li > a > img {
max-width: none;
}
範例
範例中展示了一個很簡單的導覽介面元件，具有五個顏色選項及一條水平分隔線。同時也展示了如何變更介面元件的底色，及為了配合底色的變更，也變更了選項字體的顏色。這是因為變更後的底色比較深，預設的字體顏色會顯得不清楚，所以必須同時變更字體的顏色，若選擇變更的底色比較淡，也許可以不用更改字體的顏色。這個必須自行加以判斷。
CSS
<style>
html {
width:100%;
height:100%;
}
body {
margin: 0 auto;
max-width: 1000px;
padding: 20px;
}
#color {
width: 200px;
height: auto;
border: 3px solid skyblue;
border-radius: 4px;
background-color: coral;
}
#color > .nav > li > a {
color: white;
}
#color > .nav > li > a:hover {
background-color: skyblue;
color: black;
}
#color > .nav >li.disabled > a{
color: #777;
}
</style>
#color{} 定義了介面元件的整體外觀。其它的樣式都以 #color 領頭，定義了字體的顏色及當游移至選項上方時，所要改變的底色，如此可以避免干擾到其它 .nav 元件的樣式設定。
HTML
<body>
</body>
HTML 中，用 <nav> 標記做為容器，並賦予 id 值，利用 CSS 改變其樣式值以形成介面元件的整體外觀。
沒有留言:
張貼留言