辅助类
一 概念
#### 1、 情境背景色
```html
<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>
```
#### 2、快速浮动
```html
<div class="pull-left">...</div>
<div class="pull-right">...</div>
```
#### 3、快速清浮动
```html
<div class="clearfix">...</div>
```
#### 4、显隐
```html
<div class="show">...</div>
<div class="hidden">...</div>
```
## 七、字体图标
```html
<i class="glyphicon glyphicon-*"></i>二 代码示范
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>辅助类</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" type="text/css" href="bootstrap-3.3.7-dist/css/bootstrap.css">
<style type="text/css">
.box {
height: 300px;
}
.b1 {
width: 200px;
height: 200px;
margin: 0 10px;
}
i {
font-size: 50px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="box col-lg-10 col-lg-offset-1 col-md-6 col-md-offset-3 bg-cyan"></div>
</div>
<hr>
<div class="row">
<div class="wrap bg-danger clearfix">
<div class="b1 bg-cyan pull-left">1</div>
<div class="b1 bg-cyan pull-left" hidden>2</div>
<div class="b1 bg-cyan pull-right">3</div>
</div>
</div>
<div class="row">
<i class="glyphicon glyphicon-heart"></i>
<i class="glyphicon glyphicon-pushpin"></i>
</div>
</div>
</body>
<script src="bootstrap-3.3.7-dist/js/jquery-3.3.1.min.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
<script type="text/javascript">
$(document).click(function () {
$('[hidden]').toggle('hidden')
})
</script>
</html>
