Bootstrap辅助类

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>


效果:

Bootstrap辅助类_第1张图片

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>

效果:

Bootstrap辅助类_第2张图片

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>
效果:
Bootstrap辅助类_第3张图片

你可能感兴趣的:(bootstrap,辅助类)