bootstrap相关使用

如果想做成响应式效果，使用栅格系统产生

小于768手机端 : col-xs-
大于768小于992平板 : col-sm-
大于992小于1200 : col-md-
大于1200 : col-lg-

布局容器

<div class=”container”>固定屏幕宽度  1170px</div> 
<div class=”container-fluid”>宽度为100%</div> 

布局容器里要加入.row来进行排行显示布局

栅格系统

栅格系统一定要放入容器中

<div class=”container”></div> 
<div class=”container-fluid”></div> 

栅格系统用于通过一系列的行（row）与列（col）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中

偏移offset

注意：只能向右偏移 
语法： 
col-xs/sm/md/lg-offset-数值 
col-md-offset-2 pc中等屏幕向右偏移2个列 

排序

语法：
col-xs/sm/md/lg-pull 向左偏移 
col-xs/sm/md/lg-push 向右移动 

清除浮动

.clearfix 给父盒子加

垂直居中

css样式中设置margin:()px auto

快速浮动

右浮动：pull-right
左浮动：pull-left

下拉小三角

<span class=”caret”></span>

背景文本颜色

bg-muted（灰色） 
bg-success（淡绿） 
bg-info（灰蓝） 
bg-warning（深黄） 
bg-primary（淡蓝） 
bg-panger（黑）

字体颜色

text-muted（灰色） 
text-success（淡绿） 
text-info（灰蓝） 
text-warning（深黄） 
text-primary（淡蓝） 
text-panger（黑） 

响应式图片

.img-responsive 响应式图片

图片形状

.img-circle 椭圆形
.img-rounded 圆角矩形
.img-thumbnail 给图片加圆角的边框

表格

.table 表格里的一个基类，加其他样式都必须在这里面加
.table-bordered 给表格加上外边框
.table-hover 鼠标悬停效果
.table-striped 斑马线效果
.table-condensed 把表格变得紧凑
.table-responsive 变成响应式,给table父元素添加,如果不能完全显示会出现滚动条

英文大小写

.text-uppercase 大写
.text-lowercase 小写
.text-capiitalize 首字母大写

文本对齐方式

.text-left 左对齐
.text-center 居中对齐
.text-right 右对齐

排版标签

<h1></h1> 36px 
<h2></h2>30px 
<h3></h3>24px 
<h4></h4>18px 
<h5></h5>14px 
<h6></h6>12px 
.page-header 设置页头,给标题加一条分割线 
<small></small>副标题,颜色变淡,小一号 
<big></big>副标题,颜色变浓,大一号
<strong></strong>推荐使用的加粗 
<em></em>推荐使用的斜体 
<del></del>删除线