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 学习笔记 选择器之四
Jul 23 Javascript
jquery 鼠标滑动显示详情应用示例
Jan 24 Javascript
网页禁用右键菜单和鼠标拖动选择方法小结
Feb 25 Javascript
js获取本机操作系统类型的两种方法
Dec 19 Javascript
jQuery中事件与动画的总结分享
May 24 Javascript
JS/jquery实现一个网页内同时调用多个倒计时的方法
Apr 27 jQuery
webpack构建vue项目的详细教程(配置篇)
Jul 17 Javascript
React之PureComponent的使用作用
Jul 10 Javascript
微信小程序中使用ECharts 异步加载数据实现图表功能
Jul 13 Javascript
JS实现从对象获取对象中单个键值的方法示例
Jun 05 Javascript
JS+CSS实现随机点名(实例代码)
Nov 04 Javascript
node.js中stream流中可读流和可写流的实现与使用方法实例分析
Feb 13 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
phpmyadmin操作流程
2006/10/09 PHP
推荐一款PHP+jQuery制作的列表分页的功能模块
2014/10/14 PHP
php通过session防url攻击方法
2014/12/10 PHP
详解WordPress中创建和添加过滤器的相关PHP函数
2015/12/29 PHP
TP5框架实现签到功能的方法分析
2020/04/05 PHP
JavaScript 对象成员的可见性说明
2009/10/16 Javascript
EasyUi tabs的高度与宽度根据IE窗口的变化自适应代码
2010/10/26 Javascript
利用JS自动打开页面上链接的实现代码
2011/09/25 Javascript
百度UEditor编辑器如何关闭抓取远程图片功能
2015/03/03 Javascript
JavaScript实现在标题栏上显示当前日期的方法
2015/03/19 Javascript
JS实现漂亮的淡蓝色滑动门效果代码
2015/09/23 Javascript
jQuery简单动画变换效果实例分析
2016/07/04 Javascript
AngularJS实现按钮提示与点击变色效果
2016/09/07 Javascript
使用Bootstrap打造特色进度条效果
2017/05/02 Javascript
bootstrap table支持高度百分比的实例代码
2018/02/28 Javascript
微信小程序数据分析之自定义分析的实现
2018/08/17 Javascript
vue如何使用async、await实现同步请求
2019/12/09 Javascript
Linux下将Python的Django项目部署到Apache服务器
2015/12/24 Python
python字符串中的单双引
2017/02/16 Python
pygame游戏之旅 添加键盘按键的方法
2018/11/20 Python
Python编程在flask中模拟进行Restful的CRUD操作
2018/12/28 Python
python 统计文件中的字符串数目示例
2019/12/24 Python
纯css3(无图片/js)制作的几个社交媒体网站的图标
2013/03/21 HTML / CSS
纯CSS3实现自定义Tooltip边框涂鸦风格的教程
2014/11/05 HTML / CSS
军校本科大学生自我评价
2014/01/14 职场文书
预备党员表决心书
2014/03/11 职场文书
银行竞聘演讲稿范文
2014/04/23 职场文书
竞争上岗演讲稿范文
2014/05/12 职场文书
政府四风问题整改措施
2014/10/04 职场文书
工作服管理制度范本
2015/08/06 职场文书
2019七夕节祝福语36句,快来收藏吧
2019/08/06 职场文书
MySQL 隔离数据列和前缀索引的使用总结
2021/05/14 MySQL
Python之基础函数案例详解
2021/08/30 Python
MySQL日期时间函数知识汇总
2022/03/17 MySQL
vue如何清除浏览器历史栈
2022/05/25 Vue.js
让JavaScript代码更加精简的方法技巧
2022/06/01 Javascript