BS3 Tabs
簡介
標箋 (tab) 是一㮔在點按標箋後改變顯示內容的介面元件。常常用來在有限的網頁版面中讓使用者選擇有興趣閱讀的內容。BS3 中的 CSS 基礎擴充類別 .nav-tabs 的作用便在建立這種標箋的介面元件。.nav-tabs 基本上是擴充 .nav 而來，所以元件的 CSS 類別必須同時含有 .nav 及 .nav-tabs 兩個類別。搭配使用的標記也主要是 <ul>, <li>, <a> 等等。<li> 中含有可供選取的選項，具有 .active 及 .disabled 兩個狀態。<a> 標記中則為標箋的標示文字或圖像。
至於點按標箋後，相對應要出現的內容則會使用到 .tab-content 及 .tab-pane 兩個基礎類別。
以下為 BS3 V3.3.6 的 bootstrap.css 樣式表中 .nav-tabs 相關的樣式定義。
.nav-tabs {
border-bottom: 1px solid #ddd;
}
.nav-tabs > li {
float: left;
margin-bottom: -1px;
}
.nav-tabs > li > a {
margin-right: 2px;
line-height: 1.42857143;
border: 1px solid transparent;
border-radius: 4px 4px 0 0;
}
.nav-tabs > li > a:hover {
border-color: #eee #eee #ddd;
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
color: #555;
cursor: default;
background-color: #fff;
border: 1px solid #ddd;
border-bottom-color: transparent;
}
.nav-tabs.nav-justified {
width: 100%;
border-bottom: 0;
}
.nav-tabs.nav-justified > li {
float: none;
}
.nav-tabs.nav-justified > li > a {
margin-bottom: 5px;
text-align: center;
}
.nav-tabs.nav-justified > .dropdown .dropdown-menu {
top: auto;
left: auto;
}
@media (min-width: 768px) {
.nav-tabs.nav-justified > li {
display: table-cell;
width: 1%;
}
.nav-tabs.nav-justified > li > a {
margin-bottom: 0;
}
}
.nav-tabs.nav-justified > li > a {
margin-right: 0;
border-radius: 4px;
}
.nav-tabs.nav-justified > .active > a,
.nav-tabs.nav-justified > .active > a:hover,
.nav-tabs.nav-justified > .active > a:focus {
border: 1px solid #ddd;
}
@media (min-width: 768px) {
.nav-tabs.nav-justified > li > a {
border-bottom: 1px solid #ddd;
border-radius: 4px 4px 0 0;
}
.nav-tabs.nav-justified > .active > a,
.nav-tabs.nav-justified > .active > a:hover,
.nav-tabs.nav-justified > .active > a:focus {
border-bottom-color: #fff;
}
}
.tab-content > .tab-pane {
display: none;
}
.tab-content > .active {
display: block;
}
範例
範例中展示了二個標箋介面元件，第一個採用預設的外觀。第二個使用了 .nav-justified 的 CSS 修飾類別，這個修飾類別會將父元件的寬度平均分配給每一個標箋，讓標箋的寬度一致。
CSS
<style>
html {
width:100%;
height:100%;
}
body {
margin: 0 auto;
max-width: 1000px;
padding: 20px;
}
</style>
CSS 中不需要設定其它樣式。
HTML
<body>
CSS
Description of CSS
HTML
Description of HTML
Javascript
Description of Javascript
Red
Description of red
Blue
Description of blue
Yellow
Description of yellow
</body>
第 3, 25 行，產生標箋元件需同時使用 .nav 及 .nav-tabs 類別。第 25 行多加了一個 .nav-justified 修飾類別。
所有 <li> 標記需具有 data-toggle 屬性，其值需設定為 "tab" 字串。也就是data-toggle="tab"，注意，這裡的 tab 是單數詞。
所有標箋內容的部份，需全部包含在一個具有 .tab-content 類別的標記中；每單一標箋的內容，則全部包含在一個具有 .tab-pane 的標記中。
標箋和標箋內容，則經 <a> 的 href 屬性，和具有 .tab-pane 類別標記的 id 屬性來連接。例：第 4 行的 href="#CSS" 和第 10 行的 id="CSS"
沒有留言:
張貼留言