响应式布局
body{ //样式
background:#444;
}
@media screen and (max-width:500px){ //当屏幕小于500时，的css样式
body{ //样式
background:#fff;
}
}
手机视口
使手机端可以正常显示，不被压缩
<meta name="viewport" content="width=device-width,initial-scale=1">
字体图标库 fontawesome.io 导入css文件即可用
bootstap 网站：http://v3.bootcss.com
table
加类名：table 自动设置表格样式
table-bordered 边框
table-hover 移入事件
table-condensed 紧凑
tr td 颜色：
加类名：
success
active
warning
info
danger
表单
实现基本的表单样式
<form>//内联表单:<form class="form-inline">
<div class="form-group">//has-error 错误状态,has-success 成功状态,has-warning 警告状态
<label>电子邮件</label>
<input type="email" class="form-control"
placeholder="请输入您的电子邮件">
</div>
<div class="form-group">
<label>密码</label>
<input type="password" class="form-control"
placeholder="请输入您的密码">
</div>
</form>
让表单内的元素保持水平排列
<form class="form-horizontal"> //保持水平
<div class="form-group">
<label class="col-sm-2 control-label">电子邮件</label>
<div class="col-sm-10"> //需要加div在外层
<input type="email" class="form-control" placeholder="请输
入您的电子邮件">
</div>
</div>
</form>
单选框、复选框
<div class="checkbox">
<label>
<input type="checkbox" value="">
Option one is this and that—be sure to include why it's great
</label>
</div>
//禁用
<div class="checkbox disabled">
<label>
<input type="checkbox" value="" disabled>
Option two is disabled
</label>
</div>
//设置内联一行显示的复选框
<label class="checkbox-inline">
<input type="checkbox">体育
</label>
<label class="checkbox-inline disabled">
<input type="checkbox" disabled>音乐
</label>
设置下拉列表
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
文本框右侧内置文本图标
<div class="form-group has-feedback">
<label>电子邮件</label>
<input type="email" class="form-control">
<span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>
** 栅栏布局 **
<div class="container"> //container-fluid全屏显示
<div class="row">
<!-- md:middle lg:large sm:small 适应不同大小的屏，
col-md-offset-3 向右边偏移 3份 会影响后面的位置(margin-left)
col-md-push-3 向右边移动 3份 不会影响后面的位置(relative)
col-md-pull-3 向左边移动 3份 不会影响后面的位置(relative)
-->
<div class="col col-md-4 col-lg-3 col-sm-6 col-xs-12 a">
<div class="row">
<div class="col col-md-4 a"></div>
<div class="col col-md-4 a"></div>
<div class="col col-md-4 a"></div>
</div>
</div>
<div class="col col-md-4 col-lg-3 col-sm-6 col-xs-12 col-md-push-2 a"></div>
<div class="col col-md-4 col-lg-3 col-sm-6 col-xs-12 a"></div>
<div class="col col-md-4 col-lg-3 col-sm-6 col-xs-12 a"></div>
</div>
</div>
图片
 <!-- 圆角 -->
 <!-- 圆形 -->
 <!-- 缩略图 -->
<!-- 当图片大于父元素的宽度时,图片会缩小到父元素的宽度 -->
按钮
按钮分组
<div class="btn-group dropup"><!-- 加三角号 dropup向上 /btn-group-lg, sm, xm 指定大小 -->
<button class="btn btn-info active"> <!-- 给btn加active 选中状态 ，btn-info 可改变颜色-->
<span class="glyphicon glyphicon-star"></span> <!-- 加字体符号 -->
按钮
</button>
<button class="btn btn-primary"><span class="caret"></span></button>
</div>
<a href="###" class="btn btn-default">Link</a>
<button class="btn btn-default">Button</button>
<input type="button" class="btn btn-default" value="input">
预定义样式
- 样式 说明
btn-default 默认样式
btn-success 成功样式
btn-info 一般信息样式
btn-warning 警告样式
btn-danger 危险样式
btn-primary 首选项样式
btn-link 链接样式
从大到小的尺寸
lg large
sm small
xs x-small
<button class="btn btn-lg">Button</button>
<button class="btn">Button</button>
<button class="btn btn-sm">Button</button>
<button class="btn btn-xs">Button</button>
//块级换行
<button class="btn btn-block">Button</button>
<button class="btn btn-block">Button</button>
列表
//移出默认样式
<ul class="list-unstyled">
<li>Bootstrap 框架</li>
<li>Bootstrap 框架</li>
<li>Bootstrap 框架</li>
<li>Bootstrap 框架</li>
<li>Bootstrap 框架</li>
</ul>
//设置成内联
<ul class="list-inline">
<li>Bootstrap 框架</li>
<li>Bootstrap 框架</li>
<li>Bootstrap 框架</li>
<li>Bootstrap 框架</li>
<li>Bootstrap 框架</li>
</ul>
//设置英文文本大小写
<p class="text-lowercase">Bootstrap 框架</p> <!--小写-->
<p class="text-uppercase">Bootstrap 框架</p> <!--大写-->
<p class="text-capitalize">bootstrap 框架</p><!--首字母大写-->
//缩略语
Bootstrap<abbr title="Bootstrap" class="initialism">框架</abbr>
