1.1栅格系统
1、栅格系统是一种行和列构成的一种布局。随着，屏幕分辨率的变大，最多可展示12个列。
PC端：
PAD端：
手机终端：
2、栅格参数：
col-lg-*:(屏幕>=1200px) PC
col-md-*:（992px-1200px）
col-sm-*:（768px-992px）小平板
col-xs-*:（小于768px）手机
3.代码示例：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<div class="container"style="border:1px solid red;">
<div class="row">
<div class="col-lg-3 col-sm-4 col- xs-6">
<div class="thumbnail">
<img src="img/codeguide.png">
<h2>靠谱研究所</h2>
<p>我们的口号是：靠谱、有趣、有料</p>
</div>
</div>
<div class="col-lg-3 col-sm-4 col- xs-6">
<div class="thumbnail">
<img src="img/codeguide.png">
<h2>靠谱研究所</h2>
<p>我们的口号是：靠谱、有趣、有料</p>
</div>
</div>
</div>
</div>
|
1.2辅助类
1.文本颜色：
|
1
2
3
4
5
6
|
<span style="white-space:pre"> </span> <h1 class="text-primary">text-primary靠谱研究所</h1>
<h1 class="text-success">text-success靠谱研究所</h1>
<h1 class="text-warning">text-warning靠谱研究所</h1>
<h1 class="text-danger">text-danger靠谱研究所</h1>
<h1 class="text-info">text-info靠谱研究所</h1>
<h1 class="text-muted">text-muted靠谱研究所</h1>
|
2、背景颜色：
|
1
2
3
4
5
6
|
<span style="white-space:pre"> </span> <h1 class="bg-primary">text-primary靠谱研究所</h1>
<h1 class="bg-success">text-success靠谱研究所</h1>
<h1 class="bg-warning">text-warning靠谱研究所</h1>
<h1 class="bg-danger">text-danger靠谱研究所</h1>
<h1 class="bg-info">text-info靠谱研究所</h1>
<h1 class="bg-muted">text-muted靠谱研究所</h1>
|
3、关闭按钮&三角图标：
|
1
2
3
4
|
<span style="white-space:pre"> </span> <!--关闭按钮-->
<button class="close"><span>×</span></button>
<!--三角图标-->
<span class="caret"></span>
|
4、快速浮动：
左浮动：pull-left
右浮动：pull-right 清除浮动：clearfix
浮动会将块元素转换成行内元素
|
1
2
|
<div class="pull-left bg-primary">这是左边的内容</div>
<div class="pull-right bg-danger">这是右边的内容</div>
|
5、块元素居中、文字居中：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<!--块元素垂直居中-->
<style>
#div2{
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);//平移
}
</style>
<span style="white-space:pre"> </span><!--实现块元素水平居中-->
<div id="div1"class="center-block text-center"style="width:500px;border:1px solid red;">块元素水平居中</div>
<!--实现块元素垂直居中-->
<div id="div2"class="center-block text-center"style="width:500px;border:1px solid red;">块元素垂直居中</div>
|
1.3表格
1.表格颜色：active,warning,danger,info,danger
2.鼠标悬停效果：table-hover
3.带边框表格：table-bordered
4.各行换色：table-striped
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
<table class="table table-striped table-hover table-bordered"><!--隔行换色、鼠标悬停、表格边框-->
<thead>
<tr class="danger"><!--表格颜色-->
<th>姓名：</th>
<th>性别：</th>
<th>年龄：</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>男</td>
<td>23</td>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>23</td>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>23</td>
</tr>
</tbody>
</table>
|
1.4列表：
class属性：ul:list-group
li:list-group-item 徽章：span:badge
列表项颜色：list-group-item-(success/warning/danger)
|
1
2
3
4
5
6
7
8
9
|
<ul class="list-group">
<li class="list-group-item">
靠谱研究所
<!--列表徽章--><span class="badge">10</span>
</li>
<li class="list-group-item list-group-item-success">IT研究所</li>
<li class="list-group-item list-group-item-warning">美食研究所</li>
<li class="list-group-item list-group-item-info">美妆研究所</li>
</ul>
|
1.5表单：
表单分组：form-group
表单项：(input/span/textarea):form-control
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
<style>
.container{
width:450px;
height:300px;
background:#ffffff;
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
border-radius:20px;
}
</style>
<span style="white-space:pre"> </span><form role="form">
<h3 class="text-center">靠谱研究所后台管理系统</h3>
<div class="form-group has-success has-feedback">
<labelfor="user">用户名</label>
<input type="text"id="user"placeholder="请输入用户名"class="form-control">
<span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>
<div class="form-group has-error has-feedback">
<labelfor="pass">密码</label>
<input type="text"id="pass"placeholder="请输入密码"class="form-control">
<span class="glyphicon glyphicon-remove form-control-feedback"></span>
</div>
<div class="checkbox">
<label>
<input type="checkbox">请记住我
</label>
</div>
<button type="submit"class="btn btn-success btn-block">提交</button>
</form>
|