[Bootstrap](http://hovertree.com/menu/bootstrap/) 是由两个 twitter 员工开发并开源的前端框架,非常火爆,而如此火爆自然有它的道理,在我们团队的所有项目中正全面推行使用 Bootstrap,我想根据自己的实际使用体验来说明一下为什么要用 Bootsrap。

首先,Bootstrap 出自 twitter,大厂出品,并且开源,自然久经考验,减少了测试的工作量。站在巨人的肩膀上,不重复造轮子。 
   
  同时,Bootstrap 的代码有着非常良好的代码规范,从中也可以学习到很多,在 Bootstrap 的基础之上创建项目,日后代码的维护也变得异常简单清晰。

Bootstrap 的一大优势就是它是基于 Less 打造的,并且也有 [Sass版本]。正因为如此,它一推出就包含了一个非常实用的 Mixin 库任你调用。 
   
  举个很简单的例子,当你平时要用到一些 css3 属性的时候,你要写不同的浏览器写不同的 -prefix-,比如圆角 border-radius : 
  

  1. -webkit-border-radius: 10px;
  2.    -moz-border-radius:10px;
  3.    -border-radius:10px;
  4. /* 何问起 hovertree.com */

  

  但是通过 Bootstrap 给你预设好的 mixin,你直接写成这样就可以了: 
   
   @include border-radius (10px); 
   
  是不是轻松愉快?基本常用的 CSS3 mixin 都帮你整理好了,你都直接调用就可以了,在此不一一举例。 Bootstrap 是目前最好的基于 Less(Sass) 的前端框架,丰富而实用的 Mixin 应该是其最好的地方。 Bootstrap 已经帮你搭好了实现 Responsive Design 的基础框架,并且非常容易修改。如果你是一个新手,Bootstrap 可以帮助你在非常短的时间内上手 Responsive Design。另外、由于 Bootstrap 的火爆,又出现了不少围绕 Bootstrap 而开发的插件。其中最实用的莫过于 [Font Awesome](http://fortawesome.github.com/Font-Awesome/) 了。它是一套 icon font,提供了丰富的 icon 给你选择,新的 2.0 版又根据网友的意见增加了70个新的 icon。

Bootstrap 的组件 非常丰富,并且代码简洁,非常易于修改,你完全可以在其基础之上修改成自己想要的任何样子。这是工作效率的极大提升。在现在一股有 Apple 带领的 Retina 潮流下,对图片的视网膜屏下的解决方案已经变得越来越有必要了,而在 icon 这个东西上,icon font 是完美的解决方案,不用担心分辨率的问题,因为它实际上是字体。

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

特效:http://www.cnblogs.com/roucheng/p/texiao.html

为什么要用 Bootstrap的更多相关文章

  1. 旺财速啃H5框架之Bootstrap(五)

    在上一篇<<旺财速啃H5框架之Bootstrap(四)>>做了基本的框架,<<旺财速啃H5框架之Bootstrap(二)>>篇里也大体认识了bootst ...

  2. 旺财速啃H5框架之Bootstrap(四)

    上一篇<<旺财速啃H5框架之Bootstrap(三)>>已经把导航做了,接下来搭建内容框架.... 对于不规整的网页,要做成自适应就有点玩大了.... 例如下面这种版式的页面. ...

  3. bootstrap + requireJS+ director+ knockout + web API = 一个时髦的单页程序

    也许单页程序(Single Page Application)并不是什么时髦的玩意,像Gmail在很早之前就已经在使用这种模式.通常的说法是它通过避免页面刷新大大提高了网站的响应性,像操作桌面应用程序 ...

  4. 参考bootstrap中的popover.js的css画消息弹框

    前段时间小颖的大学同学给小颖发了一张截图,图片类似下面这张图: 小颖当时大概的给她说了下,其实小颖也不知道上面那个三角形怎么画嘻嘻,给她说了DOM结构,具体的css让她自己百度,今天小颖自己参考boo ...

  5. Bootstrap 模态框(Modal)插件

    页面效果: html+js: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

  6. 利用bootstrap的carousel.js实现轮播图动画

    前期准备: 1.jquery.js. 2.bootstrap的carousel.js. 3.bootstrap.css. 如果大家不知道在哪下载,可以联系小颖,小颖把这些js和css可以发送给你. 一 ...

  7. 旺财速啃H5框架之Bootstrap(三)

    好多天没有写了,继续走起 在上一篇<<旺财速啃H5框架之Bootstrap(二)>>中已经把CSS引入到页面中,接下来开始写页面. 首先有些问题要先处理了,问什么你要学boot ...

  8. 旺财速啃H5框架之Bootstrap(二)

    突然感觉不知道写啥子,脑子里面没水了,可能是因为今晚要出去浪,哈哈~~~提前提醒大家平安夜要回家哦,圣诞节生00000000000这么多蛋....继续 上一篇的已经把bootstrap了解个大概了,接 ...

  9. 旺财速啃H5框架之Bootstrap(一)

    接下来的时间里,我将和大家一起对当前非常流行的前端框架Bootstrap进行速度的学习,以案例的形式.对刚开始想学习Bootstrap的同学而找不着边的就很有帮助了.如果你想详细的学习Bootstra ...

  10. [BootStrap] 富编辑器,基于wysihtml5

    在我的周围,已经有很多人在使用BootStrap,但对于任何一个带留言.评论.提问.文章编辑功的网站,编辑器永远是重中之重,显然,早期的编辑器完全没考虑过BootStrap的出现,或皮肤跟网站不匹配, ...

随机推荐

  1. ubuntu 安装 axel

    Axel 通过打开多个 HTTP/FTP 连接来将一个文件进行分段下载,从而达到加速下载的目的.对于下载大文件,该工具将特别有用. 安装:sudo apt-get install axel 一般使用: ...

  2. 自制Unity小游戏TankHero-2D(5)声音+爆炸+场景切换+武器弹药

    自制Unity小游戏TankHero-2D(5)声音+爆炸+场景切换+武器弹药 我在做这样一个坦克游戏,是仿照(http://game.kid.qq.com/a/20140221/028931.htm ...

  3. [译+改]最长回文子串(Longest Palindromic Substring) Part II

    [译+改]最长回文子串(Longest Palindromic Substring) Part II 原文链接在http://leetcode.com/2011/11/longest-palindro ...

  4. Lucene系列-分析器

    分析器介绍 搜索的基础是对文本信息进行分析,Lucene的分析工具在org.apache.lucene.analysis包中.分析器负责对文本进行分词.语言处理得到词条,建索引和搜索的时候都需要用到分 ...

  5. VUE 意淫笔记

    caihg Vue.js 递归组件实现树形菜单 最近看了 Vue.js 的递归组件,实现了一个最基本的树形菜单. 项目结构: main.js 作为入口,很简单: 1 2 3 4 5 6 7 8 9 i ...

  6. Flume日志采集系统——初体验(Logstash对比版)

    这两天看了一下Flume的开发文档,并且体验了下Flume的使用. 本文就从如下的几个方面讲述下我的使用心得: 初体验--与Logstash的对比 安装部署 启动教程 参数与实例分析 Flume初体验 ...

  7. jquery.validate 基础

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. 用Chrome插件对自动化测试TestWriter进行录制

    1.打开Chrome浏览器,在浏览地址中输入: chrome://extensions/,并勾选开发者模式.如图: 2.点击按钮[加载已解压的扩展程序-].如图: 3.选择Testwriter客户端下 ...

  9. 初次使用IDEA的相关技巧

    前言:由于初次使用IDEA,所以很多配置都不是非常熟悉,经过一下午慢慢熟悉和同事的帮助,终于有所斩获,现在我把这个总结写出来,希望能够帮助初次使用的java工程师. 1:下载和安装 下载地址:http ...

  10. java中泛型上限,下限应用

    v 一.程序中无形之中用到的泛型 import java.util.*; class Person implements Comparable<Person>{ String name; ...