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


Posted in Javascript onNovember 19, 2015

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

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每天必学之前端开发框架

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

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

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

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

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

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

Javascript 相关文章推荐
在线编辑器中换行与内容自动提取
Apr 24 Javascript
JavaScript中的函数(二)
Dec 23 Javascript
使用JQuery实现智能表单验证功能
Mar 08 Javascript
AngularJS 依赖注入详解和简单实例
Jul 28 Javascript
react-native 封装选择弹出框示例(试用ios&android)
Jul 11 Javascript
vue proxyTable 接口跨域请求调试的示例
Sep 12 Javascript
解决Vue打包之后文件路径出错的问题
Mar 06 Javascript
Angular 2使用路由自定义弹出组件toast操作示例
May 10 Javascript
vue cli4下环境变量和模式示例详解
Apr 09 Javascript
js实现弹窗效果
Aug 09 Javascript
vue实现单一筛选、删除筛选条件
Oct 26 Javascript
原生js实现点击按钮复制内容到剪切板
Nov 19 Javascript
Node.js中使用socket创建私聊和公聊聊天室
Nov 19 #Javascript
Jquery实现仿京东商城省市联动菜单
Nov 19 #Javascript
javascript实现二级级联菜单的简单制作
Nov 19 #Javascript
jquery通过扩展select控件实现支持enter或focus选择的方法
Nov 19 #Javascript
javascript中checkbox使用方法实例演示
Nov 19 #Javascript
jquery实现表格隔行换色效果
Nov 19 #Javascript
javascript设计简单的秒表计时器
Sep 05 #Javascript
You might like
双料怀旧--SHARP GF515的维护、修理和简单调试
2021/03/02 无线电
印尼林东PWN黄金曼特宁咖啡豆:怎么冲世界上最醇厚的咖啡冲煮教程
2021/03/03 冲泡冲煮
PHP实现多条件查询实例代码
2010/07/17 PHP
php设计模式 Bridge (桥接模式)
2011/06/26 PHP
PHP中quotemeta()函数的用法讲解
2019/04/04 PHP
JavaScript使用cookie记录临时访客信息的方法
2015/04/07 Javascript
详解AngularJS中的表达式使用
2015/06/16 Javascript
JS实现可直接显示网页代码运行效果的HTML代码预览功能实例
2015/08/06 Javascript
jquery实现顶部向右伸缩的导航区域代码
2015/09/02 Javascript
jQuery自定义图片缩放拖拽插件imageQ实现方法(附demo源码下载)
2016/05/27 Javascript
深入理解JS中的Function.prototype.bind()方法
2016/10/11 Javascript
微信小程序模板之分页滑动栏
2017/02/10 Javascript
javascript实现圣旨卷轴展开效果(代码分享)
2017/03/23 Javascript
vue一步步实现alert功能
2017/07/05 Javascript
jQuery实现可编辑表格并生成json结果(实例代码)
2017/07/19 jQuery
微信小程序tabBar底部导航中文注解api详解
2017/08/16 Javascript
vue.js给动态绑定的radio列表做批量编辑的方法
2018/02/28 Javascript
vue脚手架搭建过程图解
2018/06/06 Javascript
JavaScript实现简易聊天对话框(加滚动条)
2020/02/10 Javascript
在vue-cli3.0 中使用预处理器 (Sass/Less/Stylus) 配置全局变量操作
2020/08/10 Javascript
vue3.0中友好使用antdv示例详解
2021/01/05 Vue.js
[01:12:08]LGD vs OG 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.24
2019/09/10 DOTA
巧用python和libnmapd,提取Nmap扫描结果
2016/08/23 Python
Pycharm导入Python包,模块的图文教程
2018/06/13 Python
利用pandas将非数值数据转换成数值的方式
2019/12/18 Python
Pycharm中import torch报错的快速解决方法
2020/03/05 Python
css3 边框、背景、文本效果的实现代码
2018/03/21 HTML / CSS
Canvas中设置width与height的问题浅析
2018/11/01 HTML / CSS
Moda Italia荷兰:意大利男士服装
2019/08/31 全球购物
简述Linux文件系统通过i节点把文件的逻辑结构和物理结构转换的工作过程
2012/04/17 面试题
餐饮业会计岗位职责
2013/12/19 职场文书
企业标语大全
2014/07/01 职场文书
部门群众路线教育实践活动对照检查材料思想汇报
2014/10/07 职场文书
神龙架导游词
2015/02/11 职场文书
毕业实习感受与体会
2015/05/26 职场文书
JS前端宏任务微任务及Event Loop使用详解
2022/07/23 Javascript