bootstrap为一款流行的前端框架，可用于响应式布局前端界面开发。
一、获取bootstrap文件
英文官网：http://getbootstrap.com/
中文官网：http://www.bootcss.com/
二、创造基础文件
1.IE8开启标准渲染模式
<meta http-equiv="X-UA-Compatible" content="IE=edge">
2.配置视窗
<meta name="viewport" content="width=device-width, initial-scale=1 , user-scalable=no">
备注：
<meta name="viewport" content="width=device-width, initial-scale=1 , user-scalable=no">
initial-scale - 初始的缩放比例
user-scalable - 用户是否可以手动缩放
3.引入bootstrap CSS样式文件和js文件
4.引入jQuery文件
三、个人网页
1.响应式导航
<nav class="navbar navbar-default navbar-fixed-top">
小导航按钮：
<button class="navbar-toggle" data-toggle="collapse" data-target="navbar-collapse">
<span class="icon-bar">
logo:
class="navbar-brand"
导航：
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
2.响应式图片：
class="img-response"
3.栅格系统
<div class="container">
<div class="row">
<div class="col-md-4">
1)共分为12份
4.图标
<span class="glyphicon glyphicon-grain mai-icon"></span>
5.链接跳转到按钮
<a href="#" target="_blank" class="btn btn-primary">加入学习</a>
6.地址标志：
<address> </address>
7.CSS 动画库
animate.css 三D动画库
地址：http://www.jq22.com/yanshi819
使用：
<link rel="stylesheet" href="animate.min.css">
<h1 class="animated infinite bounce">Example</h1>
$('#yourElement').addClass('animated bounceOutLeft');
8.
空格：
9.
表格 <table>
标题：
<thead>
<tr>
<th>标题</th>
</tr>
</thead>
内容：
<tbody>
<tr>
<td>内容</td>
</tr>
</tbody>
标题用 <th>
内容用 <td>
时间 <small></small>
class="pull-right"右浮动
10.
bootstrap 中的面板镶嵌列表组：
去除面板中的 div class="pannel-ody" 可去掉外边框
11.
导航栏中的 navbar-fixed-top 清除顶部浮动
12. chart.js 插件
官网地址：
www.chartjs.org
1)引入 chart.js
CSS：
li{margin:0; padding:0; list-style-type:none;} li清除一点
//textarea高度自适应
textarea{
height: auto;
}
13.bootswatch.bootku.com 样式风格
14.自媒体
文字居右 media-right