移动WEB开发之响应式布局

---

一、响应式开发原理

1.1 响应式开发原理

就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的。

设备	划分情况
手机	小于768的为超小屏幕
平板	768~992之间的为小屏设备
桌面显示器	992~1200的中等屏幕
大桌面显示器	大于1200的宽屏设备

1.2 响应式布局容器

响应式需要一个父级做为布局容器，来配合子级元素来实现变化效果。

父容器	版心的尺寸划分
超小屏幕（手机，小于 768px）	宽度设置为100%
小屏幕（平板，大于等于 768px）	宽度设置为 750px
中等屏幕（桌面显示器，大于等于 992px）	宽度设置为 970px
大屏幕（大桌面显示器，大于等于 1200px）	宽度设置为 1170px

原理就是在不同屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面布局和样式变化。

二、 bootstrap的介绍

2.1Bootstrap简介

1. Bootstrap 来自 Twitter（推特），是目前最受欢迎的前端框架。Bootstrap 是基于HTML、CSS 和
   JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。
2. 框架：顾名思义就是一套架构，它有一套比较完整的网页功能解决方案，而且控制权在框架本身，有预制样式库、组件和插件。使用者要按照框架所规定的某种规范进行开发。

2.2bootstrap优点

1. 标准化的html+css编码规范
2. 提供了一套简洁、直观、强悍的组件
3. 有自己的生态圈，不断的更新迭代
4. 让开发更简单，提高了开发的效率

2.3bootstrap布局容器

Bootstrap 需要为页面内容和栅格系统包裹一个 .container 或者.container-fluid 容器，它提供了两个作此用处的类。

.container

     <div class="container">
      ...
     </div>

• 响应式布局的容器 固定宽度
• 大屏 ( >=1200px) 宽度定为 1170px
• 中屏 ( >=992px) 宽度定为 970px
• 小屏 ( >=768px) 宽度定为 750px
• 超小屏 (100%)

例1：把 container 的左右外边距（margin-right、margin-left）交由浏览器决定。

.container {
    
    
      padding-right: 15px;
      padding-left: 15px;
      margin-right: auto;
      margin-left: auto;
}

例2：在不同的媒体查询阈值范围内都为 container 设置了max-width，用以匹配网格系统。

@media (min-width: 768px) {
    
    
     .container {
    
    
            width: 750px;
     }
}

.container-fluid

• 流式布局容器 百分百宽度
• 占据全部视口（viewport）的容器。

2.4bootstrap栅格系统

基本的网格结构

<div class="container">
   <div class="row">
      <div class="col-*-*"></div>
      <div class="col-*-*"></div>      
   </div>
   <div class="row">...</div>
</div>
<div class="container">....

栅格系统的使用
注意：引入相关的样式

/*  Bootstrap 核心样式  */
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">

例1：如果孩子的分数相加等于12，孩子占满整个 container 的宽度

 <div class="row">
            <div class="col-lg-6">6</div>
            <div class="col-lg-2">2</div>
            <div class="col-lg-2">2</div>
            <div class="col-lg-2">2</div>
</div>

例2： 如果孩子的分数相加小于12，孩子不会占满整个 container 的宽度

<div class="row">
            <div class="col-lg-6">6</div>
            <div class="col-lg-2">2</div>
            <div class="col-lg-2">2</div>
            <div class="col-lg-1">1</div>
</div>

例3：如果孩子的分数相加大于12，多余的那个孩子会跑到另外一行显示

<div class="row">
            <div class="col-lg-6">6</div>
            <div class="col-lg-2">2</div>
            <div class="col-lg-2">2</div>
            <div class="col-lg-3">3</div>
</div>

效果展示：

栅格系统列嵌套
例：

<div class="container">
        <div class="row">
            <div class="col-md-4">
                <!-- 我们嵌套列表最好加一个行 row 可以取消父元素的padding值 而且高度自动和父级一样高-->
                <div class="row in">
                    <div class="col-md-4">内嵌列表1</div>
                    <div class="col-md-8">内嵌列表2</div>
                </div>
            </div>
            <div class="col-md-4">2</div>
            <div class="col-md-4">3</div>
        </div>
</div>

效果展示：

Bootstrap 按钮

<!-- 标准的按钮 -->
<button type="button" class="btn btn-default">默认按钮</button>
<!-- 提供额外的视觉效果，标识一组按钮中的原始动作 -->
<button type="button" class="btn btn-primary">原始按钮</button>
<!-- 表示一个成功的或积极的动作 -->
<button type="button" class="btn btn-success">成功按钮</button>
<!-- 信息警告消息的上下文按钮 -->
<button type="button" class="btn btn-info">信息按钮</button>
<!-- 表示应谨慎采取的动作 -->
<button type="button" class="btn btn-warning">警告按钮</button>
<!-- 表示一个危险的或潜在的负面动作 -->
<button type="button" class="btn btn-danger">危险按钮</button>
<!-- 并不强调是一个按钮，看起来像一个链接，但同时保持按钮的行为 -->
<button type="button" class="btn btn-link">链接按钮</button>

效果展示：

---

总结

以上就是今天要讲的内容，本文仅仅简单介绍了响应式布局的使用，而响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验，而且随着大屏幕移动设备的普及，用“大势所趋”来形容也不为过。随着越来越多的设计师采用这个技术，我们不仅看到很多的创新，还看到了一些成形的模式。