开启BootStrap学习之旅


Posted in Javascript onMay 04, 2016

本文总结了Bootstrap之所以广泛流传的11大原因。如果你还没有使用Twitter Bootstrap,建议你去了解一下。我也是最近才有所发现的,不过有更好的消息,在前两天微软发布的VS2013正式版中,也已经将BootStrap3.0的版本加入了额,连微软都看到bootStrap的强大,而且它的确很不错,所以我也不得不学习。这里有我对VS2013更新的简要介绍,有兴趣的话你可以看一眼Visual Studio 2013更新内容简介

bootstrap深受广大?潘肯舶?脑?虻降资鞘裁茨亍?/strong>

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框架,那么他们会节省更多的学习时间,并快速投入到工作中。这会为老板们带来更好的收益。

如果你觉得Bootstrap确实对你有帮助,你可以访问twitter.github.com/bootstrap/查看该框架。你也可以下载编译版本,或获取包含CSS和JavaScript文档的Bootstrap源文件。

视觉体验

开启BootStrap学习之旅

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

接下来点进http://v3.bootcss.com/bootstrap3中文文档。

开启BootStrap学习之旅

继续往下看http://expo.bootcss.com/这里许多已经应用的网站实例额。

开启BootStrap学习之旅

看到这么多实例,这么优秀的前端架构,我竟然才知道,而且有这么多的网站已经使用了,我也迫不及待了,开始我的学习之旅了。

如果大家还想深入学习,可以点击这里进行学习,再为大家附3个精彩的专题:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js cookies 常见网页木马挂马代码 24小时只加载一次
Apr 13 Javascript
JavaScript 学习技巧
Feb 17 Javascript
js构造函数、索引数组和属性的实现方式和使用
Nov 16 Javascript
JS实现进入页面时渐变背景色的方法
Feb 25 Javascript
JavaScript类继承及实例化的方法
Jul 25 Javascript
实例解析JS布尔对象的toString()方法和valueOf()方法
Oct 25 Javascript
JS设置随机出现2个数字的实例代码
Jul 19 Javascript
javascript 通过键名获取键盘的keyCode方法
Dec 31 Javascript
小程序登录态管理的方法示例
Nov 13 Javascript
javascript实现小型区块链功能
Apr 03 Javascript
js图片查看器插件用法示例
Jun 22 Javascript
nuxt.js服务端渲染中axios和proxy代理的配置操作
Nov 06 Javascript
JavaScript入门教程之引用类型
May 04 #Javascript
javascript和jquery实现用户登录验证
May 04 #Javascript
基于Bootstrap使用jQuery实现简单可编辑表格
May 04 #Javascript
纯JS代码实现气泡效果
May 04 #Javascript
DWR中各种java方法的调用
May 04 #Javascript
js实现div在页面拖动效果
May 04 #Javascript
JS功能代码集锦
May 04 #Javascript
You might like
PHP 第三节 变量介绍
2012/04/28 PHP
采用memcache在web集群中实现session的同步会话
2014/07/05 PHP
PHP中的排序函数sort、asort、rsort、krsort、ksort区别分析
2014/08/18 PHP
php+html5使用FormData对象提交表单及上传图片的方法
2015/02/11 PHP
php处理带有中文URL的方法
2016/07/11 PHP
thinkphp隐藏index.php/home并允许访问其他模块的实现方法
2016/10/13 PHP
PHP下用Swoole实现Actor并发模型的方法
2019/06/12 PHP
用javascript实现的激活输入框后隐藏初始内容
2007/06/29 Javascript
jquery中实现标签切换效果的代码
2011/03/01 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 图片库
2015/01/09 Javascript
JS实现表格数据各种搜索功能的方法
2015/03/03 Javascript
js实现从右向左缓缓浮出网页浮动层广告的方法
2015/05/09 Javascript
JavaScript中Number.MIN_VALUE属性的使用示例
2015/06/04 Javascript
JS限制条件补全问题实例分析
2016/12/16 Javascript
jQuery Ajax 实现在html页面实时显示用户登录状态
2016/12/30 Javascript
关于AngularJs数据的本地存储详解
2017/01/20 Javascript
d3.js入门教程之数据绑定详解
2017/04/28 Javascript
微信小程序-滚动消息通知的实例代码
2017/08/03 Javascript
vue-cli 打包后提交到线上出现 "Uncaught SyntaxError:Unexpected token" 报错
2018/11/06 Javascript
小程序富文本提取图片可放大缩小
2020/05/26 Javascript
jquery.validate自定义验证用法实例分析【成功提示与择要提示】
2020/06/06 jQuery
浅析微信小程序自定义日历组件及flex布局最后一行对齐问题
2020/10/29 Javascript
Vue中避免滥用this去读取data中数据
2021/03/02 Vue.js
python基于windows平台锁定键盘输入的方法
2015/03/05 Python
解决pycharm无法调用pip安装的包问题
2018/05/18 Python
Python minidom模块用法示例【DOM写入和解析XML】
2019/03/25 Python
python 实现在tkinter中动态显示label图片的方法
2019/06/13 Python
python代理工具mitmproxy使用指南
2019/07/04 Python
python实现高斯投影正反算方式
2020/01/17 Python
html5跳转小程序wx-open-launch-weapp踩坑
2020/12/02 HTML / CSS
日本运动品牌美津浓官方购物网站:MIZUNO SHOP
2016/08/21 全球购物
Melissa鞋英国官方网站:Nonnon
2019/05/01 全球购物
会话Bean的种类
2013/11/07 面试题
技能竞赛活动方案
2014/02/21 职场文书
党员个人党性分析材料
2014/12/18 职场文书
教你怎么用Python实现GIF动图的提取及合成
2021/06/15 Python