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

熊慧 武汉交通职业学院电子与信息工程学院

移动互联网技术在不断发展，已进入互联网新时代。移动通信技术的进步和发展，各行各业对智能移动终端的应用更加广泛，使互联网的应用技术为适应社会和用户的需要，将转变方向到移动平台。目前在市面上和用户手中的移动终端类型较多，如各种智能手机和各种平板电脑等。移动终端与PC段存在着较大的差异，设备的屏幕尺寸差距较大是最明显的特征，同一网址在PC端和移动终端显示的网页页面也有所差异。并且移动终端的设备种类繁多且其屏幕尺寸、分辨率等也有所差别。为了满足用户使用不同设备访问页面时的良好体验，开发人员提出了以Bootstrap框架为基础的响应式网页设计思想和理念，充分利用现有的较为通用的网页框架设计模板，为用户提供和设计开发出能适用于不同设备的页面，提升用户的网页浏览体验。

1 响应式网页设计

响应式网页设计是指在设计研发网页页面的工作中，根据应用设备的不同尺寸大小、不同的系统、不同的屏幕分辨率等，以及用户对页面在设备上显示布局和浏览体验的要求。由响应式设计的网页页面，能够满足用户在不同设备上的使用和需要，根据用户设备的系统类型、屏幕分辨率、屏幕尺寸大小等要素对页面显示布局进行自动调节，用户也可根据自身的需要在屏幕上对页面进行手动调节，为用户提供良好的浏览体验。

响应式网页研发设计的中心设计理念和思想是:优先考虑移动终端、效果逐渐加强。在进行页面的研发和设计的时候，设计优先考虑和满足移动终端，移动终端的屏幕显示尺寸大小有多种类型，其屏幕分辨率也有多种规格，设计开发和满足移动终端的页面显示效果，适应不同移动终端的页面布局，这样的设计安排方式有益于提高网页设计开发的效率和效果。

在优先考虑和满足移动终端的页面布局显示效果的基础上，在满足移动终端小尺寸屏幕页面布局的显示效果的前提下，逐步开发设计和满足更大尺寸屏幕的页面布局的显示效果。在小尺寸屏幕的显示范围内，将页面应有的内容显示出来，但内容的显示形式则较为简约。随着屏幕尺寸的增大，可显示页面内容的空间增大，在不改变页面显示内容的基础上，提高页面内容的显示效果。

2 Bootstrap简介

Bootstrap由Twitter的MarkOtto和Jacob Thornton合作研究设计与开发的，其包括了HTML、CSS和JavaScript的响应式网页设计开发框架。Bootstrap设计的最重要目的是为了使所设计的页面能够良好的显示在不同屏幕尺寸的设备上，使页面能够兼容于各种屏幕尺寸的设备。传统的网页设计开发技术，难以实现其页面兼容不同屏幕尺寸设备。Bootstrap为网页设计提供多种类型的模板或样式，并且适用于响应式网页设计开发，Bootstrap框架的使用，可减轻设计兼容于各种屏幕尺寸设备的网页的工作量。并且，以Bootstrap框架为基础开发设计的响应式网页，有着很好的可维护的性能和扩展的性能。以这些良好特点为基础，Bootstrap技术得到迅速推广和发展，为网页设计提供更多类型的模板或样式，为网页开发设计人员提供了良好辅助。

3 网页设计与实现

3.1 网页设计

本文以研究分析响应式网页设计为基础，与Bootstrap框架相结合，以响应式设计研发个人博客页面为例子，简要讲述网页的响应式设计理念和思想。网站的界面设计应满足于各种屏幕尺寸设备的浏览，并且要有良好的显示效果。在网页开发设计的过程中，优先考虑和满足移动终端的页面布局显示效果，例如用户常用的智能手机和平板电脑等，在满足移动终端小尺寸屏幕页面布局的显示效果的前提下，逐步开发设计和满足更大尺寸屏幕的页面布局的显示效果，即PC端的页面设计和开发。

本文以PC端的页面显示效果设计为主，网页的使用环境主要是考虑在PC机上，因此页面显示界面的适应要求如下:尺寸大于768px的采用PC端的页面显示布局，小于768px的采用小尺寸页面显示布局。

3.2 网页实现

3.2.1 HTML5结构的搭建。

Bootstrap框架是基于HTML5来完成，包括CSS和JavaScript内容。因此网站界面的结构设计要以HTML5为基本结构依据。

3.2.2 Bootstrap引入

本网站是以Bootstrap框架为基础进行响应式网站界面的设计，若要符合Bootstrap框架的相关结构形式和内容，必须将相应的文件或内容引入到网站页面中。

3.2.3 移动设备兼容

如要使网站页面能够适应不同屏幕尺寸设备，展现出良好的显示效果，成为响应式的网页页面，则要在标签中加入相对应的代码。

通过加入相对应的代码，当网站页面在不同屏幕尺寸设备上显示时，页面的内容和元素会根据屏幕大小进行比例性的显示。

4 结束语

用户在工作、生活中或因条件的限制，其无论使用何种设备或系统，都希望所访问的页面有良好的浏览性，网页设计的开发人员也应该满足各种设备对访问页面的兼容性和良好的布局性。设计研发人员可利用成熟的前端框架——Bootstrap进行响应式页面设计工作，使网站页面适用于不同屏幕尺寸大小的设备，为用户提供良好的显示服务。

[1] 舒后,熊一帆,葛雪娇.基于Bootstrap框架的响应式网页设计与实现[J].北京印刷学院学报,2016, 24(2):47-52.

[2] 何秀全.基于Bootstrap的响应式网页设计[J].软件导刊,2017,16(6):104-105.

[3] 汪红宇,刘雄辉, 乔波. 基于Bootstrap框架实现响应式布局[J].电脑与信息技术,2017,25(5):19-22.