Bootstrap框架

Bootstrap

1.简介：一个前端开发的框架，基于HTML、CSS、Javascript，可以使web开发更加快捷
    * 框架：一个半成品软件，开发人员 可以在框架的基础上，进行开发，简化编码
    * 优点：
          1.定义了很多的CSS样式和JS插件。开发人员可以直接使用这些样式和插件得到丰富的页面效果
          2.响应式布局
              * 同一套页面可以兼容不同分辨率的设备
2.快速使用
    * 下载Bootstrap
    * 在项目中将这三个文件夹复制
    * 创建HTML页面，引入必要的资源文件

响应式布局

* 同一套页面可以兼容不同分辨率的设备
* 实现：依赖于栅格系统：将一行平均分成12个格子，可以指定元素占几个格子
* 步骤：
    1.定义容器：相当于之前的table
      * 容器分类：
          1.container：两边有留白
          2.container-fluid：每一种设备都是100%宽度
    2.定义行：相当于之前的tr
    3.定义元素：指定该元素在不同设备上，所占的格子数目。样式：col-设备代号-格子数目
        * 设备代号：
            1.xs：超小屏幕 手机（<768px）：col-xs-12
            2.sm：小屏幕 平板 （>=768px）
            3.md：中等屏幕 桌面显示器 （>=992px）
            4.lg：大屏幕 大桌面显示器 （>=1200px）

        * 注意：
            1.一行中如果格子数目超过12行，则超出的部分自动换行
            2.栅格类属性可以向上兼容，栅格类适用于与屏幕宽度大于或等于分界点大小的设备
            3.如果设备宽度小于设置栅格类属性的设备代码的最小值，会一个元素占满一整行

CSS样式和JS插件

* 全局CSS样式：
    ＊　按钮：class="btn btn-default"
    ＊　图片：
          ＊　class="img-responsive"：图片在任意尺寸都占100％
          ＊　图片形状：
             ＊　<img src="..." alt="..." class="img-rounded">：方形
             ＊　<img src="..." alt="..." class="img-circle">：圆形
             ＊　<img src="..." alt="..." class="img-thumbnail">：相框
    ＊　表格：
        ＊　table
        ＊　table－bordered
        ＊　table－hover
    ＊　表单
        ＊　给表单项添加：class＝＂form－control＂

＊　组件：
    ＊　导航条
    ＊　分页条

＊　插件：
    ＊　轮播图