基于Bootstrap的响应式网页设计与实现

刘志东　陈天伟

摘要；移动智能设备的广泛应用，使得网页的设计要求必须满足移动设备端的完美呈现。该文在研究响应式网页设计的基础上，结合Bootstrap框架，以个人博客页面的响应式设计与实现为例，阐述了响应式网页设计的设计思想，说明了Bootstrap框架的在应用中的实现过程。采用基于Bootstrap框架的响应式网页开发，不但可以缩短开发周期，提高开发效率，还可以使网页适应千差万别的移动设备，具有广泛应用前景。

关键词：Bootstrap；响应式设计；HTMI～；媒体查询

中图分类号：TP311 文献标识码：A 文章编号：1009-3044（2017）07-0085-03

1背景

互联网进入Web2.0时代，同时随着移动通信技术的发展，越来越多的智能移动终端广泛地应用于各个行业，促使互联网应用必须适应移动终端的需要转向移动平台方向。目前移动终端种类繁多，如智能手机、智能手表，平板电脑等，移动终端與PC端最大的不同之处就是设备屏幕尺寸要小，同时不同设备的分辨率和尺寸也存在差异，PC端页面在移动终端上无法直接呈现。对于用户而言，要求在不同系统平台、不同设备尺寸、不同分辨率下，访问的页面都应该保持良好的布局性。为了满足用户对访问页面的一致性的体验要求，开发人员提出了基于Bootstrap框架的响应式网页设计理念，利用网页框架的通用模板，为用户设计能够自动适应不同设备需要的页面，提升了用户的体验。

2响应式网页设计

2.1概述

响应式网页设计是指在设计和开发页面过程中，根据页面的应用设备的尺寸、系统平台、分辨率、屏幕方向等，以及用户的需要能够对设备显示页面进行相应的布局和呈现。响应式开发设计的页面，在能够在用户使用不同的设备（如PC机、平板电脑或者智能手机）进行页面浏览时，能够根据设备的显示需要，对显示分辨率、页面布局、显示方向等内容进行自动调制，适应设备需要，展示最佳显示效果。响应式网页开发的核心设计思想就是“移动优先、渐进增强”。所谓“移动优先”是指在对页面进行设计时，充分考虑移动终端尺寸、分辨率的多样性，先对移动终端的页面效果进行设计，能够适应移动终端的布局和用户体验，再来考虑PC端的页面效果，这样对提升网页开发效率是有益的。而“渐进增强”是指在优先考虑移动终端设备的前提下，页面显示效果从小尺寸逐渐向大尺寸转换，逐步进行开发。在小尺寸的有限显示空间内，页面内容要突出显示，而内容表现则要简化，随着尺寸的增多，在页面内容不变的前提下，提升内容表现，使页面展示效果越来越丰富。

2.2核心技术

1）弹性化

通过响应式网页设计开发的页面具有很强的“弹性化”。页面展示效果根据设备尺寸的变化能够展现不同的页面布局与效果，在不同尺寸设备下，图片的大小可以自动调整，页面内容可以自动调整布局，不会再出现页面整体效果被破坏的情况。但是基于响应式的页面开发并不一定是最完美的，但是从目前来说，能够给用户在不同设备下访问网页提供一个不错的用户体验。

2）媒体查询

媒体查询是实现页面响应式开发的关键内容。根据不同设备媒体类型和显示条件，首先定义CSS（层叠样式表）样式表。在实现响应式的过程中，通过媒体查询，将CSS样式表中指定的规则用于指定媒体类型或指定的条件，这样就可以使页面在不同的媒体类型或同一媒体不同条件下呈现出不同样式表现。在CSS、HTML和XML中都可以进行媒体查询设置，通常在CSS中居多，主要应用在@media和@import规则上。通过媒体查询，不同设备上可以很方便地实现不同的页面效果，对于各式各样的移动设备而言，具有广泛的应用。

3）流式布局

流式布局主要是相对于固定布局而言，目前PC端页面开发采用的主要是固定局部方式。所谓固定布局就是在设计页面的过程中，最外层的容器宽度是固定不变的，无论页面在何种尺寸的设备中对页面进行方面，页面的宽度都是固定不变的，都是一样的。而流式布局则不同，其外部容器会根据显示尺寸自动扩展或缩小，能够自动适应访问页面的设备窗口。要实现流式布局，页面中各个组成部分的宽度不能采用固定值，而要采用百分比来设置，同时利用CSS中的元素浮动属性，当设备尺寸发生变化时，页面中的元素会根据页面宽度按照设定的百分比进行自动调整其宽度和位置，这样就可以很好的适应不同的设备尺寸。

3Bootstrap

3.1Bootstrap简介

Bootstrap由Twitter的MarkOtto和Jacob Thornton共同设计与开发，它是一个包含了HTML、CSS和JavaScript的响应式网页开发框架。Bootstrap设计的目的是解决页面在不同尺寸设备下显示的兼容性问题，如果依据传统技术对网页进行兼容性的实现是比较困难的，而Bootstrap提供众多漂亮的样式可供选择，而且能够很好地支持响应式网页开发，通过Bootstrap框架的辅助，开发适应不同尺寸设备的网页变得更加容易和方便。同时，基于Bootstrap框架开发的响应式网页具有良好的可扩展性和可维护性。基于这些优良的特性，Bootstrap技术发展迅速，其可提供的内容也更加丰富多样式，为开发人员提供了一个开发响应式网页的良好解决方案。

3.2Bootstrap的优势

Bootstrap框架将HTML、CSS和JavaSeript进行了有机地整合，尤其是其赋予了CSS动态性，使得基于Bootstrap框架开发的页面能够适应不同尺寸设备的显示，针对不同尺寸设备只需开发一套页面即可，大大地降低了开发成本和维护成本，提高了开发效率。Bootstrap框架中包含了大量的Web组件，支持页面的导航、进度条、缩略图、排版等，并且得到了大部分浏览器的支持。Bootstrap框架设计者充分考虑开发人员在开发网页过程中的工作强度，将Bootstrap框架进行了优良设计，Bootstrap代码编写简单，使得页面开发人员能够快速学习并轻松使用，大大地提高了页面开发的效率，缩短了开发周期。

4网页设计与实现

4.1网页设计

本文以个人博客页面为对象来完成基于Bootstrap的响应式网页设计与实现。网站界面设计要求能够自适应PC机和手机、平板电脑等移动设备的访问，同时要求界面美观大方。在设计过程中，遵循“移动优先”的原则，首先针对移动终端设备进行页面设计，满足在不同尺寸下的设备中能够具有良好的界面效果，在此基础上确定PC端显示的布局及样式。这种移动优先的设计理念基于移动端来开发，优先满足移动端，从而对PC端的用户体验进行了弱化。本文研究对象为个人博客网站，其访问的环境主要以PC端为主，兼顾移动端，因此，在对本研究中的網站进行设计时，采用PC端优先的原则来设计。

针对PC端主要进行如下设计；

1）导航条位于页面顶部，同时导航项带有图标效果。

2）主页图片轮播占满浏览器整个窗口宽度。

3）分为四栏，图片与文字内容间隔排布。

4）页脚水平居中，并位于页面底端

小尺寸移动终端进行如下设计：

1）导航栏进行折叠，放入带有Logo图片的按钮中。

2）单栏进行布局，只显示文字布局，包括标题和文字内容.

3）页脚包含其他链接。

本文以PC端设计为主，使用环境也以PC机为主，因此界面适应要求如下：尺寸大于768px的采用PC端布局，小于768px的采用小尺寸布局。

4.2网页实现

1）HTML5结构的搭建。

Bootstrap框架基于HTML5来完成，包括CSS和JavaScript内容。因此网站中的结构要遵循HTML5的基本结构。HTML5的结构如下所示：

2）Bootstrap引入

本网站是基于Bootstrap框架来进行响应式网站设计，若要支持Bootstrap框架的相关内容，必须将其相关文件引入到页面中。Bootstrap相关文件引入按照如下操作：

3）移动设备兼容

如要使页面能够在不同尺寸下展示出符合响应尺寸的效果，做到响应式页面，需要在标签中添加如下代码：

通过引入该行代码，当页面在不同尺寸设备上显示页面内容时，组成页面的各个元素占页面的比例保持不变。Bootstrap框架中定义了四种不同尺寸设备屏幕的大小，分为如下所示；

1）超小屏幕，其屏幕像素小于768像素，前缀为xs。

2）小屏幕，其屏幕像素介于768像素和922像素之间，前缀为$ITl。

3）中等屏幕，其屏幕像素介于922像素和1200像素之间，前缀为md。

4）小屏幕，其屏幕像素大于等于1200像素，前缀为1g。

本网站在媒体查询中实现的代码如下：

4）实现流式布局

页面采用流式布局进行实现。流式布局的实现需要使用Bootstrap框架中的栅格系统。栅格系统就是通过一系列的行与列的组合创建页面布局，页面内容就可以放入到创建好的布局当中。其网格系统的实现原理非常简单，仅仅是通过定义容器大小，平分12份，再调整内外边距，最后结合媒体查询，就制作出了强大的响应式网格系统。Bootstrap框架中的网格系统就是将容器平分成12份。通过流式布局，针对不同尺寸的设备设定相对应的样式表来实现列宽的控制。当尺寸发生变化时，通过调用css样式无缝变换。本文实现代码如下：实现效果如图1和图2所示。

5结束语

本文采用Bootstrap框架技术实现了个人博客的响应式网页开发，以PC端优先设计为主，兼顾移动端响应，实现响应式布局，并将具体网页内容填入到指定部分实现整个网页。基于Bootstrap框架开发页面，要充分利用百分比来对页面中的元素宽度和间隔距离进行设置，不能使用像素。同时必须要合理使用媒体查询功能，兼顾大、中、小不同尺寸的屏幕，并且页面中应用的图片要具有弹性，适应不同尺寸。