响应式布局 - Bootstrap

一、响应式网页

1. 一个页面，可以根据浏览设备的不同，以及特性的不同，而自动改变布局、大小等

2. 响应式网页的三个特征

    1）流式网格布局(fluid)   
    2）可伸缩的图片和字体   
    3）CSS3 Media Query - 根据客户端浏览设备的特性，有选择的执行部分css
   

3. 优缺点

    优点：可以自动适配PC/PAD/PHONE浏览器屏幕
   
    缺点：代码变复杂，需要考虑更多兼容性，并不适合内容非常多的网页
   

二、如何测试响应式网页

1. 真实物理设备

    优点：测试结果真实可靠
    不足：测试任务量太大
   

2. 使用第三方软件

    优点：无需添置真实设备
    不足：软件测试效率低，部分功能无法测试，测试结果有待进一步验证
   

3. 使用浏览器模拟器测试

    优点：测试功能强大，简单易用
    不足：测试结果有待进一步验证
   

三、响应式布局必须要清除的两个概念

1. viewport

   1. 2010年之前，html 网页基本都是为 pc 设计的，宽度比较大,在手机上的显示内容会挤压到一块，后来 iOS 引入了 viewport (视口)的概念，来优化手机上观看网站的体验

   2. iOS 引入了 viewport (视口)的概念：用于显示网页内容的一个逻辑概念，其高度和宽度都可以任意制定，网页不是显示在物理窗口，而是显示在视口中-就可以实现大网页不经缩放，直接显示手机中，但需要用户来回滑动

   3. viewport 的用法

   viewport 可以指定如下属性：

   width:  视口的宽度，可以取值为数值，或device-width
   height：视口的高度，一般不指定
   initial-scale：初始时的缩放倍率
   minimum-scale : 允许的最小缩放倍率
   maximum-scale :  允许的最大缩放倍率
   user-scalable : 是否允许用户手动缩放，可取值1/0/yes/no
   

2. CSS3 media query

   1. 作用：根据客户端浏览设备的特性，有选择的执行部分css

   2. media: 指浏览网页的设备，如screen

   3. Query: 查询出当前浏览设备的特性，如类型、宽度、高度、分辨率、色彩、方向(landscape/portrait)

   4. css3MediaQuery有两种用法

      根据媒体的特性，加载不同的外部css

   不足：客户端会不管媒体特性，请求所有的css文件

   根据媒体的特性，执行某段css中的部分内容

    @media screen and (min-width: 990px) {}
   

三、如何编写响应式网页

1. 在head标签中，声明viewport元标签, 使网页的视口和浏览器的宽高保持一致

2. 根据浏览器的不同，加载不同的css文件

3. 同一个css文件中，也根据不同的屏幕分辨率，选择应用不同的css规则

    @media screen and (max-device-width: 400px) {
    　　　.column {
    　　　　　　float: none;
    　　　　　　width:auto;
    　　　}
    　　　#sidebar {
    　　　　　　display:none;
    　　　}
    }
   

4. 注意：

   1. 所有元素的宽不能制定固定值，必须使用相对的宽度值

   width:"60%" 或者 width:"auto"
   

   2. 字体不能使用绝对大小(px),必须使用相对大小(em)

   3. 布局用的各个区块的位置都是浮动的，不是固定不变的

   4. 除了布局和文本，还必须实现图片的自动缩放,或者根据客户端屏幕的不同，加载不同尺寸的图片

      img {
      max-width:100%;
      }

四、 Bootstrap

1. 是一个html/css/js框架，适用于移动设备优先的响应式网页

     V2: 面向PC进行了样式设定，同时兼顾pad和phone
   
     V3: 面向Phone进行样式设定，同时兼顾了PC
   
     主要涉及：
   
      HTML: 为H5扩展了一些自定义属性 data-XXX
   
      CSS: CSS Reset + 几千个class
   
      JS: 基于JQ提供了十几个插件函数
   

2. bootstrap分为五部分

1. 起步startup

       创建一个bootstrap页面，查看对下述标签进行了哪些样式重置
   
       html body h1-h6 a img table ul
   

2. 全局css样式 global css

   • 按钮

     bootstrap中常用的五种颜色
     
        红色->危险
        绿色->成功
        黄色->警告
        浅蓝色->信息
        深蓝色->基础的
     
     bootstrap中常用的四个大小
     
         btn-lg ->大
        btn-md ->中
        btn-sm ->小
        btn-xs ->最小
     
     块级按钮
     
        btn-block
     
     调整按钮的位置
     
        pull-right ->右浮动
        pull-left  ->左浮动
     

• 图片

         img-rounded 圆角
         img-circle 圆形
         img-thumbnail 缩略图
         img-responsive 图片支持响应式布局
  

• 部分排版和代码

          文本颜色
  
           text-danger
           text-success
           text-warning
           text-info
           text-primary
  
          背景颜色
  
           bg-danger
           bg-success
           bg-warning
           bg-info
           bg-primary
  
          文本对齐方式
               
            text-left
            text-right
            text-center
            text-justify
  
          文本对齐方式
  
            text-lowercase
            text-uppercase
            text-capitalize
  

• 列表

         list-unstyle 去掉列表项样式
         list-inline 将所有元素放在同一行
  

• 表格

         bootlint是一个js，由bootstrap官方提供，用于检测使用bootstrap的页面中场景的html错误，class使用方面的错误-默认请求下浏览器检查不出来的
  
         table
         table-bordered 带边框的
  
         table-responsive 响应式表格，注意，使用在table的父元素上，而不是table上
  
         table-striped 隔行变色的表格
         table-hover 带悬停效果的表格