开发者社区> 华章计算机> 正文

《Bootstrap开发精解:原理、技术、工具及最佳实践》一1.2 为什么选择Bootstrap

简介:
+关注继续查看

本节书摘来自华章出版社《Bootstrap开发精解:原理、技术、工具及最佳实践》一书中的第1章,第1.2节,作者[美] 亚拉文·谢诺伊(Aravind Shenoy)乌尔里希·索松(Ulrich Sossou),更多章节内容可以访问云栖社区“华章计算机”公众号查看

1.2 为什么选择Bootstrap

Bootstrap可以说是“开箱即用”,因为它为我们带来了不可思议的响应式栅格系统(Grid system)和基本CSS样式(Base CSS),其中包含的扩展类可以实现并增强各种元素的样式化效果,涵盖了从排版、按钮、表格、表单到图片等各种各样的元素。此外,它还拥有大量的组件,有字体图标(Glyphicon)、响应式导航条、路径导航(BreadCrumbs)、警告等;另外还有很多官方的插件,例如模态窗(Modal)、轮播(Carousel)和弹出框(PopOver)等, Bootstrap都已经帮我们准备好了。所以,只要对HTML和CSS有基本的了解,就可以理解Bootstrap并在项目中进行应用,使之成为网页设计中最关键的工具。
现在,我们来看看为什么说Bootstrap是网页设计中一种前途无量的框架:
可重用性:在网页设计中,模块化的开发模式深受人们的喜爱,因为我们不必为设计的各个部分重写代码。Bootstrap具有现成的组件、CSS样式以及可以直接在代码中引用的插件,这样的特性可以显著地节省时间和精力,实现快速开发。此外,这样也可以减轻对代码的维护,以便高效地组织代码。
一致性:代码简单易读对设计师而言是至关重要的,对于一起工作或被安排到同一项目中的设计师来说,也同样如此。如果代码简单易读,他们就可以很好地理解代码并进行修改和变更。由于Bootstrap使用了现成的代码片段,且这些片段在不同的浏览器间是完全兼容的,所以我们的设计过程也是高度一致的。对于构建同样的项目或者在不同的项目上实现同一类功能的新设计师来说,这也大大降低了他们的学习曲线。
灵活的栅格布局:Bootstrap拥有一个默认的栅格系统,可以随着屏幕尺寸的增加最多扩展到12列,并可以灵活地选择固定或不固定的响应式栅格。除此之外,Bootstrap的灵活性还体现在可以添加任意数量的自定义列,这可能需要逐行地使用它内置的LESS变量和mixin。通过变量和mixin,可以决定列的数量、列间距(gutter)宽度以及媒体查询点(这个点描述了让列浮动的触发门槛,并为单独的栅格列生成语义化的CSS),偏移与嵌套也可以被轻松地实现,只需几行代码即可。通过媒体查询和响应式工具类,还可以对某些内容块进行操作,让它们根据屏幕尺寸出现或隐藏。
定制化:可以使用Bootstrap内置的“定制”(Customize)选项对其进行大量的定制。在这个选项中可以选择希望使用的特性,或者去掉不需要的特性,使Bootstrap尽可能地避免臃肿。除了使用LESS文件进行CSS预处理,还可以使用自定义的CSS表覆盖Bootstrap的默认样式。通过LESS,可以使用一些变量和mixin更改几乎所有已定义的默认属性。此外,还可以使用高级的JavaScript定义一些插件(比如模态窗和警告框这样的插件)的工作方式。由于最新版的Bootstrap引入了SaaS兼容性和定制化,可以使用其创建出复杂、可交互的网站。
第三方广泛参与的活跃社区:Bootstrap有一个活跃的开发者社区,也有大量的第三方支持,不断涌现出各种各样的即兴之作。比如Bootlint,这是一个HTML的lint工具,提供给使用Vanilla Bootstrap的项目使用,该工具是最近才发布的,用来帮助人们识别出Bootstrap的错误用法;还有像AngularJS这样的JavaScript框架,与Bootstrap一结合,也就有了Mobile Angular UI这样的产物,它是专门为基于移动平台的设计而定制的;最近的另一项发展则是Bootstrap的安装使用了Node包管理器。目前,出现了Bootstrap Bay(http://bootstrapbay.com/)、Bootply(http://www.bootply.com/)以及Bootsnipp(http://bootsnipp.com/)等一些第三方网站,上面提供了各种各样的模板、编辑器、生成器,还有一些量身定做的代码片段,可以帮助人们简化使用Bootstrap进行网页设计的过程。
面向未来和开放式的开发:Bootstrap的开发是通过GitHub来实施的。我们可以跟踪到所有已经执行的修改、查看待解决的问题记录、方便地报告Bootstrap相关的错误和bug,也可以对Bootstrap的未来发展贡献自己的力量。我们还可以在官方网站上找到该项目的发展路线图,还有其他一些内容,比如向后的兼容性问题以及在不久的将来Bootstrap所要应对的挑战。Bootstrap是一个集成了HTML5和CSS3的框架,也集成了大量的工具集和实用程序,它将成为其他框架的标杆,也必将是推动未来设计与开发这一车轮转动的重要力量。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
bootstrap 组件之分页 提示框 提示工具组件
bootstrap 组件之分页 提示框 提示工具组件
54 0
Bootstrap- 响应式工具|学习笔记
快速学习 Bootstrap- 响应式工具
38 0
Bootstrap教程(15)--警告框、弹出框、工具提示框
本文目录 1. 概述 2. 警告框 2.1 普通警告框 2.2 可关闭警告框 3. 弹出框 3.1 弹出框初始化 3.2 弹出框显示 4. 工具提示框 4.1 工具提示框初始化 4.2 工具提示框显示 5. 小结
314 0
《Bootstrap开发精解:原理、技术、工具及最佳实践》一导读
本书就是这样一份内容丰富的资源,它用浅显易懂的方式,让大家掌握各种技术诀窍,进而了解Bootstrap的各种复杂细节。
1608 0
文章
问答
来源圈子
更多
+ 订阅
文章排行榜
最热
最新
相关电子书
更多
ReactNative实战优化之路
立即下载
混合应用平台构建实战
立即下载
ReactNative启动性能优化
立即下载