Bootstrap
导入
<link href="bootstrap-3.3.7/dist/css/bootstrap.min.css" type="text/css">
<script src="js/jquery-3.2.1.min.js"></script>
<script src="bootstrap-3.3.7/dist/js/bootstrap.min.js"></script>
栅格化（横向分12等份）
<div class="container"> 随窗口大小变动
<div class="row"> 一行4个、3个、2个
<div class="col-lg-3 col-md-4 col-sm-6"><div class="pic"></div></div>
<div class="col-lg-3 col-md-4 col-sm-6"><div class="pic"></div></div>
<div class="col-lg-3"> 栅格嵌套
<div class="row">
<div class="col-sm-3"></div>×4
</div>
</div>
</div>
</div>
col-lg- >1170
col-md- >970
col-sm- >750
col-xs- <750 100%
<!--偏移量 1/12 -->
<div class="container">
<div class="row">
<div class="col-lg-2 col-md-3"></div>
<div class="col-lg-2 col-md-3 col-lg-offset-2 col-md-offset-1"></div>
<div class="col-lg-2 col-md-3 col-lg-offset-3 col-md-offset-2"></div>
</div>
</div>
按钮
<button>按钮</button>
<input type="button" value="按钮">
<a href="#">按钮</a>
class="btn btn_default" 默认 btn-lg 大
class="btn btn-primary" 蓝色 btn-sm 中
class="btn btn-success" 绿色 btn-xs 小
class="btn btn-info" 浅蓝 btn-block通栏按钮 (100%宽)
class="btn btn-warning" 橙色 btn-link 链接按钮
class="btn btn-danger" 红色 btn 声明按钮
按钮组
<div class="btn-group">
<a href="#" class="btn btn-info">按钮</a>
<a href="#" class="btn btn-warning">按钮</a>
</div>
通栏按钮组
<div class="btn-group btn-group-justified">
<a href="#" class="btn btn-warning">标签按钮</a>
<div class="btn-group">
<input type="button" class="btn btn-primary" value="按钮">
</div>
</div>
下拉按钮
表单class=
form 垂直表单
form-inline 一行表单
form-horizontal 水平表单
form-group div添加 包裹标签和控件
form-control 文本框、下拉列表<input> <textarea> <select> 添加
checkbox checkbox-inline 多选框样式
radio radio-inline 单选框样式
input-group 表单控件组 搜索框+百度一下
nput-group-addon/input-group-btn 表单控件组物件/按钮
form-group-lg 大尺寸表单
form-group-sm 小尺寸表单
图片
<img src=”...” class=”img-responsive ”> 两边有内边距
img-rounded 圆角
img-circle 园
img-thumbnail 方框
隐藏类
hidden-xs
hidden-sm
hidden-md
hidden-lg
字体图标
<span class=” ”></span> 图标类 自定义颜色、大小
bootstrap 下拉菜单
dropdown-toggle
dropdown-menu
bootstrap 选项卡
nav
nav-tabs
nav-pills
tab-content
bootstrap 导航条
navbar 声明导航条
navbar-default 默认导航条样式
navbar-inverse 声明反白的导航条样式
navbar-static-top 去掉导航条的圆角
navbar-fixed-top 固定到顶部的导航条
navbar-fixed-bottom 固定到底部的导航条
navbar-header 申明logo的容器
navbar-brand 针对logo等固定内容的样式
nav navbar-nav 定义导航条中的菜单
navbar-form 导航条中的表单 搜索框
navbar-btn 导航条中按钮 居中
navbar-text 定义导航条中的文本
navbar-left 菜单靠左
navbar-right 菜单靠右
bootstrap 模态框
1、modal 声明一个模态框
2、modal-dialog 定义模态框尺寸
3、modal-lg 定义大尺寸模态框
4、modal-sm 定义小尺寸模态框
5、modal-header
6、modal-body
7、modal-footer
bootstrap 响应式专题网站实例