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 相关文章推荐
jQuery数据显示插件整合实现代码
Oct 24 Javascript
如何让页面加载完成后执行js
Jun 26 Javascript
jQuery 全选/反选以及单击行改变背景色实例
Jul 02 Javascript
jquery 图片缩放拖动的简单实例
Jan 08 Javascript
jquery实现类似淘宝星星评分功能实例
Sep 12 Javascript
jQuery中find()方法用法实例
Jan 07 Javascript
给angular加上动画效遇到的问题总结
Feb 17 Javascript
基于Marquee.js插件实现的跑马灯效果示例
Jan 25 Javascript
详解关于element el-button使用$attrs的一个注意要点
Nov 09 Javascript
用WebStorm进行Angularjs 2开发(环境篇:Windows 10,Angular-cli方式)
Dec 05 Javascript
Vue-cli 移动端布局和动画使用详解
Aug 10 Javascript
JS前端监控采集用户行为的N种姿势
Jul 23 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
PHP中在数据库中保存Checkbox数据(1)
2006/10/09 PHP
PHP读取PDF内容配合Xpdf的使用
2012/11/24 PHP
解析curl提交GET,POST,Cookie的简单方法
2013/06/29 PHP
在openSUSE42.1下编译安装PHP7 的方法
2015/12/24 PHP
php+mongodb判断坐标是否在指定多边形区域内的实例
2016/10/28 PHP
jquery中:input和input的区别分析
2011/07/13 Javascript
javascript实现焦点滚动图效果 具体方法
2013/06/24 Javascript
js实现幻灯片效果(基于jquery插件)
2013/11/05 Javascript
js获取数组的最后一个元素
2015/04/14 Javascript
fastclick插件导致日期(input[type="date"])控件无法被触发该如何解决
2015/11/09 Javascript
Extjs4.0 ComboBox如何实现三级联动
2016/05/11 Javascript
JS触摸与手势事件详解
2017/05/09 Javascript
import与export在node.js中的使用详解
2017/09/28 Javascript
JavaScript数据结构与算法之二叉树添加/删除节点操作示例
2019/03/01 Javascript
javascript关于“时间”的一次探索
2019/07/24 Javascript
浅谈vuex中store的命名空间
2019/11/08 Javascript
nuxt+axios实现打包后动态修改请求地址的方法
2020/04/22 Javascript
Python配置文件解析模块ConfigParser使用实例
2015/04/13 Python
Python实用技巧之列表、字典、集合中根据条件筛选数据详解
2018/07/11 Python
详解Django中类视图使用装饰器的方式
2018/08/12 Python
cProfile Python性能分析工具使用详解
2019/07/22 Python
python爬取Ajax动态加载网页过程解析
2019/09/05 Python
Python面向对象之私有属性和私有方法应用案例分析
2019/12/31 Python
python画图时设置分辨率和画布大小的实现(plt.figure())
2021/01/08 Python
css3 图片圆形显示 如何CSS将正方形图片显示为圆形图片布局
2014/10/10 HTML / CSS
英国高档时尚男装购物网站:MR PORTER
2016/08/09 全球购物
我的珠宝盒:Ma boîte à bijoux
2019/08/27 全球购物
Erwin Müller穆勒家居瑞士官网:您整个家庭的邮购公司
2019/12/28 全球购物
德国BA保镖药房中文网:Bodyguard Apotheke
2021/03/09 全球购物
建筑专业自荐信
2013/10/18 职场文书
三八活动策划方案
2014/08/17 职场文书
创建绿色社区汇报材料
2014/08/22 职场文书
法定代表人授权委托书格式
2014/10/14 职场文书
详解Python函数print用法
2021/06/18 Python
Logback 使用TurboFilter实现日志级别等内容的动态修改操作
2021/08/30 Java/Android
Spring Boot实现文件上传下载
2022/08/14 Java/Android