基于Bootstrap 响应式的Web 前端设计

潘 超,许 烨

(南阳职业学院,河南 南阳 474750)

0 引言

随着现代社会经济的快速发展,人们的生活水平得到了极大改善,互联网与智能设备已经全面融入人们日常生活与工作,手机成为人们获取信息、浏览网页的重要移动设备。Web 开发人员在进行信息发布以及处理时,应当充分重视移动设备的应用,然而要针对移动设备开发专门的应用软件,必然要投入大量的资金和人力。如何简单、有效地设计出传统计算机设备的Web 应用,并且较好地与移动设备兼容,成了Web 开发人员面临的重要问题。为了有效解决此类问题,Ethan Marcotte 提出了响应式Web 设计。Bootstrap 是十分关键的框架结构,依托于现代新型技术的引用,不仅能够促进系统平稳升级,还能够为使用者带来良好的体验,从而获得更加广泛的应用[1]。本文提出了Bootstrap 背景下响应式Web 前端设计的方法,希望为进一步推动Web 前端设计发展提供帮助。

1 响应式Web 设计

1.1 响应式Web 设计内涵与CSS 框架分析

响应式Web 设计面向的是所有设备的网页内容,能够实现其科学布局的显示体制[2]。在响应式Web 设计中,引入了现代新型的设计理念,即移动设备优先,再全面覆盖桌面设备。在这种需求越来越旺盛的背景下,出现了各种类型的响应式Web 框架,为开展Web前端设计提供了重要支持。

各种框架设计的根本目的都是为了提高CSS 应用的便捷性,使得Web 前端开发人员能够在较短的时间内完成多种常用类型页面的布局,不再需要重新编辑底层CSS[3]。此外,响应式Web 框架还可以引导Web前端设计人员规范框架命名方式以及代码编写模式,重复利用开发出的许多代码,显著改善代码的适用范围,提高代码开发速度。Bootstrap 框架是Twitter 公司Web 前端设计人员开发的开源框架,我国也开发出了一些开源框架,其代表框架有Amaze,UI 等[4]。

1.2 响应式Web 设计关键点

在进行响应式Web 前端设计时,设计人员通常需要重点把握以下两个关键点,分别是:有无必要运用响应式CSS 框架以及怎样高效设计原型[5]。第一,是否使用CSS 框架,需要联系Web 前端的复杂程度。在Web 前端的布局较为单一、组件不多的情况下,通常不运用CSS 框架。这种情况下全部代码均从零开始,同时编写代码也要从桌面设备慢慢变化为移动设备。为了提高Web 前端设计效果,相关人员可以先运用固定布局展示桌面实际效果,在大致确定之后再改为流式布局。第二,在实际进行Web 前端设计时,相关人员要依照不同的设备类型设计出多种多样的效果图,同时科学把握页面布局改变、视窗缩放表达等效果。最后将设计完成的效果图放置到不同设备中检测,从而第一时间探索到一个完美平衡点。

2 Bootstrap 框架及在响应式Web 设计中的应用

2.1 Bootstrap 概述

Bootstrap 是由Twitter 公司设计人员在2011 年开发出的一种框架,其能够为响应式Web 前端设计中的各种问题提供有效的解决方法。Bootstrap 框架整合了HTML5,CSS3 以及jQuery 等多种技术,既涵盖了栅格系统、排版、表格以及图片等通用型代码,又涵盖了各种组件库与JavaScript 插件库等,甚至还能够选择不同形式的主题。设计人员通过Bootstrap 框架的应用,一方面能够快速、高效地统一网页界面,另一方面也有助于改善使用者的实际体验。

2.2 基于Bootstrap 的响应式Web 前端设计研究

2.2.1 Bootstrap 应用到响应式Web 前端设计中的流程

第一,相关人员从网络上下载能够满足生产条件的Bootstrap,同时对文件结构进行相应地调整与改进,之后依托于Bootstrap 的通用模板,对其进行进一步的修改,使其能够很好地满足项目应用的需求。需要格外留意的是,js 应当要排列在body 元素的末尾位置,并且需要先加载完成jQuery.min.js 文件[6]。

第二,相关人员依托Bootstrap 中的格栅系统完成对应的响应式规划,同时在模块中引入合理的元素以及系统自带的组件,以此完成页面排版的工作;再将其导入到多种输出设备上开展运行测试的工作,以此查看其有无达到理想的设计效果。

第三,根据设计完成的Web 网页效果,围绕具体要求开展html 组件代码的编写,也可在原有代码组件html 的基础之上进行改进,最终实现html 结构的语义化。此外,通过增添和调整的方式进行CSS 代码的优化,最终获得Web 前端设计的效果图。在实际设计产出过程中,得到的Web 前端设计效果图往往与设计人员的原始构思有一定的差异,这就需要加强设计人员之间的交流、有针对性地解决各种问题,从而获得双方满意的结果。

第四,在相关人员进行插件选择过程中,尽可能使用Bootstrap 自身包含的jQuery 插件,以此获得良好的动画与交互效果。当难以达到这种插件的使用需求时,再选取其他的jQuery 插件,确保可以获得良好的画面效果,改善使用者的体验感受[7]。

2.2.2 Bootstrap 应用到响应式Web 前端设计中的技巧与方法

设计人员在基于Bootstrap 架构开展响应式Web前端设计过程中,要深入学习和探究Bootstrap 源代码,最大程度依照Bootstrap 代码运用规则进行设计,以此充分发挥Bootstrap 的应用优势。设计人员在实际将Bootstrap 应用到响应式Web 前端设计中时,可以使用以下技巧与方法:

CSS 声明次序:需要将属性相似的声明放置到同一组,同时依照特定的次序进行排列,具体次序为positioning,box model,typographic,visual。

CSS 命名原则:借鉴Bootstrap 源代码中的相关命名方式与标准,对CSS 代码执行修改、增减操作。下列为面板组组件代码:

为了保证原始面板组件的形式不发生变化,并且能够很好地契合项目实际要求,相关人员需要对代码进行一定的修改,具体操作如下:

将代码

中的class 属性添加类代码panel-stone 调整成

,同时优化对应组件的样式。

CSS 媒体查询:在实际运用CSS 媒体查询过程中,设计人员需要将有关联性的代码聚集到一起,这样不仅能够提供良好的阅读体验,出现代码错误问题时,也能够在第一时间查找出问题点。

设计人员在制作个性化主题或者调整源代码过程中,要尽可能的运用Less,改善CSS 代码编写质量,有效缩短代码编写时间。

3 结语

综上所述,Bootstrap 框架的运用能够有效提高响应式Web 前端的效率,为使用者带来更加良好的体验。设计人员在实际进行Web 前端设计时,需要结合开发成本以及使用者浏览设备,综合考虑有无必要将网页开发为响应式以及运用响应式CSS 框架的情况,在此基础之上构建一个理想的开发方案。