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>删除线