BS3 Badges
簡介
在很多的網頁應用或手機的 App 中，常會看到在圖像的右側或右上角有個圓圈，圓圈中有個數字表示在這圖像所代表的應用中有多少項目。例如：在郵件應用中，有多少封未讀的郵件。這個有數字的圓圈，一般通稱為 badge （就是配帶在胸口的胸章），在 BS3 中也定義了這麼一個 CSS 的類別。badge 這個元件幾乎不會單獨使用，都是搭配像是其它旳可點按的介面元件一齊使用，代表介面元件中具有的項目數量。當然，也可以發揮各種創意來使用 badge 幫各種介面元件配帶一個「胸章」。
badge 的 HTML 程式碼很簡單，就是一行
<span class="badge">1<span>
如果 <span> 標記中沒有任何內容，就不會顯示 badge 元件，badge 中的數字或內容，一般都使用 Javascript 或 jQuery 在某事件被觸發後再去修改。
以下是BS v3.3.6 的 bootstrap.css 樣式表中部份有關 .badge 的樣式定義。其它還有很多相關的定義，大多是配合元件的底色，修改 badge 的顏色和 badge 中數字的顏色，以突顯 badge；還有就是根據搭配介面元件的大小，修改 badge 的大小和位置，就不在這裡列出了。
.badge {
display: inline-block;
min-width: 10px;
padding: 3px 7px;
font-size: 12px;
font-weight: bold;
line-height: 1;
color: #fff;
text-align: center;
white-space: nowrap;
vertical-align: middle;
background-color: #777;
border-radius: 10px;
}
.badge:empty {
display: none;
}
.btn .badge {
position: relative;
top: -1px;
}
.btn-xs .badge,
.btn-group-xs > .btn .badge {
top: 0;
padding: 1px 5px;
}
a.badge:hover,
a.badge:focus {
color: #fff;
text-decoration: none;
cursor: pointer;
}
.list-group-item.active > .badge,
.nav-pills > .active > a > .badge {
color: #337ab7;
background-color: #fff;
}
.list-group-item > .badge {
float: right;
}
.list-group-item > .badge + .badge {
margin-right: 5px;
}
範例
範例中展示了一個基本的 badge 元件，以及和按鈕搭配使用時的情況。每次點按按鈕時，該按鈕 badge 中的數字都會加 1 （透過 jQuery 實作）。其中第一個按鈕在載入時，並沒有顯示 badge，但點按後便會出現。實作了這麼多按鈕，主要是展示在不同底色的按鈕中，badge 也會配合變更其底色及字體的顏色。
CSS
<style>
html {
width:100%;
height:100%;
}
body {
margin: 0 auto;
max-width: 1000px;
padding: 20px;
}
</style>
CSS 中沒有特別定義其它樣式。
HTML
<body>
10
</body>
HTML 中建立了一個基本的 badge，以及配合各種底色的按鈕的 badge。 第 4 行中的 <spna> 標記中沒有任何內容，因此，在網頁一開始顯示時，第一個按鈕是沒有 badge 的。
Script
<script>
$(function(){
$("button").click(function(){
var count = $("span", this).text();
$("span", this).text(++count);
})
});
</script>
Javascript 程式碼的部份算簡單易懂，所有的按鈕在收到點按的事件後，取得內容 (text) 的值，加 1 之後再寫回去。
沒有留言:
張貼留言