NFH.011 - 响应式开发与Bootstrap框架应用（一）

---

2.16学习经验分享#

Bruce_Zhu于2017.2.16

---

一、响应式网页的特征
1）流式网格布局(fluid)
2）可伸缩的图片和字体
3）CSS3 Media Query -

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

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

1 . viewport

1. 2010年之前，html网页基本都是为pc设计的，宽度比较大,在手机上的显示内容会挤压到一块，后来iOSiOS引入了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有两种用法

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

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

b.根据媒体的特性，执行某段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. 按钮

bootstrap中常用的五种颜色

红色->危险
绿色->成功
黄色->警告
浅蓝色->信息
深蓝色->基础的

bootstrap中常用的四个大小

  btn-lg ->大
 btn-md ->中
 btn-sm ->小
 btn-xs ->最小

块级按钮

 btn-block

调整按钮的位置

 pull-right ->右浮动
 pull-left  ->左浮动

2. 图片

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

3. 排版和代码，仅作了解

   文本颜色

   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

4. 列表

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

5. 表格

bootlint是一个js，由bootstrap官方提供，用于检测使用bootstrap的页面中场景的html错误，class使用方面的错误-默认请求下浏览器检查不出来的

table

table-bordered 带边框的

table-responsive 响应式表格，注意，使用在table的父元素上，而不是table上

table-striped 隔行变色的表格
table-hover 带悬停效果的表格