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 相关文章推荐
js静态方法与实例方法分析
Jul 04 Javascript
Javascript 异步加载详解(浏览器在javascript的加载方式)
May 20 Javascript
jquery实现不同大小浏览器使用不同的css样式表的方法
Apr 02 Javascript
javascript作用域和闭包使用详解
Apr 25 Javascript
使用JavaScript为一张图片设置备选路径的方法
Jan 04 Javascript
有关JS中的0,null,undefined,[],{},'''''''',false之间的关系
Feb 14 Javascript
webpack 2.x配置reactjs基本开发环境详解
Aug 08 Javascript
微信小程序实现换肤功能
Mar 14 Javascript
JS从非数组对象转数组的方法小结
Mar 26 Javascript
详解使用create-react-app添加css modules、sasss和antd
Jul 31 Javascript
AngularJS实现的自定义过滤器简单示例
Feb 02 Javascript
vue计算属性get和set用法示例
Feb 08 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非常实用的功能
2015/09/29 PHP
thinkphp3.2.3 分页代码分享
2016/07/28 PHP
php图片合成方法(多张图片合成一张)
2017/11/25 PHP
javascript 常用方法总结
2009/06/03 Javascript
使用jQuery UI的tooltip函数修饰title属性的气泡悬浮框
2013/06/24 Javascript
js如何获取兄弟、父类等节点
2014/01/06 Javascript
js判断数据类型如判断是否为数组是否为字符串等等
2014/01/15 Javascript
IE中鼠标经过option触发mouseout的解决方法
2015/01/29 Javascript
九种原生js动画效果
2015/11/11 Javascript
如何利用AngularJS打造一款简单Web应用
2015/12/05 Javascript
js实现瀑布流的三种方式比较
2020/06/28 Javascript
jquery判断对象是否为空并遍历对象的简单实例
2016/07/26 Javascript
基于JS实现9种不同的面包屑和分布式多步骤导航效果
2017/02/21 Javascript
Node.js使用gm拼装sprite图片
2017/07/04 Javascript
基于jQuery实现手风琴菜单、层级菜单、置顶菜单、无缝滚动效果
2017/07/20 jQuery
利用node.js+mongodb如何搭建一个简单登录注册的功能详解
2017/07/30 Javascript
Node使用Sequlize连接Mysql报错:Access denied for user ‘xxx’@‘localhost’
2018/01/03 Javascript
Vue中android4.4不兼容问题的解决方法
2018/09/04 Javascript
python虚拟环境 virtualenv的简单使用
2020/01/21 Javascript
[29:10]Ti4 冒泡赛第二天 NEWBEE vs Titan 3
2014/07/15 DOTA
[49:08]OpTic vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python中(str,list,tuple)基础知识汇总
2018/02/20 Python
解决python大批量读写.doc文件的问题
2018/05/08 Python
Python调用百度根据经纬度查询地址的示例代码
2019/07/07 Python
django框架使用方法详解
2019/07/18 Python
使用Python的datetime库处理时间(RPA流程)
2019/11/24 Python
Selenium元素定位的30种方式(史上最全)
2020/05/11 Python
Python新手学习函数默认参数设置
2020/06/03 Python
浏览器实现移动端高性能css3动画(开启gpu加速)
2013/12/23 HTML / CSS
HTML5 canvas实现移动端上传头像拖拽裁剪效果
2016/03/14 HTML / CSS
北京SQL新华信咨询
2016/09/30 面试题
如何在C# winform中异步调用web services
2015/09/21 面试题
小学教师国培感言
2014/02/08 职场文书
大学生职业规划书的范本
2014/02/18 职场文书
单方离婚协议书范本2014
2014/10/28 职场文书
碧霞祠导游词
2015/02/09 职场文书