Bootstrap3.0入门学习系列:学习从现在开始

  前言

  当下最流行的前端开发框架Bootstrap,可大大简化网站开发过程,从而深受广大开发者的喜欢。本文总结了Bootstrap之所以广泛流传的 11大原因。如果你还没有使用Twitter Bootstrap,建议你去了解一下。我也是最近才有所发现的,不过有更好的消息,在前两天微软发布的VS2013正式版中,也已经将 BootStrap3.0的版本加入了额,连微软都看到bootStrap的强大,而且它的确很不错,所以我也不得不学习。

  Bootstrap深受广大屌丝喜爱的原因到底是什么呢?

  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确实对你有帮助,你可以访问twitter.github.com/bootstrap/查看该框架。你也可以下载编译版本,或获取包含CSS和JavaScript文档的Bootstrap源文件。

  视觉体验


  首先看到的这是中文官网,如果细心看一下,其实它的讲解很详细。

  接下来点进http://v3.bootcss.com/bootstrap3中文文档。


  继续往下看http://expo.bootcss.com/这里许多已经应用的网站实例额。


  看到这么多实例,这么优秀的前端架构,我竟然才知道,而且有这么多的网站已经使用了,我也迫不及待了,开始我的学习之旅了。

  总结

  看了这么多,没什么好说的了,接下来就是要学习了,初步打算使用DreamWeaver6进行简单的学习练习。

时间: 2024-12-22 03:49:41

Bootstrap3.0入门学习系列:学习从现在开始的相关文章

Bootstrap3.0入门知识

前言 当下最流行的前端开发框架Bootstrap,可大大简化网站开发过程,从而深受广大开发者的喜欢.本文总结了Bootstrap之所以广泛流传的11大原因.如果你还没有使用Twitter Bootstrap,建议你去了解一下.我也是最近才有所发现的,不过有更好的消息,在前两天微软发布的VS2013正式版中,也已经将BootStrap3.0的版本加入了额,连微软都看到bootStrap的强大,而且它的确很不错,所以我也不得不学习. Bootstrap深受广大屌丝喜爱的原因到底是什么呢? 1.节省时

Bootstrap3.0学习第一轮:入门

在上一节中Bootstrap3.0入门学习系列:学习从现在开始 ,主要是简单的介绍了一下Bootstrap.从bootcss中文网的两个版本文档说明(Bootstrap2中文文档和Bootstrap3中文文档)中,可以看出这两个版本的差别还是蛮大的. 不过从Visual Studio 2013前不久的更新中看,微软是将Bootstrap3的新版本加入到了VS当中,所以也没什么好说的了,学习Bootstrap3也没什么顾虑了. 下载BootStrap 官网的文件很详细简单,对于下载来说也有多种方式

Asp.Net MVC5入门学习系列②

原文:Asp.Net MVC5入门学习系列② 添加一个Controller(控制器)    因为我们用的是Asp.Net MVC,MVC最终还是一套框架,所以我们还是需要遵循它才能玩下去,或者说是更好的利用来便于我们的开发,要是对MVC概念还有点模糊的,可以去我以前写的第一话 Asp.Net MVC 3.0[Hello World!]里开始部分就对此做了阐述.假定所有跟我一起学的都了解MVC的这么一个概念,我们就开始下面的步骤了: 现在我们开始添加一个Controller,具体如下: 我们选择创

ExtJs2.0学习系列(2)--Ext.Panel

上一篇文章ExtJs2.0学习系列(1)--Ext.MessageBox ,受到了大家的褒贬不一,还是有的朋友提出好的建议,在此表示感谢! 今天介绍extjs中的Panel组件. //html代码 <div id="container"> </div> //js代码 var p = new Ext.Panel({ title: 'My Panel',//标题 collapsible:true,//右上角上的那个收缩按钮,设为false则不显示 renderTo:

ExtJs2.0学习系列(6)--Ext.FormPanel之第三式(ComboBox篇)

前言:说句实话,此extjs系列的文章在博客园中的热度不高,可能是学这玩意的人不多吧,但是我觉得有这么个系列的文章对于中国朋友非常有帮助!请大家支持! 上篇ExtJs2.0学习系列(5)--Ext.FormPanel之第二式中我们讨论了下fieldset和表单验证的知识,今天我们接着深入解析表单元素中ComboBox组件的使用.会涉及 到.net简单服务器数据交互,但暂不做深入讨论,以后会详细分析服务器交互相关,不过可能要等较长一段时间,呵呵! 5.服务器数据作为ComboBox的数据源实例 首

ExtJs2.0学习系列

ExtJs2.0学习系列(15)--extjs换肤 ExtJs2.0学习系列(14)--Ext.TreePanel之第三式(可增删改的树) ExtJs2.0学习系列(13)--Ext.TreePanel之第二式 ExtJs2.0学习系列(12)--Ext.TreePanel之第一式 ExtJs2.0学习系列(11)--Ext.XTemplate ExtJs2.0学习系列(10)--Ext.TabPanel之第二式 ExtJs2.0学习系列(9)--Ext.TabPanel之第一式 ExtJs2.

ExtJs2.0学习系列(12)--Ext.TreePanel之第一式

今天开始,我们就开始一起学习TreePanel了,道个歉,上篇的代码很乱阿. 我总是喜欢用最简单的例子开始,去理解最基本的使用方法,减少对i后面高级使用的干扰! TreePanel是继承自Panel,所以很多在Panel中谈到的属性这里可能会一笔带过,如有问题,请参考ExtJs2.0学习系列(2)--Ext.Panel 1.第一个静态树--最简单的树 效果图: html代码: <div id="container"> </div> js代码: Ext.onRea

ExtJs2.0学习系列(3)--Ext.Window

前面介绍了panel组件--ExtJs2.0学习系列(2)--Ext.Panel,今天将介绍window组件,它继承自panel. 先介绍个最简单例子 //html代码 <div id="win" class="x-hidden"> </div> //js代码 var w=new Ext.Window({ contentEl:"win",//主体显示的html元素,也可以写为el:"win" width

Bootstrap3.0学习第三轮:栅格系统案例

在前面的一篇文章<Bootstrap3.0学习第二轮:栅格系统原理 >当中主要学习了栅格系统的基本原理,以及通过简单案例进行对原理的实践. 那么本文的主要内容将主要分为以下几个部分:1.栅格选项;2.从堆叠到水平排列;3.移动设备和桌面;4.Responsive column resets;5.列偏移;6.嵌套列;7.列排序;8.总结. 栅格选项 通过下面的截图可以比较清楚的来查看Bootstrap的栅格系统是如何在多种不同的移动设备上面进行工作的. 从上面的截图可以看出来,Bootstrap