Bootstrap CSS 在网页设计中的运用

导语：Bootstrap CSS 在网页设计中的运用一文来源于网友上传，不代表本站观点，若需要原创文章可咨询客服老师，欢迎参考。

一、现行的主流结构

在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、运算符等功能。

passCSS框架

这款基于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文件以及相关的图标文件，而需要使用时，只用在网页文件中引入即可，代码如下：<linkrel="stylesheet"type="text/css"media="all"href="http://path/Bootstrap.css"/>，其中“path”为Bootstrap所在路径，若用到其他组件和插件，只需要引入相应的文件就可以了。Bootstrap默认页面宽度为940px，并将其平均分为12栅格（Grid），分别为span1到span12，在使用过程中只需保持各个行块中内容的宽度不大于设置的相关span宽度即可，搭建一个网站中常用1:2格局的版面只需要如下代码：<divclass=”row”><divclass=”span4”>左边菜单栏</div><divclass=”span8”>右边内容栏</div></div>若需要设置元素平行移动，代码为“offsetspanN”（0<N<12）,则该元素即可移动对应的宽度。Bootstrap的栅格系统的先进性主要体现在自适应设计（ResponsiveDesign）方面，在如今平板电脑、手机、笔记本等多终端应用的时代，自适应设计可谓是必不可少的，Bootstrap中整个栅栏系统是可以以"流动布局"来适应各种终端设备，每个区块的位置都是浮动的。在流动布局中，Bootstrap已经搭好了实现自适应设计的基础框架，并且非常容易修改。与此同时，Bootstrap还提供了众多的相关插件和工具。如jQuery轮播插件Unslider，各种按钮、开关、复选框和日期选择器等组件，可以实现Bootstrap可视化布局的Layoutlt！和Bootstrap-wysiwyg等等，还有FontAwesome这样的iconfont，能够提供丰富的icon资源供使用者选择。

四、Bootstrap拓展

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

五、结语

这些不足的地方均得以弥补，不仅解决了各个浏览器的兼容问题，提高了工作效率，同时也规范了原本杂乱的CSS代码。在CSS框架中着重对BootstrapCSS框架进行了介绍，浅谈了Bootstrap的插件、组件、使用方法和拓展应用。尽管Bootstrap功能非常强大，但它仅仅只是一个框架，不能提供其他的功能实现，若想将Bootstrap或其他CSS框架完全的应用于项目建设，还需要进一步学习LESS及其他相关知识。

作者：李淼杜明晶苗放单位：成都理工大学