作者：侯竺君

来源：《文存阅刊》2019年第02期

        摘要：随着移动设备的普遍运用，需要更多适合移动终端智能设备的网站，这就要求网页设计工作者有必要制作出符合人们体验需要的网页。必须保证网页在移动端也可以实现平稳的运行，而移动设备种类比较多，受到屏幕展示尺寸与显示分辨率等因素的影响，也要求网页在浏览的过程中要有对操作行为做出的响应。

        关键词：Bootstrap;响应式设计;网站开发

        有些网站没有足够的投入来支持开发，这时候就需要进行响应式的开发，这是一个可以兼容各种设备的开发方式，促进页面更具有弹性，让用户能够自动适应不同设备需要的页面，提升了用户的体验。基于此，本文针对基于Bootstrap的响应式网站开发进行简要的分析与总结。

        一、响应式网站

        （一）响应式网站概述

        响应式的网页设计主要是在页面开发的时候，按照页面利用设备尺寸与操作系统等多种因素的影响，设计出更符合人们使用需求的呈现方式，可以在多种类型的设备中适应，科学在访问页面的过程中，调整为最合适的状态，体现出网页最佳的效果。要对移动设备的情况实现考虑，保证人们在移动设备上浏览网页的舒适感和实际体验，要对网页显示的内容进行优化，丰富网页的体验效果[1]。

        （二）响应式网站开发的技术

        （1）在设计响应式网站过程中，是一个弹性化的效果。网站页面在不同设备和不同的尺寸中会有不同的布局与分布，图片等布局可以智能的适应设备，给人们最好的展示效果，避免出现不兼容移动终端设备的情况，对整体效果也没有任何影响，在科学技术发展速度比较快的今天，响应式的页面开发可以给人们一个很好的网页浏览的体验。

        （2）响应式网站的一个主要内容就是媒体查询，按照各种终端设备的类型与体验效果，对Cascading Style Sheets（层叠样式表）进行定义，在响应的时候就可能进行媒体查询，把层叠样式表里面的规则的等条件运用到固定的媒体类别下，就能够让网站在每种媒体类型下有不同的展示方式，在层叠样式表、Hyper Text Markup Language（超文本标记语言）与Extensible Markup Language（可扩展标记语言）都能够媒体查询，能够在各种设备上更加便利的实现页面展示[2]。

        （3）在非移动端设备上显示页面的时候主要是流式布局，因为固定布局方式不能够按照页面进行移动的调整，但是流式布局可以按照设备窗口进行自动的调整，更好的适应设备的显示，页面的宽度要用非固定数值，也就是百分比来设定，利用层叠样式表的浮动属性进行设计，尺寸发生变化也会使页面更好的适应设备。

        二、Bootstrap

        （一） Bootstrap概述

        Bootstrap是一个响应性web开发框架，包括超文本标记语言、级联样式表和JavaScript。传统技术很难实现页面的兼容性，Bootstrap旨在解决不同尺寸设备中显示页面的兼容性问题。借助Bootstrap框架，开发适合不同尺寸设备的页面变得更加容易和方便，能很好地支持响应性页面开发，Bootstrap技术得到了迅速进步与发展，可以提供更加丰富和多种风格的内容，进而满足消费者不同的体验需求[3]。

        （二） Bootstrap的优势

        Bootstrap框架将超文本标记语言、级联样式表和Java Script有机地集成在一起，提供了级联样式表的动态性，使得基于Bootstrap框架开发的页面能够适应不同大小设备的显示，降低开发成本与提高开发效率。bootstrap代码易于编写，这使得页面开发工作者能够快速学习并使用，提高网站开发的效率[4]。

        三、基于Bootstrap的响应式网站开发

        首先，加载jQuery.min.js文件位于body的后面，必须放在所有js文件的前面。然后，按照页面结构，找到最相似的模板，修改模板以满足网站的需要，按照要求设计网页选择了一个合理的网格系统，按照草案完善了模块与组件，可以在模拟设备上进行测试，检查是否响应。

        然后，按照网页设计草案，优化定制组件代码，组合超文本标记语言标签以使其具有语义，通过添加和修改原生层叠样式表或定制类来达到与设计草案相同的体验。当与默认层叠样式表样式有冲突的时候，可以按照层叠样式表的接近性重新定义样式。比如，可以在其基础上重新改为，增加一个imgsize的类重新定义样式[5]。

        最后，如果想让页面变得漂亮，网站的开发人员可以首先使用Bootstrap提供的极快瑞插件来实现普通动画，然后添加另外的极快瑞插件来提高代码利用率并优化页面。

        四、结语

        总之，Bootstrap的响应式网站可以满足人们日常学习生活的使用和提高网页展示的质量，因其丰富性与高效的特点，也受到更多人的喜欢，可以使人们在各种设备上体验最优质的网页浏览体验，随着智能设备多样化的进步，也可能使网站开发工作人员更加开发Bootstrap的潜力，在更小的移动设备上进行开发，让人们在固定端与移动端都可以体验到网站的适应效果，随时随地的浏览网站进行工作学习与娱乐，给人们带来更好的视觉体验。

        参考文献：

        [1]傅翠玉，王少茹，洪秀金.Bootstrap框架在响应式WEB开发中的应用[J].电脑知识与技术，2018，14（21）：85-86.

        [2]崔蓬.基于Bootstrap的响应式企业网站设计[J].电子技术与软件工程，2018（07）：36-37.

        [3]张晓颖，陶薇薇.运用Bootstrap+JQurey优化响应式网站的研究[J].信息与电脑（理论版），2017（11）：72-74.

        [4]高榕岭.Bootstrap在前端开发中的优势[J].计算机光盘软件与应用，2015，18（01）：74+76.

        作者简介：

        侯竺君（1991年—），女，四川阆中，硕士，高校教师，助教，研究方向：移动应用开发。下载本文