web响应式开发

人们在浏览网页时，不仅仅是使用电脑来浏览，还有些是通过Ipad、手机等设备浏览。而Ipad、电脑、手机的屏幕大小不同且每一款手机、IPad的屏幕也有大小区别，网页在这些设备的显示也必定会有所区别。显而易见，电脑屏幕最大，手机显示屏最小，Ipad显示屏适中，同一个网站在这些设备的显示不可能都和在电脑显示是一样的。由此，想要这些设备都能够将同一个网页的内容完整显示，第一个方法就是根据这三种设备的大小设置不同大小的网页，以上也提到过，手机、Ipad的屏幕也不会是完全相同，那么是不是又要根据这些手机、Ipad的屏幕大小又另设计同一个网页的布局排版？那么想想都知道工程量会很大，且也不切实际。因此，响应式开发便油然而生。
响应式开发便是针对移动设备的开发，其要求尽量的精简，保证浏览的流畅性和良好的用户体验。响应式开发的原理是通过CSS3中的媒体查询属性，通过查询screen的宽度来指定某个宽度区间的页面布局。在此，也许会有人说，CSS3相对于某些浏览器具有一定的兼容性，确实，但一般移动设备中，浏览器一般皆是最新版本，类似于web的移动开发，不需要太考虑兼容性问题。
响应式开发中的设备有以下几种规格：
1、超小屏设备即移动设备：768px以下
2、小屏设备：768px~992px，类似Ipad
3、中屏设备：992px~1200px
4、宽屏设备:1200px以上，类似电脑
响应式开发具有一个每一个开发人员的共同约定，即移动设备优先的原则。而框架的出现使得响应式开发更为的简便。框架有多种，这里我向大家介绍其中的一种框架——Bootstrap框架。
Bootstrap框架是基于HTML、CSS、JavaScript的,它简洁灵活，使得Web开发更加快捷。Bootstrap框架中有许多组件、插件、全局CSS样式等，在此不一一罗列，只介绍一些常用的给大家。
1、容器
（1）container-fluid：流式布局容器，宽度为100%，在水平方向铺满浏览器
（2）container:宽度不固定，随浏览器宽度的变化而变化，即设定了版心，其中：
a、超小屏：宽度为100%
b、小屏:宽度为750px
c、中屏:宽度为970px
d、宽屏:宽度为1170px
注意：无论是container-fluid还是container均有左右padding，左右padding为15px
2、栅格系统
栅格系统：随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。其中有行（row）和列(col)，行必须包含在类名为container或container-fluid的容器中。而列的使用分为四种规格屏幕，超小屏、小屏、中屏、宽屏。超小屏的列(col-xs-)、小屏的列(col-sm-)、中屏的列(col-md-)、宽屏(col-lg-),*可为1-12的整数，含义为：当屏幕为xs/sm/md/lg时占12份中的几份即为占12列中的几列
例：

<div class="container">
    <div class="row">
        <div class="col-xs-5 col-sm-7 col-md-9">//当为超小屏时占5份，小屏时占7份，中屏时占9份，宽屏时占12份
            ...
        </div>
    </div>
</div>

有时候浏览器水平方向的页面的布局不一定是完全占满的，有些中间会有许多留白的地方，若使用栅格系统如何解决这样的布局方式？为了能灵活便捷的页面布局，栅格系统中具有列偏移和列排序。列偏移：col-xs-offset-、col-sm-offset-、col-md-offset-，其含义是：可为1-12的整数，当屏幕为xs/sm/md/lg时向水平方向偏移几列。列排序是可改变列的排序，其中用两种方式：col--push-、col--pull-,第一个表示屏幕大小，第二个表示份数。
列偏移，例：

<div class="container">
    <div class="row">
        <div class="col-xs-offset-5 col-sm-offset-7 col-md-offset-9">//当为超小屏时偏移5份，小屏时偏移7份，中屏偏移占9份，宽屏时偏移12份
            ...
        </div>
    </div>
</div>

3、表格
若想要制作表格，在容器中添加类名为table即可。该框架为表格设置了一些样式,想要设置表格的样式，必须要基于存在table类名的情况下
（1）添加类名为table-striped，条纹状表格
（2）添加类名为table-bordered，带边框表格
（3）添加类名为table-responsive，响应式表格
（4）添加类名为table-hover,当鼠标悬停至表格时的样式
（5）添加类名为table-condensed,将表格紧缩
例：

<div class="table table-striped">
...
</div>
<div class="table table-bordered">
...
</div>

4、状态
在Bootsrap框架中提供了四种常见且常用的状态，每一个状态表现为不同的颜色
（1）类名为active:表示为激活状态，灰色
（2）类名为info:表示为信息，蓝色
（3）类名为success:表示为成功，绿色
（4）类名为warning:表示警告，橙色
（5）类名为danger:表示危险，红色
例：

<input type="button" class="active" />//背景色为灰色
<input type="button" class="info" />//背景色为蓝色
<input type="button" class="success" />//背景色为绿色
<input type="button" class="warning" />//背景色为橙色
<input type="button" class="danger" />//背景色为红色

5、按钮
为 a、button 或 input 元素添加按钮类（btn）便可将该标签变成按钮的模样，Bootstrap框架为按钮也预设了一些样式，具有7中不同的样式，添加这些预设样式的前提是该标签具有btn类名。这些预设样式的表现结果与状态的表现结果大相径庭。

<button type="button" class="btn btn-default">（默认样式）Default</button>//表现为一般按钮样式，灰色

<button type="button" class="btn btn-primary">（首选项）Primary</button>//表现为宝蓝色

<button type="button" class="btn btn-success">（成功）Success</button>//表现为绿色

<button type="button" class="btn btn-info">（一般信息）Info</button>//表现为蓝色

<button type="button" class="btn btn-warning">（警告）Warning</button>//表现为橙色

<button type="button" class="btn btn-danger">（危险）Danger</button>//表现为红色

<button type="button" class="btn btn-link">（链接）Link</button>

6、快速浮动
浮动一般只分为两种，左浮动、右浮动。在一般是CSS样式中，左右浮动分别为:float:left/right,在Bootstrap框架中左右浮动的实现是在想要浮动的容器中添加类名:pull-left/pull-right,使用浮动必然会需要清除浮动，清除浮动的方法为添加类名:clearfix
7、隐藏页面内容
涉及到页面的自然会牵涉到设备的屏幕问题，隐藏页面内容也分为四种屏幕大小的隐藏，至于哪四种在此就不再一一例举了，隐藏页面的方法是添加类名:hidden-xs/hidden-sm/hidden-md/hidden-lg.
8、标签
网页中，标签是必不可少的，标签的广泛使用使得框架中也提供了关于导航的组件等。
在想设置成标签的容器中添加类名:nav。Bootstrap框架为标签也预设了一些样式。样式的使用，自然也要在存在nav类名的前提下才可使用。
a、nav-pills:胶囊式标签
b、nav-stacked:胶囊式垂直标签
c、nav-justified:两端对齐标签
d、nav-tabs:标签页
例：

<div>
    <ul class="nav nav-tabs">
        <li><a href="">....</a></li>
        ....
    </ul>
</div>

9、导航条
导航条在网页中也是较为常见的，导航条一般可分为几种：水平排列、垂直排列、手风琴效果等。使用Bootstrap来实现导航条，添加类名navbar即可。导航条的预设样式，该框架也为开发人员提供了一些。
a、navbar-form:表单式
b、navbar-btn:按钮式
c、navbar-brand:品牌图标式
d、navbar-text:文本式
e、navbar-link:非导航链接
f、navbar-fixed-top:将导航条固定造在顶部
g、navbar-fixed-bottom:将导航条固定在底部
例：

<div>
    <ul class="navbar navbar-fixed-top">
        <li><a href="">...</a></li>
        ...
    </ul>
</div>

10、下拉列表
下拉列表的实现，添加类名dropdown,预设样式:dropup(下拉列表的下拉方向为向上，若不设此项，则默认方向为向下)，dropdown-header(列表的头部标签).
例：

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

使用Bootstrap框架进行页面的布局排版，不需要自行设置太多的样式就可以得到较为好看的效果，但想要和UI设计的网页设计图一致是不可能的，若想一致只能自己编写样式。关于web响应式开发的Bootstrap框架还有许多的样式、组件、插件等，且响应式的开发框架不仅仅只有这一种框架。若想要知道更多关于Bootstrap框架的信息，可以自行上网查找Bootstrap的官网。