《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的框架,也集成了大量的工具集和实用程序,它将成为其他框架的标杆,也必将是推动未来设计与开发这一车轮转动的重要力量。

相关文章
|
6月前
|
存储 前端开发 JavaScript
|
6月前
|
前端开发 JavaScript
Javascript知识【BootStrap技术实现商品页面】(下)
Javascript知识【BootStrap技术实现商品页面】
|
前端开发 开发者 容器
Bootstrap- 响应式工具|学习笔记
快速学习 Bootstrap- 响应式工具
116 0
Bootstrap- 响应式工具|学习笔记
|
10月前
|
前端开发 JavaScript 开发者
前端封装库/工具库的UI框架之Bootstrap
随着互联网时代的到来,对于Web应用的UI设计和开发变得越来越重要。而为了更高效地进行UI开发,前端封装库/工具库的出现成为了一个非常好的解决方案。其中一个颇受欢迎的UI框架就是Bootstrap。
121 0
|
JSON 前端开发 JavaScript
地图集web项目_技术学习(二)_bootstrap分页的例子
地图集web项目_技术学习(二)_bootstrap分页的例子
110 0
|
前端开发
bootstrap 原理以及使用方式
bootstrap 原理以及使用方式
|
前端开发
bootstrap 组件之分页 提示框 提示工具组件
bootstrap 组件之分页 提示框 提示工具组件
|
前端开发 JavaScript
bootstrap简介 原理
字体的大小要使用rem, em作为单位, rem是根节点字体的相对大小,是一个相对单位,不是一个绝对单位, 根节点的大小需要使用根据的用户的屏幕尺寸来动态计算font-size的大小
|
JavaScript 前端开发 NoSQL
基于springboot+mysql+redis+bootstrap的精美个人技术博客网站
基于springboot+mysql+redis+bootstrap的精美个人技术博客网站
128 0
基于springboot+mysql+redis+bootstrap的精美个人技术博客网站
|
前端开发 JavaScript 容器
Bootstrap响应式框架,组件化开发
Bootstrap响应式框架,组件化开发
140 0