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 相关文章推荐
JavaScript中的Screen屏幕对象
Jan 16 Javascript
ext checkboxgroup 回填数据解决
Aug 21 Javascript
jquery插件开发之实现jquery手风琴功能分享
Mar 10 Javascript
常用的jquery模板插件——jQuery Boilerplate介绍
Sep 23 Javascript
JavaScript实现通过select标签跳转网页的方法
Sep 29 Javascript
js-FCC算法-No repeats please字符串的全排列(详解)
May 02 Javascript
jQuery.form.js的使用详解
Jun 14 jQuery
浅谈Vue网络请求之interceptors实际应用
Feb 28 Javascript
vue判断input输入内容全是空格的方法
Mar 02 Javascript
详解如何在Vue项目中导出Excel
Apr 19 Javascript
原生js实现五子棋游戏
May 28 Javascript
vue中解决微信html5原生ios虚拟键返回不刷新问题
Oct 20 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
Netflix将与CLAMP、乙一以及冲方丁等6名知名制作人合伙展开原创动画计划!
2020/03/06 日漫
跟我学小偷程序之成功偷取首页(第三天)
2006/10/09 PHP
PHP 文件上传源码分析(RFC1867)
2009/10/30 PHP
php代码书写习惯优化小结
2013/06/20 PHP
解决php使用异步调用获取数据时出现(错误c00ce56e导致此项操作无法完成)
2013/07/03 PHP
PHP读取并输出XML文件数据的简单实现方法
2017/12/22 PHP
js资料prototype 属性
2007/03/13 Javascript
JS获取当前网址、主机地址项目根路径
2013/11/19 Javascript
jquery遍历函数siblings()用法实例
2015/12/24 Javascript
jquery模拟多级复选框效果的简单实例
2016/06/08 Javascript
Javascript之深入浅出prototype
2017/02/06 Javascript
解决easyui日期时间框ie的兼容的问题
2018/03/01 Javascript
jQuery中$原理实例分析
2018/08/13 jQuery
JavaScript之解构赋值的理解
2019/01/30 Javascript
webpack结合express实现自动刷新的方法
2019/05/07 Javascript
[40:16]TFT vs Mski Supermajor小组赛C组 BO3 第二场 6.3
2018/06/04 DOTA
Python设计模式之命令模式简单示例
2018/01/10 Python
通过Python 接口使用OpenCV的方法
2018/04/02 Python
Python3实现取图片中特定的像素替换指定的颜色示例
2019/01/24 Python
Python面向对象程序设计之类的定义与继承简单示例
2019/03/18 Python
Python中字符串String的基本内置函数与过滤字符模块函数的基本用法
2019/05/27 Python
python的pytest框架之命令行参数详解(下)
2019/06/27 Python
python连接PostgreSQL过程解析
2020/02/09 Python
python右对齐的实例方法
2020/07/05 Python
瑞典手机壳品牌:Richmond & Finch
2018/04/28 全球购物
“三支一扶”支教教师思想汇报
2014/09/13 职场文书
大学生青年志愿者活动总结
2015/05/06 职场文书
幼儿园园长六一致辞
2015/07/31 职场文书
《风筝》教学反思
2016/02/23 职场文书
《哪吒之魔童降世》观后感:世上哪有随随便便的成功
2019/11/08 职场文书
用python开发一款操作MySQL的小工具
2021/05/12 Python
Python之基础函数案例详解
2021/08/30 Python
python脚本框架webpy模板控制结构
2021/11/20 Python
vue项目支付功能代码详解
2022/02/18 Vue.js
Python+Selenium实现抖音、快手、B站、小红书、微视、百度好看视频、西瓜视频、微信视频号、搜狐视频、一点号、大风号、趣头条等短视频自动发布
2022/04/13 Python
什么是css原子化,有什么用?
2022/04/24 HTML / CSS