bootstrap css 在网页设计中的运用

《bootstrap css 在网页设计中的运用》由会员上传分享，免费在线阅读，更多相关内容在应用文档-天天文库。

1、BootstrapCSS在网页设计中的运用BootstrapCSS在网页设计中的运用BootstrapCSS在网页设计中的运用BootstrapCSS在网页设计中的运用　　一、现行的主流结构　　在Web开发中的弊端目前网页设计师在设计网页时常用的主流结构是DIV+CSS，其中CSS是英语CascadingStyleSheets的缩写，它是一种用来表现HTML或XML等文件式样的计算机语言，负责前段页面的美观。但是编写CSS文件是一个繁冗细致的工作，不但需要有一定的代码编写能力，更对美术设计功底有一定的要求。在网站项目开发中，往往需要编写大量

2、的CSS代码，如果没有一定的经验，很容易造成大量代码混杂，尤其是DIV+CSS编码，其本身并没有统一的规范，很容易造成外联样式与行内样式冗余等其他问题。其次，浏览器兼容性也是在前端设计时无法避免的问题，由于目前浏览器对CSS的代码识别不同，使得相同的CSS样式在不同类型、不同版本的浏览器上存在较大的显示差异。而解决这样的问题不仅需要在编写时高度注意，更需要通过大量的测试来确定最终的效果，反复的测试无疑在很大程度上降低了网页开发效率。针对于以上问题，使用CSS框架就能够很巧妙的避开这些弊端，无论是网页设计新手，还是后台开发人员，只需要对htm

3、l有一定的了解，就能够独立完成一个页面的展示。而针对于经验丰富的开发人员，CSS框架则无疑加快了开发速度，整体提升了全站建设的开发效率。　　二、CSS框架的优点与现有成熟框架　　框架本身是指一种能够使用在项目中概念上的结构。CSS框架也是这样的一种结构，它是多个CSS代码的集合文件，也可以说是一个开源的用于前端开发的工具包，里面包含支持该框架的字体排版，表单样式，表格布局等等。在开发过程中，网页工程师只需要给html元素加上所需的类，就可以快速的得到该风格的相关组件，而无需像传统编码一样一一实现，而现在成熟的CSS框架拥有较高的通用性和浏览

4、器兼容性，省去了大量的测试修改时间。目前已经存在的CSS框架日益增多，下面简单介绍几种较为流行的CSS框架：　　框架　　Elements是一个基础CSS框架，它不仅是一个框架，还拥有自己的工作流。　　框架　　YUIGrids是由Yahoo开发小组开发而成。该框架提供4种页面宽度，6种边框模板，该框架提供了超过1000个页面布局。　　框架　　该框架是比较早出现的，基于静态CSS的框架。主要由SASS动态语言为CSS提供了变量、Mixin、运算符等功能。　　框架　　这款基于SASS的框架包含了Blueprint作为其中的一个模块，并且和Ruby

5、onRails是高度整合的，用起来需要大量的命令行操作，在Rails开发人员里面用得比较多。除此之外还有新兴的多种CSS框架，每种都有其自身的特点，用户可以根据项目来选择框架的使用。尤其是上述介绍的Blueprint和Compass，是一个分工很明确的组合，前者负责样式渲染，后者则是基础框架和模块，可以说，在本文即将要介绍的Bootstrap框架诞生之前，是Web开发首选的黄金组合。　　三、Bootstrap介绍　　Bootstrap是Twitter推出的CSS框架，它由Twitter的设计师MarkOtto和JacobThornton合作

6、开发，一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC的BreakingNews都使用了该项目，现在基本上是欧美最流行的框架。CSSReset是指重设浏览器的样式。在各种浏览器中，都会对CSS的选择器默认一些数值。但并不是所有的浏览器都使用一样的数值，所以有了CSSReset，以让网页的样式在各浏览器中表现一致。Bootstrap中包含有丰富的组件，其中包括下拉菜单、按钮组、按钮下拉菜单、导航条、面包屑、分页、排版、缩略图、警告对话框、进度条等，根据这些组件，可以快速的搭建一个风格简约，功能完备的网站。它还自

7、带了一组jQuery交互插件，包括模式对话框、标签页、滚动条、弹出框等，不但功能完善，而且十分精致，正在成为众多jQuery项目的默认设计标准。而这些模块化的组件在修改起来也是非常方便的，只需要修改变量就可以形成自己独特风格的网页了。　　我们要使用Bootstrap，就必须首先将Bootstrap的文件包放在相应的文件夹下，文件包中包含所有CSS文件、jQuary文件以及相关的图标文件，而需要使用时，只用在网页文件中引入即可，代码如下：，其中“path”为Bootstrap所在路径，若用到其他组件和插件，只需要引入相应的文件就可以了。Boo

8、tstrap默认页面宽度为940px，并将其平均分为12栅格，分别为span1到span12，在使用过程中只需保持各个行块中内容的宽度不大于设置的相关span宽度即可，搭建一个网