欢迎来到设计师实训基地-南通科迅教育
咨询电话:0513-81107102
Bootstrap CSS 在网页设计中的运用
2017/9/26
科迅教育
413
南通平面设计培训班哪家好?

一、现行的主流结构

在Web开发中的弊端目前网页设计师在设计网页时常用的主流结构是DIV+CSS,其中CSS是英语CascadingStyleSheets(层叠样式表单)的缩写,它是一种用来表现HTML或XML等文件式样的计算机语言,负责前段页面的美观。但是编写CSS文件是一个繁冗细致的工作,不但需要有一定的代码编写能力,更对美术设计功底有一定的要求。在网站项目开发中,往往需要编写大量的CSS代码,如果没有一定的经验,很容易造成大量代码混杂,尤其是DIV+CSS编码,其本身并没有统一的规范,很容易造成外联样式与行内样式冗余等其他问题。其次,浏览器兼容性也是在前端设计时无法避免的问题,由于目前浏览器对CSS的代码识别不同,使得相同的CSS样式在不同类型、不同版本的浏览器上存在较大的显示差异。而解决这样的问题不仅需要在编写时高度注意,更需要通过大量的测试来确定最终的效果,反复的测试无疑在很大程度上降低了网页开发效率。针对于以上问题,使用CSS框架就能够很巧妙的避开这些弊端,无论是网页设计新手,还是后台开发人员,只需要对html有一定的了解,就能够独立完成一个页面的展示。而针对于经验丰富的开发人员,CSS框架则无疑加快了开发速度,整体提升了全站建设的开发效率。

二、CSS框架的优点与现有成熟框架

框架本身是指一种能够使用在项目中概念上的结构。CSS框架也是这样的一种结构,它是多个CSS代码的集合文件,也可以说是一个开源的用于前端开发的工具包,里面包含支持该框架的字体排版,表单样式,表格布局等等。在开发过程中,网页工程师只需要给html元素加上所需的类,就可以快速的得到该风格的相关组件,而无需像传统编码一样一一实现,而现在成熟的CSS框架拥有较高的通用性和浏览器兼容性,省去了大量的测试修改时间。目前已经存在的CSS框架日益增多,下面简单介绍几种较为流行的CSS框架:

1.ElementsCSS框架

Elements是一个基础CSS框架,它不仅是一个框架,还拥有自己的工作流。

2.YUIGridsCSS框架

YUIGrids是由Yahoo开发小组开发而成。该框架提供4种页面宽度,6种边框模板,该框架提供了超过1000个页面布局。

3.BlueprintCSS框架

该框架是比较早出现的,基于静态CSS的框架。主要由SASS动态语言为CSS提供了变量、Mixin、运算符等功能。

4.CompassCSS框架

这款基于SASS的框架包含了Blueprint作为其中的一个模块,并且和RubyonRails是高度整合的,用起来需要大量的命令行操作,在Rails开发人员里面用得比较多。除此之外还有新兴的多种CSS框架,每种都有其自身的特点,用户可以根据项目来选择框架的使用。尤其是上述介绍的Blueprint和Compass,是一个分工很明确的组合,前者负责样式渲染,后者则是基础框架和模块,可以说,在本文即将要介绍的Bootstrap框架诞生之前,是Web开发首选的黄金组合。

三、Bootstrap介绍

Bootstrap是Twitter推出的CSS框架,它由Twitter的设计师MarkOtto和JacobThornton合作开发,一经推出后颇受欢迎,一直是GitHub上的热门开源项目,包括NASA的MSNBC(微软全国广播公司)的BreakingNews都使用了该项目,现在基本上是欧美最流行的框架。CSSReset是指重设浏览器的样式。在各种浏览器中,都会对CSS的选择器默认一些数值。但并不是所有的浏览器都使用一样的数值,所以有了CSSReset,以让网页的样式在各浏览器中表现一致。Bootstrap中包含有丰富的组件,其中包括下拉菜单、按钮组、按钮下拉菜单、导航条、面包屑、分页、排版、缩略图、警告对话框、进度条等,根据这些组件,可以快速的搭建一个风格简约,功能完备的网站。它还自带了一组jQuery交互插件,包括模式对话框、标签页、滚动条、弹出框等,不但功能完善,而且十分精致,正在成为众多jQuery项目的默认设计标准。而这些模块化的组件在修改起来也是非常方便的,只需要修改变量就可以形成自己独特风格的网页了。

我们要使用Bootstrap,就必须首先将Bootstrap的文件包放在相应的文件夹下,文件包中包含所有CSS文件、jQuary文件以及相关的图标文件,而需要使用时,只用在网页文件中引入即可,代码如下:,其中“path”为Bootstrap所在路径,若用到其他组件和插件,只需要引入相应的文件就可以了。Bootstrap默认页面宽度为940px,并将其平均分为12栅格(Grid),分别为span1到span12,在使用过程中只需保持各个行块中内容的宽度不大于设置的相关span宽度即可,搭建一个网站中常用1:2格局的版面只需要如下代码:左边菜单栏右边内容栏若需要设置元素平行移动,代码为“offsetspanN”(0

四、Bootstrap拓展

Bootstrap跟其他主流框架的不同之处,在于它是基于LESS的一套前端工具库。LESS是一种基于CSS之上的高级语言,其目的是使得CSS开发更灵活和更强大,甚至可以说是一种真正的编程语言了。使用LESS时,也需要先将样式引入,具体代码如下:LESS赋予了CSS动态语言的特性,如变量,继承,运算,函数等等。例如当用CSS3的传统方法来定义圆角时,通常会写出如下代码(IE8和以前更老版本不支持):border-radius:-webkit-border-radius:10px;-moz-border-radius:10px;-border-radius:10px;但是通过Bootstrap的LESS,就可以直接定义成:@includeborder-radius(10px);。同时,Bootstrap还支持定制服务,可以根据需要对Bootstrap的初始文件包进行缩减,将自己不需要调用的文件省去,使得整个文件都精炼起来。

77
关闭
先学习,后交费申请表
每期5位名额
在线咨询
免费电话
QQ联系
先学习,后交费
TOP
您好,您想咨询哪门课程呢?
关于我们
机构简介
官方资讯
地理位置
联系我们
我要学习
先学后付
申请试听
在线咨询
网站XML地图
0513-81107102
周一至周六     8:30-21:00
微信扫我送教程
手机端访问
南通科迅教育信息咨询有限公司     苏ICP备15009282号     联系地址:江苏省南通市人民中路23-6号新亚大厦二楼、三楼         法律顾问:江苏瑞慈律师事务所     Copyright 2008-