2016年6月10日 星期五

BS3 Labels

BS3 Labels

簡介

BS3 中定義了一個 .label 的 CSS 容器類別，用來強調或凸顯某一小段的文字，但別把它和 HTML5 中的 <label> 標記 (tag) 混淆了；前者是一個 CSS 類別，後者是一個標記。

BS3 v3.3.6 的 bootstrap.css 樣式表中 .label 相關的樣式的定義如下：

.label {
    border: 1px solid #000;
}
.label {
    display: inline;
    padding: .2em .6em .3em;
    font-size: 75%;
    font-weight: bold;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: .25em;
}
a.label:hover,
a.label:focus {
    color: #fff;
    text-decoration: none;
    cursor: pointer;
}
.label:empty {
    display: none;
}
.btn .label {
    position: relative;
    top: -1px;
}
.label-default {
    background-color: #777;
}
.label-default[href]:hover,
.label-default[href]:focus {
    background-color: #5e5e5e;
}
.label-primary {
    background-color: #337ab7;
}
.label-primary[href]:hover,
.label-primary[href]:focus {
    background-color: #286090;
}
.label-success {
    background-color: #5cb85c;
}
.label-success[href]:hover,
.label-success[href]:focus {
    background-color: #449d44;
}
.label-info {
    background-color: #5bc0de;
}
.label-info[href]:hover,
.label-info[href]:focus {
    background-color: #31b0d5;
}
.label-warning {
    background-color: #f0ad4e;
}
.label-warning[href]:hover,
.label-warning[href]:focus {
    background-color: #ec971f;
}
.label-danger {
    background-color: #d9534f;
}
.label-danger[href]:hover,
.label-danger[href]:focus {
    background-color: #c9302c;
}

.label 這個 CSS 類別的外觀和 BS3 中的按鈕相似，時常和 <span> 及 <a> 這兩個標記一齊使用。和 <span> 一齊使用時，多是在內文中強調某一個字詞，或一小段文字，或者搭配 h1, h2, ... h6，形成字體大小不同且有裝飾的文章標頭。和 <a> 一齊使用時，則成為一個有裝飾效果的 url 鏈接 (link)，游標移到鏈接上時，會加深標記的底色，同時改變游標的形狀。注意 .label 的 font-size 屬性值設定為 75%，表示其字體只有預設字體的四分之三大，這是為了要在加上裝飾後依然保持原來的行高 (line-height)，所以必須把字體略為縮小。.label 具有六個 CSS 修飾類別，各以不同的底色表示，六個裝飾用的 CSS 類別名稱如下，範例中的圖片展示了不同裝飾類別的底色。

  1. .label-default
  2. .label-primary
  3. .label-success
  4. .label-info
  5. .label-warning
  6. .label-danger

範例

範例中展示了使用 .label 分別和 <span> 及 <a> 搭配使用的情形。分隔線以下則展示各 CSS 裝飾類別的底色，同時用 <h6> 到 <h1> 的標記包覆 <span> 以改變其大小。預設 .label 的大小等於用 <h5> 標記包覆時的大小。

圖 1. Label 範例

CSS

<style>
html {
    width:100%;
    height:100%;
}
body {
    margin: 0 auto;
    max-width: 1000px;
    padding: 20px;
}
.demo h1, .demo h2, .demo h3, .demo h4, .demo h5, .demo h6 {
    display: inline-block;
}
a.label {
    font-size: 1em;
}
</style>

.label 的 display 屬性值預設為 inline-block，但在用 <h*> 標記包覆後，因為 <h*> 的 display 屬性值為 block，為了要讓元件都顯示在同一列中，所以用 .demo h*{} 將 display 屬性值，設回 inline-block。因為 .label 的字體大小為預設字體的 75%，所以用 a.label{} 設定 font-size 為 1em，和預設字體的大小一致。

HTML

<body>
    

        
This is a default label in a paragraph.
 
        
This label link to a web site

    

    

    

        
Default

        
Primary

        
Success

        
Info

        
Warning

        
Danger
    
    

</body>
張貼者： 於
標籤：

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)