BS3 Pager
簡介
BS3 裡 .pager 這個 CSS 基礎類別，搭配 <ul> 及 <li> 標記組用來產生二個按鈕元件，用以引導使用者進入下一個頁面或回到上一個頁面，是非常簡單的介面元件。<li> 的內容只使用 <a> 及 <span> 標記來生成按鈕的標示。預設時，按鈕底色為白色，兩個按鈕並列，置於螢幕寬度的中間。如果要將按鈕分置螢幕寬度的左、右兩側，則使用 .previous 及 .next 兩個 CSS 修飾類別，.previous 會將按鈕置於螢幕寛的左側，.next 則會將按鈕置於螢幕寬的右側。按鈕可以用 .disable CSS 類別使其失去作用，失去作用的按鈕當游標移至按鈕上方時，會改變游標的形狀，顯示按鈕無法點按。因為點按後，頁面會轉移，所以並不需要使用 .active CSS 類別，只有在第一頁時，應該 disable 上一頁的按鈕，及在最後一頁時， disable 下一頁按鈕。
以下為BS3 中 Bootstrap.css 樣式表中對 .pager 及其相關之 CSS 類別的定義：
.pager {
padding-left: 0;
margin: 20px 0;
text-align: center;
list-style: none;
}
.pager li {
display: inline;
}
.pager li > a,
.pager li > span {
display: inline-block;
padding: 5px 14px;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 15px;
}
.pager li > a:hover,
.pager li > a:focus {
text-decoration: none;
background-color: #eee;
}
.pager .next > a,
.pager .next > span {
float: right;
}
.pager .previous > a,
.pager .previous > span {
float: left;
}
.pager .disabled > a,
.pager .disabled > a:hover,
.pager .disabled > a:focus,
.pager .disabled > span {
color: #777;
cursor: not-allowed;
background-color: #fff;
}
範例
範例中展示三組 pager，底色都重新定義過。第二組使用 BS3 裡的 glyphicons 用圖像符號取代文字說明，第三組將兩個按鈕分置於螢幕兩側，並將右側按鈕 disable。
CSS
<style>
html {
width:100%;
height:100%;
}
body {
margin: 0 auto;
max-width: 1000px;
padding:20px;
}
.pager li > span {
/* coral */
background-color: rgba(255, 127, 80, 1);
color: white;
}
.pager .disabled > span {
background-color: rgba(255, 127, 80, 0.7);
color: white;
}
.pager li > a {
/* skyblue */
background-color: rgba(135, 206, 235, 1);
color: #333;
}
.pager .disabled > a, .pager .disabled > a:hover {
background-color: rgba(135, 206, 235, 0.7);
color: #333;
}
</style>
CSS 中重新定義了 pager 按鈕的底色及字體的顏色，該按鈕比較顯眼。要注意，在 BS3 的樣式表中，對 <li> 標記中使用 <a> 及 <span> 兩者類別的定義並不相同，要修改預設值時，必須注意這點。
HTML
<body>
</body>
第 11~12 行，用 glyphicon 的左、右箭頭來取代文字表示。
第 18~19 行，使用 .previous 及 .next 兩個 CSS 類別將按鈕分置於螢幕兩側。
沒有留言:
張貼留言