bootstrap是什么_动力节点Java学院整理


Posted in Javascript onJuly 14, 2017

Bootstrap 是由两个 twitter 员工开发并开源的前端框架,目前已经到了 2.0.4 的版本,在 Github 上面有 32517个 watch,和 6608个 fork。非常火爆,而如此火爆自然有它的道理,在我们团队的所有项目中正全面推行使用 Bootstrap,我想根据自己的实际使用体验来说明一下为什么要用 Bootsrap。

twitter 出品

首先,Bootstrap 出自 twitter,大厂出品,并且开源,自然久经考验,减少了测试的工作量。站在巨人的肩膀上,不重复造轮子。

同时,Bootstrap 的代码有着非常良好的代码规范,从中也可以学习到很多,在 Bootstrap 的基础之上创建项目,日后代码的维护也变得异常简单清晰。

基于 Less、丰富的 Mixin

如果你不知道 Sass 或者 Less 这样的 CSS 预处理技术,我只能说你实在太落伍了,建议你先去了解之。

Bootstrap 的一大优势就是它是基于 Less 打造的,并且也有 Sass版本。正因为如此,它一推出就包含了一个非常实用的 Mixin 库任你调用。

举个很简单的例子,当你平时要用到一些 css3 属性的时候,你要写不同的浏览器写不同的 -prefix-,比如圆角 border-radius :

-webkit-border-radius: 10px;
-moz-border-radius:10px;
-border-radius:10px;

但是通过 Bootstrap 给你预设好的 mixin,你直接写成这样就可以了:

@include border-radius (10px);

是不是轻松愉快?基本常用的 CSS3 mixin 都帮你整理好了,你都直接调用就可以了,在此不一一举例。 Bootstrap 是目前最好的基于 Less(Sass) 的前端框架,丰富而实用的 Mixin 应该是其最好的地方。

可以 Responsive 的栅格系统

Bootstrap 的 栅格 (Grid) 系统也很先进,整个 Grid 系统是可以 Responsive 的!

Bootstrap 已经帮你搭好了实现 Responsive Design 的基础框架,并且非常容易修改。如果你是一个新手,Bootstrap 可以帮助你在非常短的时间内上手 Responsive Design。

丰富的组件

Bootstrap 的HTML组件 和 Js组件 非常丰富,并且代码简洁,非常易于修改,你完全可以在其基础之上修改成自己想要的任何样子。这是工作效率的极大提升。

插件

另外、由于 Bootstrap 的火爆,又出现了不少围绕 Bootstrap 而开发的插件。其中最实用的莫过于 Font Awesome 了。它是一套 icon font,提供了丰富的 icon 给你选择,新的 2.0 版又根据网友的意见增加了70个新的 icon。

在现在一股有 Apple 带领的 Retina 潮流下,对图片的视网膜屏下的解决方案已经变得越来越有必要了,而在 icon 这个东西上,icon font 是完美的解决方案,不用担心分辨率的问题,因为它实际上是字体。

以上

这些就是为什么要用 Bootstrap 的原因,目前市面上没有任何其他框架可以和它相媲美,但是它就虽然是一匹好马,你还是需要花费一些时间去学习它、适应它,它在日后给你带来的便利性是无可比拟的,你会后悔自己为什么没有早点接触它。

一些题外话

我不喜欢用框架,我喜欢原生的写法

这是我在给别人推荐 Bootstrap 的时候最常听到的话,我只能说,Bootstrap 并不能帮你完成所有事情,它只是一个的框架,在这个框架上面你依旧可以任意的发挥,并且发挥得更好,但是前提是你要驾驭得了它。

如果你不够熟悉它,你确实是有时候会被它有所牵绊,但是你熟悉了之后发现了其实它没有对你进行任何限制,这需要一个过程。

是给无设计师的团队或者程序员用的

对此我真的是无力吐槽,Bootstrap 的开发者就在他的博客上抱怨过,为什么出来那么一堆完全照搬 Bootstrap 样式的网站。
记住、完全用 Bootstrap 的样式只会让人心生厌烦。

Javascript 相关文章推荐
静态图片的十一种滤镜效果--不支持Ie7及非IE浏览器。
Mar 06 Javascript
JavaScript 学习笔记(十二) dom
Jan 21 Javascript
关于jQuery参考实例2.0 用jQuery选择元素
Apr 07 Javascript
JavaScript 对任意元素,自定义右键菜单的实现方法
May 08 Javascript
用jQuery获取IE9下拉框默认值问题探讨
Jul 22 Javascript
Javascript window对象详解
Nov 12 Javascript
DOM基础教程之使用DOM + Css
Jan 20 Javascript
详解使用JS如何制作简单的ASCII图与单极图
Mar 31 Javascript
JavaScript事件对象event用法分析
Jul 27 Javascript
Egg.js 中 AJax 上传文件获取参数的方法
Oct 10 Javascript
laypage+SpringMVC实现后端分页
Jul 27 Javascript
微信小程序实现简单的select下拉框
Nov 23 Javascript
bootstrap精简教程_动力节点Java学院整理
Jul 14 #Javascript
简单实现js轮播图效果
Jul 14 #Javascript
JS获取填报扩展单元格控件的值的解决办法
Jul 14 #Javascript
Vue学习笔记进阶篇之过渡状态详解
Jul 14 #Javascript
微信小程序开发之animation循环动画实现的让云朵飘效果
Jul 14 #Javascript
使用OPENLAYERS3实现点选的方法
Sep 24 #Javascript
vue component组件使用方法详解
Jul 14 #Javascript
You might like
多人战的战术与战略
2020/03/04 星际争霸
PHP使用strstr()函数获取指定字符串后所有字符的方法
2016/01/07 PHP
值得分享的php+ajax实时聊天室
2016/07/20 PHP
javascript或asp实现的判断身份证号码是否正确两种验证方法
2009/11/26 Javascript
js中数组(Array)的排序(sort)注意事项说明
2014/01/24 Javascript
jquery ajax 局部无刷新更新数据的实现案例
2014/02/08 Javascript
限制上传文件大小和格式的jQuery插件实例
2015/01/24 Javascript
简介AngularJS的视图功能应用
2015/06/17 Javascript
使用CamanJS在Web页面上处理图像的技巧
2015/08/18 Javascript
JavaScript职责链模式概述
2016/09/17 Javascript
jQuery Validate验证表单时多个name相同的元素只验证第一个的解决方法
2016/12/24 Javascript
vue2.0实现倒计时的插件(时间戳 刷新 跳转 都不影响)
2017/03/30 Javascript
nodejs接入阿里大鱼短信验证码的方法
2017/07/10 NodeJs
vue配置多页面的实现方法
2018/05/22 Javascript
vue弹出框组件封装实例代码
2019/10/31 Javascript
[11:01]2014DOTA2西雅图邀请赛 冷冷带你探秘威斯汀
2014/07/08 DOTA
[01:00:52]2018DOTA2亚洲邀请赛 4.4 淘汰赛 EG vs LGD 第一场
2018/04/05 DOTA
Python随机生成带特殊字符的密码
2016/03/02 Python
python解析基于xml格式的日志文件
2017/02/25 Python
详解Python读取配置文件模块ConfigParser
2017/05/11 Python
python实现决策树C4.5算法详解(在ID3基础上改进)
2017/05/31 Python
Python遍历文件夹 处理json文件的方法
2019/01/22 Python
django admin后台添加导出excel功能示例代码
2019/05/15 Python
Python 余弦相似度与皮尔逊相关系数 计算实例
2019/12/23 Python
新加坡航空官方网站:Singapore Airlines
2016/10/13 全球购物
德国50岁以上交友网站:Lebensfreunde
2020/03/18 全球购物
英国Lookfantastic中文网站:护肤品美妆美发购物(英国直邮)
2020/04/27 全球购物
合同协议书格式
2014/04/18 职场文书
学雷锋宣传标语
2014/06/25 职场文书
学校领导班子四风对照检查材料
2014/09/27 职场文书
售票员岗位职责
2015/02/15 职场文书
企业员工辞职信范文
2015/05/12 职场文书
导盲犬小Q观后感
2015/06/11 职场文书
领导欢送会主持词
2015/07/06 职场文书
2016年“11.11”光棍节活动总结
2016/04/05 职场文书
python中的getter与setter你了解吗
2022/03/24 Python