Bootstrap框架
css框架：对css相同功能的整体封装，方便使用。
常见css框架：Amaze UI；Framework7；Bootstrap
（一）Bootstrap
用于开发响应式布局、移动设备优先的web项目。
1.下载安装
两种版本：1）编译且压缩后的CSS、Js和字体文件，不包含文档和源码；
2）less、Js和字体文件的源码，带有文档。
（此处下载了Bootstrap3.3.7版本）
安装：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<!--兼容IE-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--视口设置-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签必须放在最前面，任何其他内容都必须跟随其后！ -->
<!--可以让部分国产浏览器默认采用高速模式渲染页面-->
<meta name="renderer" content="webkit">
<title>Bootstrap 101 Template</title>
<!-- 引入Bootstrap样式文件 -->
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<h1>你好，世界！</h1>
</body>
</html>
（二）响应式控制类
使用以下类（可单独使用，可结合使用），针对不同屏幕尺寸，隐藏或显示页面内容。
<!--表示该标签只有在超小屏幕下可见，其他情况隐藏-->
<h1 class="visible-xs">hello</h1>
<!--表示该标签只有在超小屏幕下隐藏，其他情况可见-->
<h1 class="hidden-xs">hello</h1>
前提是一定要引入框架文件bootstrap.min.css或css/bootstrap.css。
（三）栅格系统
栅格系统实现响应式布局，必须在bootstrap框架中。
如果不用栅格系统要实现响应布局，手动写媒体查询代码实现。
使用：必须保证上级元素的类名为：container（固定宽度，根据设备不一样设置一个固定宽度）或 container-fluid（100%宽度，始终要和设备一样宽）。
1）栅格参数的使用：
col-xs-值: 在超小屏幕下占多少列→ 超小屏幕 手机 (<768px)
col-sm-值: 在小屏幕下占多少列(平板)→ 小屏幕 平板 (≥768px)
col-md-值: 在中等屏幕下占多少列→ 中等屏幕 桌面显示器 (≥992px)
col-lg-值: 在大屏幕下占多少列→ 大屏幕 大桌面显示器 (≥1200px)
最多12列。
代码举栗：
<!-- 导航栏 -->
<div class="container">
<nav>
<ul class="list-unstyled">
<li class="col-md-3 cod-sm-4">我是导航1</li>
<li class="col-md-3 cod-sm-4">我是导航2</li>
<li class="col-md-3 cod-sm-4">我是导航3</li>
<!-- 超出部分会在下一行展示 -->
<li class="col-md-3 cod-sm-4 hidden-sm">我是导航4</li>
</ul>
</nav>
</div>
<style>
li {
border: 1px solid red;
line-height: 60px;
}
</style>
若 li 的类 class="col-md-3" 改成 class="col-md-4" 的话，4个col-md-4超过12列，一行只能显示3个格，第4个会挤到下一行。
栅格系统列的本质就是浮动实现的。
2）清除浮动的使用：
<style>
li {
border: 1px solid red;
line-height: 60px;
}
p {
background: red;
height: 20px;
}
</style>
<div class="container">
<!-- 在栅格中并排的元素，底层是用浮动实现的（float: left），会有脱标影响，
所以要清除浮动: 用类 clearfix -->
<ul class="list-unstyled clearfix">
<li class="col-md-4">li1</li>
<li class="col-md-4">li2</li>
</ul>
<p></p>
</div>
3）栅格系统的列偏移
<style>
li {
border: 1px solid red;
line-height: 60px;
}
</style>
<div class="container">
<ul class="list-unstyled clearfix">
<!-- 中屏幕下右偏移两个列 -->
<li class="col-md-4 col-md-offset-2">li1</li>
<li class="col-md-4">li2</li>
</ul>
</div>
12列不能被格子整除时，偏移剩余列的一半，就可以居中。
4）嵌套列
<li class="col-md-3 text-center">我是导航1
<a href="#" class="col-md-6">登录</a>
<a href="#" class="col-md-6">注册</a>
</li>
列可以进行嵌套。
5）列排序
col-md-push-数字 后推列
col-md-pull-数字 前推列
（四）排版标签
<mark>标签：高亮显示
<small>小号文本标签</small> 或者 .small类名可以实现相同效果
1）列表
去掉列表的默认样式: .list-unstyled
<ul class="list-unstyled">
<li></li>
</ul>
列表项在一行上显示: .list-inline
<ul class="list-inline">
<li></li>
<li></li>
</ul>
实现水平的自定义列表: .dl-horizontal
<dl class="dl-horizontal">
<dt></dt>
<dd></dd>
</dl>
2）大小写转换
.text-lowercase：将字母转为小写
.text-uppercase：将字母转为大写
.text-capitalize：首字母大写
3）表格
给<table>设置
.table：表格table类
.table-striped：隔行变色
.table-bordered：表格边框
.table-hover：鼠标放上后的样式
设置表格状态。给<tr>设置：
<tr class="active">...</tr>
<tr class="success">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>
<tr class="info">...</tr>
4）表单
基本实例：
单独的表单空间会被自动赋予一些全局样式。所有设置了 .form-control 类的 <input>、<textarea> 和 <select> 元素都将被默认设置宽度属性为 width: 100%;。 将 label 元素和前面提到的控件包裹在 .form-group 中可以获得最好的排列。
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
</form>
内联表单：
为 <form> 元素添加 .form-inline 类可使其内容左对齐并且表现为 inline-block 级别的控件。
<form class="form-inline">
<div class="form-group">
<label for="exampleInputName2">Name</label>
<input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
</div>
<div class="form-group">
<label for="exampleInputEmail2">Email</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">
</div>
<button type="submit" class="btn btn-default">Send invitation</button>
</form>
5）按钮
<button type="button" class="btn btn-default">（默认样式）Default</button>
<button type="button" class="btn btn-primary">（首选项）Primary</button>
<button type="button" class="btn btn-success">（成功）Success</button>
<button type="button" class="btn btn-danger">（危险）Danger</button>
