bootstrap简介、环境安装、排版、表格、按钮、表单、图片、网格

一、 简介

1. 概述
   该框架是由Twitter公司（全球最大的微博）两个工程师研发的，基于html、css、javascript的开源框架。
2. 用途
   重要部分就是响应式布局，丰富多样的样式定义、组件和插件
   二、 环境安装

3. 下载
   Sass和Less 是升级版的CSS
   
   我使用的bootstrap代码是经过编译过的代码。
   

4. 框架结构
   

5. 标准模板
   1)
   
   让浏览器以最新的IE内核版本或使用谷歌内核去渲染当前页面，是先当前项目开发必备meta属性
   2)
   
   视口meta 标签，让文档的宽度和设备的宽度一致，默认缩放比为1，这个是让手机端浏览器有响应式作用
   3) 由于那些html5.0的标签及媒体查询属性，不能被IE8及以下版本IE浏览器识别，所以可以引入html5shiv.min.js和respond.js
   
   4) 注释在不同浏览器版本下引入对应js：
   lt ie9 小于ie9
   lte ie8 小于等于ie8
   

6. CDN（掌握）
   内容分发网络，传统静态资源的问题
   l 站点安全得到有效保障
   l 用户集中访问时，会减轻服务器压力
   l 内集中放置，方便管理。
   三、 排版
   四、表格
   
   四、按钮

7. 三种可以作为按钮使用的标签:input a button
   

8. 按钮的预定义样式
   

9. 按钮的尺寸
   

10. 激活状态和禁用状态
    
    五、表单

11. 表单的基本类型
    text、password、radio、checkbox
    html5.0 属性： tel、number、search等：
    

12. 表单的基本格式
    第一、二步的样式可以省略，第三步form-conctrol不能少
    

13. 内联表单
    
    form-inline 在大屏幕表单按inline-block并排放置，当屏幕小于768px，会恢复独占行的样式
    

14. 表单合组
    
    

15. 复选框和单选框
    
    
    设置不可点击的禁用状态
    

16. 文本域和下拉列表
    

17. 调整尺寸
    
    六、图片
    
    七、网格
18. 什么是响应式布局？
    传统的：
    流式布局：普通的浮动布局
    自适应：百分比
    响应式：
    二者结合，使用@media 做屏幕适配

19. 网格系统的响应式原理
    

20. bootstrap的布局使用
    bs框架包含了一个响应时候，移动设备优先，不固定的网格系统，可以随着设备或视口的大小增加宽度，一行最显示12列。