bootstrap（三）辅助类

一、情境文本颜色

<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-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" aria-label="Close"><span aria-hidden="true">&times;</span></button>

四、三角符号

通过使用三角符号可以指示某个元素具有下拉菜单的功能

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

五、快速浮动

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

六、清除浮动 

通过为父元素添加 .clearfix 类可以很容易地清除浮动（float）

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

七、让内容块居中（比较常用） 

<style>
        .big{
            width: 200px;
            height:200px;
            background-color: red;
        }
 </style>



<div class="center-block big">565656</div>

八、显示或隐藏内容

.show 和 .hidden 类可以强制任意元素显示或隐藏(对于屏幕阅读器也能起效)

<div class="show">你真可爱</div>
<div class="hidden">把我隐藏掉吧</div>