最近需要做一个简单的Web页面。
考虑到前端经验不足，为了快速产出，同时项目只是一个工具，对项目没有什么要求，所以我选择了Bootstrap这个框架作为Web框架。
写从零开始学Bootstrap的初衷：
看了半天的Bootstrap的文档，包括官方的（http://v3.bootcss.com/getting-started/）和非官方的（http://www.runoob.com/bootstrap/bootstrap-tutorial.html），以及他人写的简单入门博客（http://www.cnblogs.com/fnng/p/4446047.html），和知乎上关于BootStrap上的评论（https://www.zhihu.com/question/35237472，https://www.zhihu.com/question/31409502）深深的感觉到，Bootstrap应该是一个很好用的框架，学习起来也不难，是个高速产出的工具，但是灵活性不足以让开发者随心所欲的把玩。而且前端的东西太多太杂，如果没有一个清晰的学习目标和路线，很容易陷入无尽的细节中，没有相应的产出，会有挫败感。因此我决定记录下自己的学习路径，方便自己复习，以及广大的初学者入门。
让我们先从BootStrap的最简单的模板开始：
<!DOCTYPE html><html lang="zh-CN"> <head> <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 href="css/bootstrap.min.css" rel="stylesheet"> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <h1>你好，世界！</h1> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="js/bootstrap.min.js"></script> </body></html>
让我们一行行的来看（我用#代表解释）：
<!DOCTYPE html> #代表这是HTML5页面
<html lang="zh-CN"> #lang是“language”的意思，是html标签的一个属性，这个属性是告诉搜索引擎，我这个页面是中文页面,是方便搜索引擎收录的，对页面显示并没有影响。"zh—CN"是ISO标准的一种写法，表示中文。"zh"是"zhongwen"的前两个字母（如果要告诉浏览器是英文界面，则lang="en"，"en"就对应了“english”的前两个字母），"CN"是国家代码。（http://www.cnblogs.com/sink_cup/archive/2010/01/22/html401_lang_iso639_iso3166_iana_language_subtag.html）
新闻热点
疑难解答
图片精选
