BS3 Pills
簡介
.nav-pills 和 .nav-tabs 的基本結構大致相同，作業方式也一致，只是在外觀上有所差別。.nav-pills 沒有檔案夾的外觀，選項的部份比較像是個按鈕，而不是檔案夾的標箋。選項和閱讀內容的關聯方式，則和 .nav-tabs 完全一樣。實際上，只要把 .nav-tabs 的 HTML 碼中的 .nav-tabs 類別改成 .nav-pills，data-toggle 自訂屬性的值籨 "tab" 類別改成 "pill"，外觀就會從檔案標箋的型態改成 pills 的型態了。
.nav-justified 也可以用在 .nav-pills 中，同樣是把父元件的寬度平均分配給所有的 pills。另有一個 .nav-stacked 的修飾類別，可以讓 pills 成垂直排列。這個修飾類別在 .nav-tabs 中也可以用，但是要修改很多的 CSS 定義，畫面才會好看，若非絕對必要，不要在 .nav-tabs 中應用 .nav-stacked，如果用了，就得修改很多 CSS 類別的屬性；用在 .nav-pills 中，就容易的多了。
以下為 BS3 v3.3.6 之 bootstrap.css 樣式表中，.nav-pills 相關 CSS 類別的定義。
.nav-pills > li {
float: left;
}
.nav-pills > li > a {
border-radius: 4px;
}
.nav-pills > li + li {
margin-left: 2px;
}
.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus {
color: #fff;
background-color: #337ab7;
}
.nav-pills > .active > a > .badge {
color: #337ab7;
background-color: #fff;
}
.nav-pills > li > a > .badge {
margin-left: 3px;
}
.nav-stacked > li {
float: none;
}
.nav-stacked > li + li {
margin-top: 2px;
margin-left: 0;
}
範例
範例中展示二個例子，第一個的選項為橫式排列。第二個的選項為直式排列，為了因應直式排列的選項，將選項相關的內容移到選項的右邊放置。
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 行除了 .nav 之外，又定義了 .nav-pills 和 .nav-justified 二個 CSS 類別，讓所有選項佔滿父元件的寬度。
所有 <li> 標記都具有 data-toggle 自訂屬性，其值為 "pill"。data-toggle="pill"。
第 27 行除了 .nav 之外，又定義了 .nav-pills 和 .nav-stacked 二個 CSS 類別，讓選項成垂直排列。
第 26,33 行用 .col-sm-* 定義選項和內容所佔的寬度，讓選項出現在左邊，內容出現在右邊。
第 10~23 行及第 34~47 行 關於 .tab-content 的部份，其結構和 .nav-tabs 的結構如出一轍。
沒有留言:
張貼留言