当前位置:主页 > SEO优化 >

Twitter BootStrap:前端框架利器

作者: 奕星SEO 分类: SEO优化 发布时间: 2019-09-11 20:09 内容来源:网络整理阅读量:

  Web前端开发者每天都与HTML、CSS、JavaScript打交道,然而不少人都是周而复始地写模板、样式和交互效果,并没有想过如何将这些重复的工作整合在一起。Twitter推出的Bootstrap能够帮助Web前端开发者摆脱这种重复劳动。

  为了应对复杂的需求,早期的Twitter前端工程师在开发网站时几乎采用了所有自己熟悉的前端库。造成了网站维护困难、扩展性不强、开发成本高等问题。此时BootStrap被提上了日程。Twitter要求前端工程师完全依靠这一单一框架进行前端开发。

  Twitter 在2011年8月将其开源,并在2012年2月3日发布了2.0版。在GitHub上,这个项目已有拥超过2万位关注者和4000个分支。 Bootstrap的设计者、著名前端工程师Mark Otto这样写道:“Bootstrap是我和Jacob Thornton编写的一个前端工具箱,目的是为了帮助设计师和Web前端开发人员快速有效地创建一个结构简单、性能优良、页面精致的Web应用。它使用 了最新的浏览器技术,可以提供精致的网页排版方式以及表单、按钮、表格、网格栅格化、导航等诸多元素。”Bootstrap的内置样式继承了Mark Otto简洁亮丽的设计风格,任何开发团队都能使用它提供的HTML模板、CSS样式和jQuery组件来布署或者重建一个外观漂亮的页面应用。

  BootStrap 2在原有特性的基础上着重改进了用户的体验和交互性,比如新增加的媒体展示功能,适用于智能手机上多钟屏幕规格的响应式布局,另外新增了12款jQuery插件,可以满足Web页面常用的用户体验和交互功能。

  关于如何应用提取出来的文件大致有两步:第一是如何安装Bootstrap的基本样式,第二是如何调用Bootstrap的jQuery插件,我们首先来看样式的安装。

  这 里有两个关键点,其中“bootstrap.css”是Bootstrap中的基本样式文件,只要使用Bootstrap就必须调用这个文件。而 “bootstrap-responsive.css”则可以根据你的爱好来选择,如果想让项目具有响应式布局的效果,就必须要调用这个样式文件,而且调 用必须遵循先后顺序,“bootstrap-responsive.css”必须放置在“bootstrap.css”之后,否则便不具有响应式布局功 能。而最后的“style.css”是项目中的自定义样式,用来覆盖Bootstrap中的一些默认设置,便于开发者定制。

  “CSS”样式安装完后,就可以进入“js”的调用,方法很简单,只需把想要的jQuery插件按照与上一步相似的方式加入到代码中。

  BootStrap 2的模块从大的方面可以分为布局框架、页面排版、基本组件、jQuery插件以及变量编译的Less几个部分。与第1版相比,Bootstrap 2增加了多个新模块,比如布局框架中的“响应式布局”,页面排版中的“ICON”,基本组件中的“进度条”,而jQuery插件从以前的5个效果增加到 12个,完全可以满足项目常用的交互效果。下面来简单了解一下Bootstrap 2中各模块的功能。

  布局在每个项 目中都必不可少,Bootstrap在960gs的基础上扩展了一套优秀的Grids布局,而在“响应式布局”中有更强大的功能,能让网格布局适应各种设 备。使用也相当简单,只需要按照HTML模板应用,就能轻松地构建你所需的布局效果。此外,改变模板中的类名,就能实现不同的布局风格。比如常见的“固定 布局”,只需要在HTML中添加“container”类名;而要实现“流体布局”,只需要在HTML中添加“container-fluid”类名。 Bootstrap还为开发者设计了“Responsive”, 令布局框架更为出色。开发者可以在此基础上进行任何样式的覆盖,从而实现理想中的响应式设计。

  页面排版的好坏直接影 响产品风格,说直白点就是好不好看。在Bootstrap中,页面的排版都是从全局的概念上出发,定制了主体文本、段落文本、强调文本、标题、Code风 格、按钮、表单、表格等格式。而Bootstrap 2中又添加了几个新亮点。其一是“Code”使用了“Google Prettify”插件,增强了代码的阅读体验;其二在“按钮”中增加了组合、下拉、图标等效果,如图2所示。

  第三就是“Icon”的使用,Bootstrap在“Icon”部分采用了“Sprites”技术,为大家准备了上百种常用的“Icon”图标应用。

  说 起Icon,这里有必要在向读者推荐一个从BootStrap扩展出来的Font Awesome项目。它是Dave Gandy在Bootstrap的基础上扩展出来的一个Icon主题,最大的特点在于,整套图标中没有运用任何图片。大家可能会觉得奇怪,没有图片如何制 作Icon?难道是通过纯CSS编写的吗?是的,Font Awesome项目中主要运用了CSS3的“@font-face”和“伪元素”一起实现。

  具备了上面的条件后,就只要样式中调用“FontAwesome”字体,并在“伪类元素”中使用对应的“字符编码”:


本文链接地址:http://www.seohuizhou.com/seoyouhua/3884.html
上一篇:<<台州谷歌seo的公司
下一篇:Asda网站漏洞导致数百万客户面临黑客攻击的风险>>