来自：Learning hard - 博客园
链接：/zhili/p/BoostrapQuickStart.html
已获转载授权
很久没有写过博客了，但是最近这段时间都没有闲着，接触了很多方面。比如一些前端框架和组件、还有移动开发React-Native、以及对.NET框架设计的一些重新认识。这些内容在接下来的时间都会一一和大家分享的。我为什么放置了这么久又重新写博客呢？因为在这段时间里面，我虽然接触了这么多东西，自己也没有停下来学习，但是没有写博文总结的话，总感觉这些东西还不是我的。心里总感觉空荡荡的。今天先介绍了一个前端“样式”框架——Bootstrap。
二、Bootstrap 整体架构
为什么在引言我称为Bootstrap为一个前端样式框架呢？可能这样的称谓并不是很准确，但是我觉得这样的称呼可以让一些初学者可以更快明白和明白Bootstrap到底是一个什么东西。我总结东西不喜欢用一些高大上的词语来加深某个知识的理解，反而更喜欢用一些大家通俗易懂的词语来描述知识点。虽然这样的描述方式可能会有点不准确，但是我觉得则没什么大不了的，因为这样的描述确实可以让初学者更快理解这个知识。因为我在学习知识点的时候就有这样的困惑，有些知识官方文档都说的高大上，其实说白了也就是以前的一些东西，然后进行封装使得开发更加简单和快速罢了。所以这里我分享Bootstrap框架也是这样的。并且内容组织方面也是为了让初学者更好地掌握。因为我刚开始接触的时候也是一个初学者。我自认为这样的组织方式可以更快更好地理解知识。
对于Bootstrap，首先要介绍而是它的整体架构——它到底由什么组成的。相信大家看下面一张图就可以很快明白Bootstrap中具体由哪些东西组成的。
从上面的图，可以清楚看到，Bootstrap主要有下面几部分组成：
12栅格系统——就是将屏幕平分12份（列）。使用行(row)来组织元素（每一行都包括12个列），然后将内容放在列内。通过col-md-offset-*来控制列偏移。
基础布局组件——Bootstrap提供了多种基础布局组件。如排版、代码、表格、按钮、表单等。
Jquery——Bootstrap所有的JavaScript插件都依赖于Jquery的。如果要使用这些JS插件，就必须引用Jquery库。这也是为什么我们在除了要引用Bootstrap的JS文件和CSS文件外，还需要引用Jquery库的原因，两者是依赖关系。
CSS组件——Bootstrap为我们预实现了很多CSS组件。如下拉框、按钮组、导航等。也就是说Bootstrap内容帮我们定义好了很多CSS样式，你可以将这些样式直接应用到之前的下拉框等元素里。
JavaScript插件——Bootstrap也为我们实现了一些JS插件，我们可以用其提供的插件要完成一些常用功能，而不需要我们再重新写JS代码来实现像提示框，模态窗口这样的效果了。
响应式设计——这就是一个设计理念。响应式的意思就是它会根据屏幕尺寸来自动调整页面，使得前端页面在不同尺寸的屏幕上都可以表现很好。
Bootstrap就是由上面几部分组成的。上面已经都每个组成部分做了一个简单的介绍，接下来的内容无非是通过一些实例来对每个组成部分进行一个详细的介绍罢了。
三、12栅格系统
Bootstrap定义12栅格系统，就是为了更好的布局。每个前端框架都首先要定义好的就是布局系统。在Bootstrap里面，就是利用行和列来创建页面布局的。其布局有几个原则：
行（row）必须包含在.container(固定宽度)或.container-fluid(100%宽度)中
每行都包含12列
将内容放置在每列中　
在bootstrap的栅格系统中，根据宽度将浏览器分为4种。其值分别是：自动（100%）、750px、970px、 1170px。
对应的样式为超小（xs）、小型（sm）、中型屏幕 （md）、大型 （lg）
其本就是通过媒体查询定义最小宽度实现。所以，Bootstrap做出来的网页向大兼容，向小不兼容！
在Bootstrap框架内，已预先定义好了屏幕大小的分界值，其分界值得定义就是通过媒体查询来定义的。其定义方式如下：
/* 超小屏幕（手机，小于 768px） */
/* 没有任何媒体查询相关的代码，因为这在 Bootstrap 中是默认的（还记得 Bootstrap 是移动设备优先的吗？） */
/* 小屏幕（平板，大于等于 768px） */
@media (min-width: @screen-sm-min) { ... }
/* 中等屏幕（桌面显示器，大于等于 992px） */
@media (min-width: @screen-md-min) { ... }
/* 大屏幕（大桌面显示器，大于等于 1200px） */
@media (min-width: @screen-lg-min) { ... }
其实Win8应用开发中也应用了媒体查询来实现可响应式的应用。所以大家以后如果听到了可响应系统不要觉得很高深哦，其实就是框架为我们定义了媒体查询，如果超过了媒体查询中定义的最小宽度对应某个类型屏幕，通过这样的方式，就可以在不同屏幕之间收缩元素大小来适应屏幕。然而Bootstrap提出的概念是移动设备优先的，所以Bootstrap设计出来的页面只能向大兼容，向小不兼容。
四、基础布局组件
基础布局组件就是Bootstrap框架内为一些基础布局的标签定义了一些统一的样式。如Table、按钮、表单等。下面让我们看一个Table的例子：
&!DOCTYPE html&
&html lang=&zh-CN&&
& & &meta charset=&utf-8&&
& & &meta http-equiv=&X-UA-Compatible& content=&IE=edge&&
& & &meta name=&viewport& content=&width=device-width, initial-scale=1&&
& & &!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --&
& & &title&Bootstrap 101 Template&/title&
& & &!--因为这里没有使用到Bootstrap的JS插件，所以就没有引用Jquery组件--&
& & &!-- Bootstrap --&
& & &link rel=&stylesheet& href=&/bootstrap/3.3.4/css/bootstrap.min.css&&
& &h3&默认样式的Table&/h3&
& & &table class=&table&&
& & & &caption&表标题.&/caption&
& & & &!-- 表头，组合为t+head, t代表table的意思--&
& & & &thead&
& & & & &tr&
& & & & & &th&ID&/th&
& & & & & &th&First Name&/th&
& & & & & &th&Last Name&/th&
& & & & &/tr&
& & & &/thead&
& & & &tbody&
& & & & &tr&
& & & & & &th scope=&row&&1&/th&
& & & & & &td&Tommy&/td&
& & & & & &td&Li&/td&
& & & & &/tr&
& & & & &tr&
& & & & & &th scope=&row&&2&/th&
& & & & & &td&Bob&/td&
& & & & & &td&san&/td&
& & & & &/tr&
& & & & &tr&
& & & & & &th scope=&row&&3&/th&
& & & & & &td&Sam&/td&
& & & & & &td&wang&/td&
& & & & &/tr&
& & & &/tbody&
& & &/table&
& & &h3&带边框的表格&/h3&
& & &table class=&table-bordered&&
& & & &caption&表标题.&/caption&
& & & &!-- 表头，组合为t+head, t代表table的意思--&
& & & &thead&
& & & & &tr&
& & & & & &th&ID&/th&
& & & & & &th&First Name&/th&
& & & & & &th&Last Name&/th&
& & & & &/tr&
& & & &/thead&
& & & &tbody&
& & & & &tr&
& & & & & &th scope=&row&&1&/th&
& & & & & &td&Tommy&/td&
& & & & & &td&Li&/td&
& & & & &/tr&
& & & & &tr&
& & & & & &th scope=&row&&2&/th&
& & & & & &td&Bob&/td&
& & & & & &td&san&/td&
& & & & &/tr&
& & & & &tr&
& & & & & &th scope=&row&&3&/th&
& & & & & &td&Sam&/td&
& & & & & &td&wang&/td&
& & & & &/tr&
& & & &/tbody&
& & &/table&
& & &!-- 更多表格样式参考： /css/#tables--&
& &&!-- jQuery (necessary for Bootstrap's JavaScript plugins) --&
& & &script src=&/jquery/1.11.2/jquery.min.js&&&/script&
& & &!-- Include all compiled plugins (below), or include individual files as needed --&
& & &script src=&/bootstrap/3.3.4/js/bootstrap.min.js&&&/script&
具体的运行效果：在此运行。
对于Button和表单的例子代码这里就不贴了，大家可以通过下面的链接查看运行效果和查看源码。也可以通过最后的下载文件来下载本专题的所有源码。
Button例子的运行效果：在此运行
表单例子的运行效果：在此运行
五、CSS组件
CSS组件和基础布局组件差不多，也就是Bootstrap为一些标签定义了一些已有的样式，这些样式运行的效果都非常美观，这样每个公司或开发人员都不需要再去写一篇样式，从而加快开发效率。这里直接看一个导航的例子吧。说白这个东西，你用多了自然就熟了。
&!DOCTYPE html&
&html lang=&zh-CN&&
& & &meta charset=&utf-8&&
& & &meta http-equiv=&X-UA-Compatible& content=&IE=edge&&
& & &meta name=&viewport& content=&width=device-width, initial-scale=1&&
& & &!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --&
& & &title&Bootstrap 101 Template&/title&
& & &!-- Bootstrap --&
& & &link rel=&stylesheet& href=&/bootstrap/3.3.4/css/bootstrap.min.css&&
& &h3&导航条&/h3&
& &nav class=&navbar navbar-default navbar-inverse&&
& &div class=&container-fluid&&
& & &!-- Brand and toggle get grouped for better mobile display --&
& & &div class=&navbar-header&&
& & & &button type=&button& class=&navbar-toggle collapsed& data-toggle=&collapse& data-target=&#bs-example-navbar-collapse-1& aria-expanded=&false&&
& & & & &span class=&sr-only&&Toggle navigation&/span&
& & & & &span class=&icon-bar&&&/span&
& & & & &span class=&icon-bar&&&/span&
& & & & &span class=&icon-bar&&&/span&
& & & &/button&
& & & &a class=&navbar-brand& href=&#&&Home&/a&
& & &/div&
& & &!-- Collect the nav links, forms, and other content for toggling --&
& & &div class=&collapse navbar-collapse& id=&bs-example-navbar-collapse-1&&
& & & &ul class=&nav navbar-nav&&
& & & & &li class=&active&&&a href=&#&&Home &span class=&sr-only&&(current)&/span&&/a&&/li&
& & & & &li&&a href=&#&&About&/a&&/li&
& & & &/ul&
& & & &ul class=&nav navbar-nav navbar-right&&
& & & & &li&&a href=&#&&Link&/a&&/li&
& & & & &li class=&dropdown&&
& & & & & &a href=&#& class=&dropdown-toggle& data-toggle=&dropdown& role=&button& aria-haspopup=&true& aria-expanded=&false&&Dropdown &span class=&caret&&&/span&&/a&
& & & & & &ul class=&dropdown-menu&&
& & & & & & &li&&a href=&#&&Action 1&/a&&/li&
& & & & & & &li&&a href=&#&&Action 2&/a&&/li&
& & & & & & &li&&a href=&#&&Action 3&/a&&/li&
& & & & & & &li role=&separator& class=&divider&&&/li&
& & & & & & &li&&a href=&#&&Separated Action&/a&&/li&
& & & & & &/ul&
& & & & &/li&
& & & &/ul&
& & &/div&&!-- /.navbar-collapse --&
& &/div&&!-- /.container-fluid --&
& &&!-- jQuery (necessary for Bootstrap's JavaScript plugins) --&
& & &script src=&/jquery/1.11.2/jquery.min.js&&&/script&
& & &!-- Include all compiled plugins (below), or include individual files as needed --&
& & &script src=&/bootstrap/3.3.4/js/bootstrap.min.js&&&/script&
其运行效果：在此运行
其他组件的运行效果如下:
分页例子的运行效果：在此运行
下拉菜单的运行效果：在此运行
面板的运行效果：在此运行
六、JavaScript插件
默认情况下，所有的JS插件都可以通过设置特定的HTML代码和相应的属性来实现，而无需写一行JavaScript代码。其实现本质就是Bootstrap为这些属性实现了对应的JavaScript代码。
下面就直接看一个模态窗口的例子：
&!DOCTYPE html&
&html lang=&zh-CN&&
& & &meta charset=&utf-8&&
& & &meta http-equiv=&X-UA-Compatible& content=&IE=edge&&
& & &meta name=&viewport& content=&width=device-width, initial-scale=1&&
& & &!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --&
& & &title&Bootstrap 101 Template&/title&
& & &!-- Bootstrap --&
& & &link rel=&stylesheet& href=&/bootstrap/3.3.4/css/bootstrap.min.css&&
& &h3&模态窗口&/h3&
& &!-- Button trigger modal --&
& &button type=&button& class=&btn btn-primary btn-lg& data-toggle=&modal& data-target=&#myModal&&
& & Click me
& &/button&
& &div class=&modal fade& id=&myModal&&
& & &div class=&modal-dialog&&
& & &div class=&modal-content&&
& & & &div class=&modal-header&&
& & & & &button type=&button& class=&close& data-dismiss=&modal& aria-label=&Close&&&span aria-hidden=&true&&&&/span&&/button&
& & & & &h4 class=&modal-title&&Modal title&/h4&
& & & &/div&
& & & &div class=&modal-body&&
& & & & &p&Test body&&/p&
& & & &/div&
& & & &div class=&modal-footer&&
& & & & &button type=&button& class=&btn btn-default& data-dismiss=&modal&&Close&/button&
& & & & &button type=&button& class=&btn btn-primary&&Save changes&/button&
& & & &/div&
& & &/div&&!-- /.modal-content --&
& &/div&&!-- /.modal-dialog --&
&/div&&!-- /.modal --&
& &&!-- jQuery (necessary for Bootstrap's JavaScript plugins) --&
& & &script src=&/jquery/1.11.2/jquery.min.js&&&/script&
& & &!-- Include all compiled plugins (below), or include individual files as needed --&
& & &script src=&/bootstrap/3.3.4/js/bootstrap.min.js&&&/script&
其运行效果：在此运行。
看完前面的所有内容之后，是不是瞬间觉得Bootstrap其实只不过是一个样式框架罢了。利用它我们可以快速方便地构建Web页面。另外看完前面的内容，你也就不会困惑为什么Bootstrap官方文档为什么是下面这样的吧：
Bootstrap官方文档的导航条中的条目不就是我们上面的介绍的几大组成部分嘛。
到此，本文的所有内容就分享结束了，希望通过本文可以让初学者快速理解和掌握Bootstrap。另外本文相当于是Bootstrap要领吧，关于更详细的内容大家可以自行参考Bootstrap中文官网。不过我觉得没不要了，有那样的时间还不如就直接实践起来呢。VS2013的Web应用程序就已经默认支持Bootstrap框架，大家可以看完之前就可以马上通过VS2013来创建一个Web应用程序来体验下Bootstrap在Asp.net MVC 下的应用吧。具体相关教程可以参考：ASP.NET MVC使用Bootstrap系列
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：207876次
积分：3366
积分：3366
排名：第7922名
原创：94篇
转载：194篇
评论：10条
(13)(2)(1)(2)(4)(13)(33)(3)(14)(2)(23)(5)(2)(1)(2)(2)(2)(1)(13)(1)(6)(4)(2)(3)(2)(2)(1)(67)(1)(3)(23)(3)(1)(5)(32)如何快速掌握一门新技术/语言/框架... - 文章 - 伯乐在线
& 如何快速掌握一门新技术/语言/框架...
IT行业中的企业特点是都属于知识密集型企业。这种企业的核心竞争力与员工的知识和技能密切相关。而如果你在企业中扮演的是工程师的角色的话，那么你的核心竞争力就是IT相关的知识与技能的储备情况。而众所周知，IT行业是一个大量产生新知识的地方，就拿Web前端举例，短短的5，6年时间，Web前端已经经历了数次变革，就目前来看变革还将继续下去。从以前的div+css网格化布局到JavaScript的方兴未艾，然后是各种JavaScript框架的百家争鸣，HTML5和CSS3的落地，移动web冲击下带来的响应式设计，jQuery,AngularJs,ReactJs等操作DOM元素截然不同的理念和方式，web component的标准化进程……为什么现在企业到处都在招前端工程师？好像突然之间，前端工程师成了稀缺资源。这里的原因之一就是很多前端工程师跟不上行业变化，无法达到目前市场上对前端工程师的能力和要求。在这种大环境下，工程师能够掌握快速学习的能力就变的至关重要。
笔者根据自身的亲身体会，以及结合对周围同事的观察，对如何快速掌握一门新技术（这里的技术包括一门新的IT技术，包括一门新的编程语言，抑或一种新的程序框架等）有着以下几点指导。
要想快速掌握一门新技术，首先有两个先决条件。
1.首先思想要主动求变，敢于跳出的自己的舒适区，对任何技术都抱有开放的心态。贪图安稳是人的本性。而这种本性往往会阻碍你的发展。人所能了解的知识的多少，取决于自己的舒适区有多大，舒适区越大，与外界接壤的范围越大，就越感觉自己的无知。程序员至少要做到两点，不要对自己不了解的技术心存偏见，不要对自己不熟悉的技术心存恐惧。
2.要化被动式学习为主动式学习。在中国很大一批程序员每天都是在被动式学习。什么是被动式学习？就是被人、事逼着去学习。今天新启动一个项目，技术调研不想采用新的技术，开发过程中碰到难题才会去查资料，整天就是把别人的、自已以前写的代码复制重用，复制以后出问题了也要花好长时间解决。举个例子，一个程序员使用了Spring好几年，都不知道Spring的核心理念，不知道Spring框架结构，不知道Spring各个组件功能，不知道Spring新版本的新特性。这是非常可怕的，因为你不知道这些东西，就无法采纳Spring的最佳实践，出现问题不知道如何快速定位，项目中的某些需求就无法使用Spring早已封装好的功能（因为你不知道Spring还能干这个）。主动式学习需要你未雨绸缪，不能临时抱佛脚。而且要把学习看做是对自己的积累和提高，看成是对自己的长期投资，不能抱有太强的功利性。
有人说，我就是喜欢舒适区，我就是不喜欢主动学习，有什么好的方式和方法改变这两点？说实话，我所能提供给你的帮助很有限。正如《后会无期》里的一句台词，“我听过很多大道理，可依然过不好这一生”。这两点还是更要靠你个人来实现。而接下来的一些点，我相信可以帮助到你。
1.学习一门新技术前，先要搞清楚为什么要学习它？没这个技术前我们是怎么干活的？有了它以后我们又是怎么干活的？它带来了哪些改变？其实问这些问题，就是为了了解该技术解决或者简化了那个问题域的问题，又是采用了什么方式达到了这样的效果。就拿AngularJS为例，AngularJS最初是为了弥补HTML构建应用的不足。以前的HTML在设计时是为了展示多媒体信息，后来虽然拓展了一些动态功能，但是在应用web化的潮流下，HTML设计上的不足就越来越突出。比如DOM元素操控太繁琐、业务逻辑很难模块化、可测性低、开发效率底下等。而AngularJS采用了一种全新的设计来解决该问题，它提出了一系列概念，引入了数据绑定、标识符、路由、依赖注入等特性，大大简化了我们开发WEB开发的工作量。通过这样的方式能迅速建立起了对该技术的宏观认识，了解了其潜在的应用场景、应用方式以及一些局限性等。
2.接下来就要实际使用一下该技术的核心的功能，强化对它的认识。方式就是参考该技术官网的Quick Start（快速开始）章节，一步一步来。现在的程序员越来越珍惜时间，文档的简洁性、完备性、易上手都成了是否采纳某项技术的指标之一。尤其是现在的各种开源组件，连文档都是开源的。所以很多文档都是完全按照程序员的思维写的，读起来很清爽。再拿Spring来说，想学习Spring4.0推出的Spring boot组件，那么可以访问其官网，页面上最大的按钮就是Quick Start。点击学习吧。页面是一个简单的例子，可能花不了你五分钟。如果还没过瘾，右边又列出了更多的 Getting Started Guides ，也是一步一步的教你进阶功能。有些人可能要问了，英语不好怎么办？请学英文。英文是一个优秀程序员的必备技能。可能也有人说，看文档时有各种杂音咋办。比如看Spring boot的start guide，需要之前对Spring有一定了解，需要知道tomcat、jetty是干啥的，需要有一定gradle或者maven使用经验…这些知识在演练Spring boot的那个小程序时都需要，但由于这些杂音的干扰，会拖慢学习的过程。摆脱这些杂音的唯一方式就是，对于那些不了解的知识点，也花时间去学习吧。所以学习是一个良性循环的过程，学的越多，就学的越快。
3.前面两步能够保证你对一门技术入门，那么如何进阶那？这个阶段就是读了。从官网上把该技术的详细文档扒拉下来，使劲读吧。通读这些文档能让你进入它的实现细节，以及各种使用方式与场景，甚至一些最佳实践。比如Spring boot官方文档，详细到了牙齿。凡是你想到的、没想到的，文档都贴心的列了出来。如果你想学习Scala，那么请访问http://www.scala-lang.org/documentation/，各种文档应有尽有，读完就是大半个Scala专家。一门技术最好的文档必须是它的官方文档，如果不是，那么这门技术火不了。注意通读文档的过程中一定要在项目加以运用。如果在项目中没实践机会，自己可以写一些小的demo来实践。学习知识时实践与理论相结合的道理恒古不变。
4.走完前三步，你对这门技术的理解已经比大多数人强了。你可以算掌握这门技术了。那么还有进阶方式没？当然有，那就是把你所学、所想讲出来，写出来，暴露在公众之下，接受批判，从而发现自己的不足，促使你进步。有空给大家做几个讲座，写几个系列文章，那么你在大家眼中就成了这门技术的牛人。你就有了各种机会来解决使用该技术遇到的各种疑难杂症，反过来加深和修正你的理解。没事上上StackOverFlow，回答别人几个问题，或者订阅该技术的问题列表，经常看一看。
5.还可以再继续深入。加入国内/国际技术社区（国内没这样的社区咋办，机会来了，赶紧自己建一个），进一步发挥自己影响力。翻译、编写与该技术相关的书籍；如果该技术是开源的，那么有时间就提交修改把，自己就成了开发者一员了。这就是质的飞跃，从使用工具进阶到创造工具。
走完5步，你已经不是仅仅掌握这门技术了，你已经超神了好吧！有人可能又会问，能达到这五步的肯定要花很长时间，不是一般人能够到的高度。那当然了，这个过程肯定很难，但并非难到登天。至少我身边有很多这样的例子。其实你只要完成前三步，你就比50%的程序员牛了，完成第四步，你已经站在90%程序员的前面。
最后快速总结。重要的事情说三遍。
主动学习很重要，主动学习很重要，主动学习很重要。
官方文档很重要，官方文档很重要，官方文档很重要。
实践很重要，实践很重要，实践很重要。
可能感兴趣的话题
关于伯乐在线博客
在这个信息爆炸的时代，人们已然被大量、快速并且简短的信息所包围。然而，我们相信：过多“快餐”式的阅读只会令人“虚胖”，缺乏实质的内涵。伯乐在线内容团队正试图以我们微薄的力量，把优秀的原创文章和译文分享给读者，为“快餐”添加一些“营养”元素。
新浪微博：
推荐微信号
（加好友请注明来意）
– 好的话题、有启发的回复、值得信赖的圈子
– 分享和发现有价值的内容与观点
– 为IT单身男女服务的征婚传播平台
– 优秀的工具资源导航
– 翻译传播优秀的外文文章
– 国内外的精选文章
– UI,网页，交互和用户体验
– 专注iOS技术分享
– 专注Android技术分享
– JavaScript, HTML5, CSS
– 专注Java技术分享
– 专注Python技术分享
& 2017 伯乐在线　　大约在几个月之前，让我看完了《webkit技术内幕》这本书的时候，突然有了一个想法。想把整个web前端开发所需要的知识都之中在一个视图中，形成一个完整的web前端知识体系，目的是想要颠覆人们对于前端只有三大块（html、css、js）的认识&&做web前端需要的比这三大块要多得多。
　　拖了好几个月了，但是由于近期将要参加的某一个活动，我不得不这两天把这个东西整出来。说干就干。上午我就开始在办公室画草图，乱七八糟的在那儿理思路。
　　大家不要害怕，其实下文中的这个知识框架要比草图中的好看的多，草图大家权当没看见。
　　好了，废话不扯。下面请跟随我本博客的内容，来看看web前端开发除了htm、css和js之外，还有哪些东西需要你一步一步去掌握。
　　在看内容之前，先看一下这个知识框架的预览图。图太大不好展示，看不清除，可在此下载清晰版：&（内有整个知识体系的图片和xmind文件）
　　所有知识框架，那肯定是一个结构型的展现，就是一棵树。web前端的知识点非常多，也非常散，需要好几层结构来组织这个体系，否则就会显得很乱。那么如何组织、把谁和谁放在一块儿？这是真正值得我们去思考的，你也可以自己来思考一下这个问题。
　　在我总结的这个知识框架中，首先第一层我划分为：理论知识，类库框架，编码开发，运行环境。如下图：
　　接下来给大家解释一下：
　　这个图要从下往上看，为何？&&因为下面是上面的基础；
首先，我们需要一定的理论知识，不管是你听别人讲授、自己看书还是网上淘资料，你都需要一定的理论知识，每一种程序开发，都避免不了。
第二，有了这些理论知识我们就可以编码了&&不错&&but，没有人能抵挡住第三方框架和类库的诱惑，例如jquery；
第三，有了这些理论知识和协助我们的类库框架，我们就可真正的编码了。大家可能以为编码开发不就是写代码吗，还有啥？&&这里面道道多着呢；
最后，开发程序的目的，最终是为了能高效、稳定的运行在相应的环境中，这其中又有哪些事情需要我们去做？请期待；
3. 理论知识 包括&软知识&和&硬知识&
　　&软知识&和&硬知识&大家可能觉得词陌生，其实我一说大家就能明白。
所谓&软&的就是能在各个程序开发中都用到的，算是基本功、内功，例如数据结构、算法、设计模式、面向对象等等；
所谓&硬&的就是能直接用于本程序开发的。用C语言你就得学C语言语法，此时学java没用。我们web前端开发所需要的硬知识其实都包含在三个标准里面：http标准、W3C标准和ECMAScript标准；
4. 聊一聊web前端开发中的&硬知识&
　　&软知识&的内容非常多，也是我们大学时代学习的重点（没学好是另回事儿，毕业再恶补）。我们本次主要讨论的是web前端这一个方向，因此就点到为止，让大家知道这些知识也在知识体系中扮演重要角色。
　　刚才说道，硬知识有三个标准：http标准、W3C标准和ECMAScript标准，那咱们就挨个聊聊这三个标准。
4.1 http标准
　　为什么做web前端要了解http标准？&&因为浏览器要从服务端获取网页，网页也可能将信息再提交给服务器，这其中都有http的连接。web系统既然和http链接有瓜葛，你就必须去了解它。
　　我的意见是：你不必去非常了解http的详细内容，但是你要了解web前端开发常用的一些http的知识&&就是上图中我列出来的那些。当然，我知识列了一个纲，详细内容还得靠你自己去查阅（本文章讲的是知识框架，不会涉及任何知识点的详细内容）
　　关于这方面的知识，建议去查阅《图解http》这本书，浅显易懂的讲述了这些内容，我曾经也看过。
4.2 W3C标准
　　如果说你只知道web前端的一个标准，估计肯定是W3C标准了（据我了解，貌似大部分人真的都只知道这一个标准）。它的内容非常多，看看这个页面。
　　写到这里让我想起了一句话：2/8原则&&20%的功能满足80%的需求。我觉得这句话用到这里非常合适，我们在平时开发过程中根本用不到这么多东西。反而，你要把平时用的多的东西搞懂了。
　　下图的这些知识，我想不用再过多解释了，这就是我文章开发说的&三大块&（html、css、js）。现在你要知道，它们只不多是W3C标准的一部分，而W3C标准也只是web前端开发知识体系中的一部分而已。
　　（下图没有完全展开，想看权展开的图，可下载本文一开始提供的附件）
　　关于CSS的基础知识，毛遂自荐一下自己之前的一篇系列博客：《》
4.3 ECMAScript　　
　　简称ES，写全称太麻烦了。
　　有些人可能只知道javascript，而不知道ES&&其实，js是在ES的基础上，为web浏览器做了一部分封装（增加了DOM操作、BOM操作等）。
　　如上图中的这些概念，大家可能平时都在javascript中看到，其实他们是ES的内容。只不过javascript继承了ES的这些特性，并且javascript用的比较广泛，因此才会在js中讨论的多一些。
　　还是那个&2/8原则&。其实ES中的内容也非常多，而且更新很快，现在都到ES6了。但是我上图中列出来的这些都是最重要的概念。如果你不懂原型、闭包和作用域，那就说明你还不完全了解ES，也就是不完全会用javascript。
　　在此毛遂自荐自己之前的一篇系列博客，大家可以去参考：《》
5. 框架和类库
　　前面已经描述完了web前端开发所需要的理论知识。如何实践呢？&&不能蛮干&&还得绕世界去看看，有哪些大牛已经为我们做出了如此多的贡献。
　　用下面的这些类库或者框架，能大大提高你的开发效率。
首先，jquery一定是大部分web前端开发者不可或缺的工具。而我利用jquery不仅仅停留在只使用它的API和插件上，我还会自己去写jquery插件，我还会去读jquery的源码、了解jquery的设计思路。如果你也能那样做，请相信我，你会收获到意想不到的效果。如果有一个问题：怎样才能最最透彻的理解javascript的事件系统？最佳答案之一：读几遍（一遍可能读不懂）jquery关于事件处理部分的源码！
bootstrap不用再过多解释了吧，从github上的排名也能看出道道来。甚至连我们公司的UI设计师，都从bootstrap上截图作为素材。
是全世界最强大的图标系统。相比于css制作图标来说，这个要好很多倍，不管是开发、效率还是维护上。能让我自定义选择自己的图标文件。
requirejs和seajs这种模块定义系统，也一定是你系统中不可或缺的。我曾经看过一个教程，讲师就说：requirejs带来了既jquery之后的第二次前端技术变革。
其他的，backbone、angular、react这些也慢慢的开始发挥了他们的价值，此处精力有限就不再赘述了&&但是，他们很重要&&你至少要试着去了解它们。
6. 编码开发
　　要问编码IDE哪家强，当然要属微软的visual studio！但是即便是微软的VS最新版本，它也代替不了下面要说的这套开发环境。
　　如果你专门做web前端，就不要在用vs了，当然要选择sublime。写html语句还用手动一条一条写吗？你得需要zencoding的协助，否则效率太差了。
　　另外，针对html、css、js的压缩、合并、语法检查，文件的清除、复制这些操作，你还要手动去做吗？&&你需要grunt或者gulp的帮助。
　　在此毛遂自荐自己的教程《》，讲的比较详细，适合初学者学习。
　　如果你的系统中有比较多的js代码或者文件，请选择一个合适的模块定义规范&&CMD / AMD
　　请用git来帮助你做文件版本管理，最简单的就是使用github。
　　调试、测试，也都有专门的工具，都是需要学的&&
　　&&我的天哪&&这些字写到现在写的我的手都酸了，别说要学习这些知识了&&再也别说我们web前端是&三大块&了！
7. 运行环境
　　当系统真正到了运行环境中，当你觉得终于完事儿的时候，其实还有好几个知识点需要你掌握。看下图：
　　首先，你要知道web系统虽然大部分是在浏览器下运行，但是js可能会被运行在node环境。
　　在浏览器环境下，最重要的两点是：web安全和性能优化。需要注意的纲要我都列出来了，如果想了解推荐两本书《白帽子将web安全》《高性能网站建设指南》
　　以上这些是全部的知识体系。如果你想成为一名合格的、让leader喜欢的程序猿，你除了知道这些知识之外，我觉得还需要以下几点：
要了解敏捷软件开发流程（如SCRUM）和项目管理知识（如考取PMP），这也属于一种&软&知识吧；
要学会在网上和别人交流（博客、qq群、开源项目），交流能让自己看到自己的不足；
要学会自我反省和自我学习。就像我现在一样，试着自己总结一下属于自己的东西，随时反省随时进步。
-------------------------------------------------------------------------------------------------------------
欢迎关注我的教程：
《》《》《》
《》《》《》
------------------------------------------------------------------------------------------------------------
也欢迎关注我的开源项目&&
-------------------------------------------------------------------------------------------------------------
随机视频聊天&&
-------------------------------------------------------------------------------------------------------------
阅读(...) 评论()}