Bootstrap每天必学之前端开发框架

更新时间：2015年11月19日 14:48:33 作者：小平果118

Bootstrap每天必学之前端开发框架，今天这篇文章就带着大家了解认识当下最流行的前端开发框架Bootstrap，bootstrap深受大家喜爱的原因到底是什么呢，我们一探究竟。

BootStrap学习从现在开始，前端开发框架Bootstrap，可大大简化网站开发过程，从而深受广大开发者的喜欢。本文总结了Bootstrap之所以广泛流传的11大原因。如果你还没有使用Twitter Bootstrap，建议你去了解一下。小编也是最近才有所发现的，不过有更好的消息，在前两天微软发布的VS2013正式版中，也已经将BootStrap3.0的版本加入了额，连微软都看到bootStrap的强大，而且它的确很不错，所以我也不得不学习。

bootstrap深受广大屌丝喜爱的原因到底是什么呢　
1.节省时间

利用Bootstrap，你将有更多的时间用来挣钱。Bootstrap库中包含很多现成的代码片段，这些代码可为你的网站增加更多活力。Web开发者不必再花费时间、费力地编码，只需找到合适的代码，插入到合适位置即可。此外，CSS利用LESS编写，很多样式和设计都已设计完成。

2.定制化

Bootstrap很重要的一方面就是你可以将它据为己有。你可以留取框架中需要的部分，抛弃不需要的。Bootstrap整体允许你根据自己的需要，裁剪自己开发的项目。

3.设计方面的因素

网格系统

对页面进行布局时，往往需要有一个合适的网格。你不一定使用该平台的网格，但它确实能大大降低你工作的难度。默认模式下，该平台提供一个16列的网格（宽为960px）。每列宽40px，每列左右两侧具有10px的间隙，各网格最外侧均留出20px的空白。你可以根据需要改变行数与间隔大小。样式已开发完成，开发者只需要把合适的代码放入HTML合适的位置即可。

LESS

LESS在开发周期内应用很广。它是一种基于CSS之上的高级语言，其目的是使得CSS开发更灵活和更强大。你可以利用LESS的Mixins及CSS操作定制内嵌网格。Bootstrap采用了大量流行的CSS3功能，可以对所有的网站提供统一的浏览体验。

JavaScript

Bootstrap提供JavaScript库，该库超越了基本的架构与样式。通过Bootstrap，开发者可轻易地操作窗口警告框、工具提示框、滚动条、按钮等。Bootstrap最突出之处是，它可以让你不必再费神费力地写脚本。

4.一致性

Twitter当初开发该工具的最主要原因是，开发者所开发项目在不同浏览器间的不一致性。这就导致了很多前端开发与最终用户界面之间的问题。Bootstrap保证了界面在不同平台上的统一性。在IE、Chrome及Firefox中，你可以看到统一的界面。

5.保持持续更新

以jQuery 的UI为例：每一年更新一次。而Bootstrap则在不停地改进，更具规律性与持续性。Web开发者一发现新问题， Bootstrap团队便立刻着手修复它。

6.易于集成

如果你想进一步完善一个已完成的网站，Bootstrap可以帮助你。例如，如果你要统一使用自己编写的表格样式，你要做的是把你的样式复制到CSS样式文件中。Bootstrap将立即剔除它本身的样式，在这里，你需要将该文件与Twitter进行关联。集成的过程十分简单、方便、快捷。完成之后，你便可以把你的设计应用到你的核心内容上。

7.响应式

Bootstrap为响应式框架。无论你的开发工作从笔记本转移到iPad，还是从iPad转移到Mac上，你都不用为你的工作而苦恼。因为Bootstrap能以超快的速递与效率适应不同平台间的差异。

8.对未来技术具有兼容性

Bootstrap包含很多特殊元素，如HTML5和CSS3，这些元素被称为设计的未来。因为该框架考虑到设计和开发的未来，它很有潜力成为未来几年里Web开发者的参考标准。

9.竞争力

Bootstrap并不是唯一的前端开发框架，比如还有JQuery UI、HTML5 Boilerplate等等。但对于Bootstrap来说，真正的竞争对手是Zurb Foundation。Bootstrap 2新增加了一个工具集，Foundation经过好长时间才填补上。Bootstrap包含大量的第三方插件、主题、功能特性、代码等等，而Foundation并不具备这些。

10.详尽的说明文档

Bootstrap的文档相当精彩。大部分新平台往往没有合适的说明文档，而Bootstrap的说明文档大大帮助了我们的入门学习。通过文档可以找到我们需要的所有信息。

11.让老板们受益

学习Bootstrap，并不会花费你太多时间，因为它将所有的模块化方法与体系结构封装在了一起。从老板的角度来看，如果你为Web开发者提供了Bootstrap框架，那么他们会节省更多的学习时间，并快速投入到工作中，这会为老板们带来更好的收益。

视觉体验

首先看到的这是中文官网，如果细心看一下，其实它的讲解很详细。

继续往下看这里许多已经应用的网站实例额。

看到这么多实例，这么优秀的前端架构，是不是大家已经迫不及待了，接下来的学习初步打算使用Sublime Text3进行简单的练习，现在就开始我们学习Bootstrap之旅吧。

如果大家还想深入学习，可以点击这里进行学习，再为大家附两个精彩的专题：Bootstrap学习教程 Bootstrap实战教程

您可能感兴趣的文章:

Javascript实现简易导航栏
这篇文章主要为大家详细介绍了Javascript实现简易导航栏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-06-06
深入理解JavaScript系列（31）：设计模式之代理模式详解
这篇文章主要介绍了深入理解JavaScript系列（31）：设计模式之代理模式详解,代理模式使得代理对象控制具体对象的引用,代理几乎可以是任何对象：文件,资源,内存中的对象,或者是一些难以复制的东西,需要的朋友可以参考下
2015-03-03
JavaScript 大数据相加的问题
写一个函数处理大数据的相加问题，所谓的大数据是指超出了整型，长整型之类的常规数据类型表示范围的数据。实现语言不限。
2011-08-08
JS实现可视化音频效果的实例代码
这篇文章主要介绍了JS实现可视化音频效果的实例代码，代码简单易懂，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
2020-01-01
js实现动态增加文件域表单功能
这篇文章主要为大家详细介绍了js实现动态增加文件域表单功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2018-10-10
JS实现浏览器状态栏文字从右向左弹出效果代码
这篇文章主要介绍了JS实现浏览器状态栏文字从右向左弹出效果,涉及JavaScript结合时间函数遍历字符串及动态改变状态栏显示效果的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-10-10
微信小程序自定义组件之可清除的input组件
最近正在做的一个小程序项目中需要用到一个可清除的输入框控件，为了方便小编直接使用了可清除的input自定义组件，下面脚本之家小编给大家带来了微信小程序自定义组件之可清除的input组件，感兴趣的朋友一起看看吧
2018-07-07
js实现无限级树形导航列表效果代码
这篇文章主要介绍了js实现无限级树形导航列表效果代码,通过一个封装的JS类实现无限树形导航的效果,非常简单实用,需要的朋友可以参考下
2015-09-09
JavaScript空数组的every()方法实践
every()方法用于检测数组中的所有元素是否都满足指定条件, 本文主要介绍了JavaScript空数组的every()方法实践,具有一定的参考价值,感兴趣的可以了解一下
2024-03-03
获取当前按钮或者html的ID名称实例(推荐)
下面小编就为大家带来一篇获取当前按钮或者html的ID名称实例(推荐)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-06-06