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