Bootstrap 辅助类和响应式工具

一.辅助类

1.情景文本颜色

类	描述
.text-muted	柔和灰
.text-primary	主要蓝
.text-success	成功绿
.text-info	信息蓝
.text-warning	警告黄
.text-danger	危险红

2.情景背景色

类	描述
.bg-primary	主要蓝
.bg-success	成功绿
.bg-info	信息蓝
.bg-warning	警告黄
.bg-danger	危险红

3.关闭按钮

<button type="button" class="close">&times;</button>

4.三角符号

<span class="caret"></span>

5.快速浮动

<div class="pull-left">左边</div>
<div class="pull-right">右边</div>

6.块级居中

<div class="center-block">居中</div>

7.清理浮动

<div class="clearfix"></div>

8.显示和隐藏

<div class="show">show</div>
<div class="hidden">hidden</div>

<!--情景文本颜色-->
        <p class="text-muted">柔和灰</p>
        <p class="text-primary">主要蓝</p>
        <p class="text-success">成功绿</p>
        <p class="text-info">危险红</p>
        <p class="text-warning">警告黄</p>
        <p class="text-danger">危险红</p>
        <!--情景背景颜色-->
        <p class="bg-muted">柔和灰</p>
        <p class="bg-primary">主要蓝</p>
        <p class="bg-success">成功绿</p>
        <p class="bg-info">危险红</p>
        <p class="bg-warning">警告黄</p>
        <p class="bg-danger">危险红</p>

        <!--关闭按钮-->
        <button type="button" class="close">&times;</button>

        <!--三角符号-->
        <div class="caret">

            <div class="container">
                <!--快速移动-->
                <div class="pull-left">元素浮动到左侧</div>
                <div class="pull-right">元素浮动到右侧</div>

                <!--块级居中-->
                <div class="center-block">居中</div>

                <!--清理浮动-->
                <div class="clearfix"></div>
            </div>

            <!--显示和隐藏-->
            <div class="show">show</div>
            <div class="hidden">hidden</div>

二.响应式工具

Bootstrap可以通过媒体查询结合大型、小型和中型设备，实现内容对设备的显示和隐藏。

<!--超小屏幕激活显示-->
<div class="visible-xs-block a">Bootstrap</div>
<!--超小屏幕激活隐藏-->
<div class="hidden-xs-block a">Bootstrap</div>