Bootstrap輔助類

YvetteLau發表於2016-01-02
boot

1、文字

類 描述
.text-muted "text-muted" 類的文字樣式
.text-primary
"text-primary" 類的文字樣式
.text-success "text-success" 類的文字樣式
.text-info "text-info" 類的文字樣式
.text-warning "text-warning" 類的文字樣式
.text-danger "text-danger" 類的文字樣式 

<!DOCTYPE html>
<html>
<head>
    <meta charset = "utf-8">
    <title>demo</title>
    <link href="bootstrap-3.3.4-dist/css/bootstrap.min.css" rel="stylesheet">
    <style type="text/css">
        body{padding: 20px;}
    </style>
</head>
<body>
    <div class = "container">
        <p>我是普通文字</p>
        <p class="text-muted">我使用了text-muted</p>
        <p class="text-primary">我使用了text-primary</p>
        <p class="text-success">我使用了text-success</p>
        <p class="text-info">我使用了text-info</p>
        <p class="text-warning">我使用了text-warning</p>
    </div>
</body>
</html>


效果：


2、背景

類 描述
.bg-primary 表格單元格使用了 "bg-primary" 類
.bg-success 表格單元格使用了 "bg-success" 類
.bg-info 表格單元格使用了 "bg-info" 類
.bg-warning 表格單元格使用了 "bg-warning" 類
.bg-danger 表格單元格使用了 "bg-danger" 類

例：

<body>
    <div class = "container col-lg-2">
        <p class="bg-primary">我使用了bg-primary</p>
        <p class="bg-success">我使用了bg-success</p>
        <p class="bg-info">我使用了bg-info</p>
        <p class="bg-warning">我使用了bg-warning</p>
    </div>
</body>

效果：

3、其它

類 描述
.pull-left 元素浮動到左邊
.pull-right 元素浮動到右邊
.center-block 設定元素為 display:block 並居中顯示
.clearfix 清除浮動
.show 強制元素顯示
.hidden 強制元素隱藏
.sr-only 除了螢幕閱讀器外，其他裝置上隱藏元素
.sr-only-focusable 與 .sr-only 類結合使用，在元素獲取焦點時顯示(如：鍵盤操作的使用者)
.text-hide 可以隱藏文字內容
.close 顯示關閉按鈕
.caret 顯示下拉式功能
例：

<body>
    <div class = "container col-lg-3">
        <div class="pull-right bg-primary">
            <p>使用了pull-right的盒子</p>
        </div>
        <div class="pull-left bg-warning">
            <p>使用了pull-left的盒子</p>
        </div>
        <div class="clearfix"></div>
        <div class="center-block">
            <p>使用了center-blcok的盒子</p>
        </div>
        <label class="sr-only">螢幕閱讀器</label>
        <div class="center-block text-hide">
            <p>使用了center-blcok的盒子</p>
        </div>
        <button type="button" class="close" aria-hidden="true">
          ×
        </button>
        <div class="clearfix"></div>
        <p>下拉<span class="caret"></span></p>
    </div>
</body>
效果：

相關文章