画布 1
移动web第七天
  全天目标
    了解响应式网页特点，知道响应式布局的核心技术：媒体查询的用法
    了解BootStrap框架使用方法和手册用法，能够使用BootStrap框架开发响应式网页
  媒体查询
    目标
      能够使用媒体查询写法，检测不同的响应断点，设置差异化CSS样式
    学习内容
      max-width / min-width
      书写顺序
      案例
        隐藏效果
      其他写法
        完整写法
        link写法
  BootStrap
    目标
      掌握BootStrap框架基本用法
      掌握BootStrap框架手册用法
    学习内容
      BootStrap介绍
        UI框架
        封装了大量的HTML、CSS、JavaScript，只需要按照框架要求书写代码，即可快速完成对应的效果
      下载
        生产环境
          压缩的代码
          开发可以直接使用
        less源码
          基于less的源码包
          可学习使用
      使用
        全局CSS样式
          栅格系统
            介绍
              作用：响应式布局
            原理
              将网页等分成12等分，每个元素占对应的份数
            使用
              大屏
                响应断点
                  >= 1200px
                类前缀
                  col-lg-*
                版心
                  1170px
              中屏
                响应断点
                  >= 992px
                类前缀
                  col-md-*
                版心
                  970px
              小屏
                响应断点
                  >= 768
                类前缀
                  col-sm-*
                版心
                  750px
              超小屏
                响应断点
                  < 768px
                类前缀
                  col-xs-*
                版心
                  100%
          标签样式
            表格
            按钮
            .....
        组件
          作用：封装常见功能的HTML+CSS
          分类
            布局组件
              1. 引入样式表
              2. 复制粘贴结构，修改内容
            字体图标
              1. 引入样式表
              2. 空标签粘贴类名
        插件
          介绍
            封装了常见功能的交互效果，包含HTML、CSS、JavaScript
          使用步骤
            1. 引入样式表
            2. 引入js
              2.1 jQuery.js
              2.2 bootstrap.js
            3. 复制结构，修改内容
        定制
          作用：针对项目定义bootstrap框架
          步骤
            1. 导航菜单：定制
            2. 输入对应的Less变量值
            3. 编译并下载，使用新框架