响应式布局 Bootstrap（01）

1.是什么？Bootstrap，来自 Twitter，是目前最受欢迎的前端框架，Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷

Bootstrap 插件全部依赖 jQuery

<!DOCTYPE html>
<html lang="zh-cn">  //lang属性指定当前页面所用的自然语言 注意是为浏览器自动翻译提供基础功能 屏幕阅读软件的基础发音
  <head>
    <meta charset="utf-8">  
    <meta http-equiv="X-UA-Compatible" content="IE=edge">  //为小IE存在 跨IE浏览器兼容性级别 启动内核
    <meta name="viewport" content="width=device-width, initial-scale=1">// 重点 （view ）视口的概念  
    <title>Bootstrap 101 Template</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
      <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script> //让老IE兼容H5新标签

      <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>//让老IE支持媒体查询
  </head>
  <body>
    <h1>你好，世界！</h1>
    <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script> //这个不多说 jq
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

官网抓来的模板注释补上，另外为了方便使用bootlint 需要copy一段启动代码，见boot中文网大声笑

2.css类

全局css

按钮
.btn block .btn-default
.btn .btn-color（ 5种基础颜色） .btn-lg/sm/xs
（关于size的class）

图片 .img-circle .img-thumbnail img-responsive .img-round

精彩继续：

列表 .list-unstyle .list-online

文字排版 .textcolor
5种基础颜色 .bgcolor
5种基础颜色 .text-uppercase 大写
.text-lowercase 小写
.text-capitalize 首字母大 .text-left 对齐方式
.text-right
.text-center
.text-justify

辅助类 .hidden[-lg][-md][-sm][-xs] .pull-left/right
左右浮动
.clearfix 清除浮动 .caret 三角箭头
.close 关闭按钮 .table
.tabke-bordered
.table-striped
.table-hover
.table-response

表单默认表单水平表单行内

按钮	.btn block	.btn-default .btn	.btn-color（ 5种基础颜色）	.btn-lg/sm/xs （关于size的class）
图片	.img-circle	.img-thumbnail	img-responsive	.img-round

列表	.list-unstyle	.list-online
文字排版	.textcolor 5种基础颜色	.bgcolor 5种基础颜色	.text-uppercase 大写 .text-lowercase 小写 .text-capitalize 首字母大	.text-left 对齐方式 .text-right .text-center .text-justify
辅助类	.hidden[-lg][-md][-sm][-xs]	.pull-left/right 左右浮动 .clearfix 清除浮动	.caret 三角箭头 .close 关闭按钮	.table .tabke-bordered .table-striped .table-hover .table-response
表单	默认表单	水平表单	行内