欢迎来到上海园丁鸟网络科技有限公司|企业网站建设企业建站企业官网建设企业官网
咨询热线:18017747315当前位置: 首页 > 新闻动态 >
联系我们
企业网站建设 建站咨询
电话咨询:13524991327
E-mail:1424374510@qq.com
QQ:1424374510

运用Bootstrap+JQurey优化响应式网站的研究

作者/整理:http://www.voez.net/ 来源:http://www.voez.net/ 日期:2018-07-24

随着移动终端设备的普及,网页设计师为了满足用户需求,必须使传统PC机以及各种终端设备均能完美呈 现网页。所以,响应式Web设计技术应运而生。笔者论述了响应式网站的相关概念、核心技巧及设计方法,并简要介绍了目前流行制作响应式网站工具 Bootstrap,详细阐述了使用Bootstrap开发网页的方法。
1.引言
移动设备种类繁多,有不同的尺寸、不同的分辨率、不 同的操作系统、不同的横屏与竖屏切换方法。我们有过在手 机中浏览网页需要放大页面的经历,也有当设备为横屏时, 网页并没有作出响应的经历,而大多数网站没有必要也没有 足够的资金来设计和开发APP,只需要将网页设计成响应式 即可。简单来说,响应式就是HTML5+CSS3+JS的技术结合, 通过同一个设计方案来兼容不同设备的不同显示方式。通 过这种创新的设计理念,可以使众多小型企业以最少的代价 满足不同的终端持有者需求,提高用户体验、扩大用户群。
2.响应式网站的优势和核心技术
2.1响应式网站优势
人们常见的传统网页就是采取基本的DIV+CSS的制作 模式,在不同的设备上,所展示的页面结构、字体大小、图 片大小都一致,在尺寸小的显示屏上只能放大之后通过左右 滑动才能正常浏览。随着企业需求与用户需求的不断增加, 产生了很多伪响应网站。所谓伪响应,也就是看起来可以在 不同的移动终端正常显示,可实际上,是为不同的移动设备 单独设计的一套网站。这样的网站投人的时间及成本、代码 量会相当高。
本论文所提倡的响应式最早是由Ethan Marcotte121提出 的,旨在实现为不同的设备打造不同的设计和开发方案,实 现不同设备网页自动响应及调整。它使用的技术实际上就是 流式布局、弹性图片以及CSS3的媒体查询的结合。它实 现屏幕分辨率自适应及图片的自动伸缩等,是一种全新的设 计思维模式。这种思维模式需要从项目需求开始,贯穿到项 目组每个人的思想中。其优势显而易见,工作量、成本和维 护难度大大减小,而用户体验的舒适感、满意度大大提高。
2.2响应式网站核心技术
响应式Web设计所涉及的技术并不是全新的,它和 Ajax技术有点类似,它只不过是使用创新的理念来重新认识 传统技术一一流式布局、弹性图片,并应用CSS3新技术媒 体查询和媒体监听技术。
2.2.1流式布局及栅格系统
所谓流式布局的意思是不再用像素值或固定值设置盒子 宽度,而改用百分比设置宽度的一种布局形式。进行流式布 局,可以使网页在一定范围内进行横向缩放,达到相应效果。 当子元素的宽度以百分百显示时,参考的是父层的宽度。其 中最不好理解的是子元素padding、margin的值,也是参考 的父层元素width的值。如图1所示:
百分比数值只能出现在width、padding、margin上, 边框的宽度不能以百分百显示。所以,在响应式设计中,元 素的宽度都是以百分比为单位,同时配合CSS3的属性mm- width、 max-width 进行设置。

2.2.2弹性图片
弹性图片也属于流式布局的一部分。这种图片设置模式 能自动依据输出设备的分辨率不同加载不同类型的图片,来 适应不同显示需求,不会造成带宽的浪费。同时,当输出设 备类型或分辨率改变时,能及时自动加载对应类型的图片, 不会造成视觉上的不适。这里所说的弹性图片指的是插入 图片而不是指背景图片。简单来说,图片会随着屏幕或视窗 的缩放调整自身大小,但是最大不会超过父元素的尺寸。当 图片需要弹性显示时,可以设置img的max-width属性值为 100%,且当其实际尺寸超过父元素时,能够根据父元素尺寸 的改变相应调整自身尺寸。
部分CSS3代码设置示例如下: img{
max-width: 100%; height:auto; display:block;
}
2.2.3媒体查询
CSS3的@media规则[4]是进行响应式设计时较关键的 技术。其中Media queries (媒体查询)的作用是探测不同媒 体设备或者屏幕分辨率引用不同的样式表,使页面在不改变 内容的前提下,通过CSS改变页面样式来适应移动终端。下
面对媒体查询的使用进行详细描述。
可以将多个媒体査询写在一个样式表中,也可以通过链 接多个样式表来进行媒体查询。如下代码:
@media screen and (min-width: 640px) { nav{
width: 20%; float: right;
}
} 或者
〈link rel=” stylesheet” type=” text/CSS” href=” style_ max.CSS” media=” screen and(min-width:960px)” >
设置多个样式表有利于资源组织和后期维护,一个样式 表里多个媒体查询可以提高页面效率。比如,iPad用户随时 有可能切换屏幕,为了保证在极短时间内页面作出响应,应 选择效率较高的方式。
3.响应式网站的设计方法
响应式的设计方式非常多,可以使用原生态的 HTML5+CSS3的方式,也可以借用CSS框架进行搭建。对 于专业的开发人员,使用CSS框架无疑可以提高效率、加快 开发速度。所谓CSS框架就是开源的用于前端开发的工具 包,包含常用的响应式表单样式、导航样式、页面排版样 式、字体排版样式。开发过程中,开发人员只需要为标签加 上对应的类(class),就可以快速得到该元素的所属风格, 如果需要修改,只需修改对应的类即可,并且目前较为成熟 的CSS框架拥有较高的通用性和较好的兼容性。目前流行 的 CSS 框架越来越多,如 Elements、YUIGrids、Blueprint、 Compass等。而本文要介绍的Bootstrap框架,是Web开发 的首选。
3.1Bootstrap 介绍
Bootstrap是一个开源的框架,它包含了丰富的组件,比 如常用的下拉菜单、按钮组、导航条、栅格化排版、缩略图、 进度条、表格、表单、JQuery交互插件、弹出框、滚动条等。 它所有的自定义CSS样式都包含了响应式的核心,如流式布 局、弹性图片、媒体查询。所以掌握了前面提到的响应式核 心技术对使用Bootstrap技术制作网页,有非常大的优势。
开发者根据Bootstrap所提供的基本组件,可以快速搭 建一个模块化的功能齐全的风格统一的网站,并且减少测试 网页兼容性的工作量。
3.2Bootstrap 的优势
在制作传统网站时,通常习惯进行CSS初始化及全局样 式设置。在Bootstrap框架中也一样,当然Bootstrap已将全 局样式完成,不需要去写代码。作为前端开发人员都拥有归 零思想,但在实际项目中,归零样式后会存在潜在Bug (如 em归零后,显示出的不是斜体)。而Bootstrap是轻量级的 CSS代码库,其并没有一味覆盖原有的样式,而是更加重视 归零有可能产生的Bug (如body、form的margin等),保 留部分浏览器的基本样式,消除部分潜在的Bug,提升一些 细节体验,降低了开发难度。
为了能快速对页面进行布局,Bootstrap有完备的“移动 设备优先” 思想的栅格系统,随着屏幕尺寸或视口尺寸的 增加,系统会自动平分为最多12列,通过设置断点,对每 种移动设备尺寸都定义了对应的CSS类来进行栅格化设置。 比如当超小屏幕(手机< 768px )分为一列可以使用.col-xs-1; 小屏幕(平板^768px)分为2列可以使用.col-sm-2;中等 屏幕(桌面显示器2992px)分为3列可以使用col-md-3;大 屏幕(大桌面显示>1 200px)可以使用col-lg-4。
在网页交互方面,Bootstrap也提供了 JavaScript库, 通过引用基本库,开发者可以轻松完成窗口警告框、滚动 条、组件的交互及友好的用户提示、表单验证等。另外, Bootstrap还提供了多种主题任开发人员选择,有助于快速套 用CSS样式,开发出具有良好用户体验的响应式页面。
3.3Bootstrap的应用步骤
3.3.1基础工作
要使用Bootstrap作为制作工具,首先得在body最后面 最先加载jQuery.min.js文件(注意版本号),这是一个基础 包[6],必须放在所有js文件的最前面。
3.3.2套用基本模板
根据网页结构,寻找最接近的基本模板及全局化样式, 并通过修改基本模板以符合网站需求。
3.3.3合理的栅格系统
根据用户需求所设计的网页选择合理的栅格系统,根据 设计稿完善模块及组件,并可以在chrome的模拟设备上进 行测试,检测是否能实现响应。
3.3.4自定义CSS
根据网页设计稿,优化自定义的组件代码结构[5],结合 HTML5标签使之语义化,通过对原生CSS的添加和修改或 自定义class (与传统DIV+CSS方式相似),达到与设计稿 一致的效果。当与默认的CSS样式产生冲突时,可以就依照 CSS的就近原则为其增加类,并重新定义默认样式。如<img src="..." class="img-rounded">,可以在其基础上重新改为 <img src="..." class="img-rounded img-size">,增力加一个 img- size 的类重新定义样式。
3.3.5交互效果
要想网页炫丽,需要应用到CSS3+jQuery的交互效果。 开发者可以优先使用Bootstrap提供的JQuery插件实现常见 的动画及交互效果,之后再加人其他JQuery插件提高代码利 用率及优化网页。
4.结语
Bootstrap以它的开发速度及效率获得了大部分前端开发 人员的青睐,响应式网站具有的优势性及必要性也推动了整 个设计行业的发展。目前类似的CSS框架越来越多。Web作 为时下最流行的动态媒介,惊人的多样性和变革速度使众多 的网页设计师及前端设计爱好者接受它。随着Apple Watch 的上市,可以预期,未来的各种新型设备会接踵而来,这为 前端设计人员带来挑战。响应式设计已向挖掘Web潜能的方 向迈出了一小步,更多的问题等待发现并解决。