这段时间工作的同事给我推荐了Bootstrap这个框架，根据这个框架所制作的网页十分的优雅，勾起了我学习的兴趣。然而我在学习的过程中碰到了很多问题，从一开始，我面临的问题相信也是很多不懂得框架而只了解html和css的人所会困扰的。这个框架怎么用？框架的意义是什么？官方有几个文档我们应该下载哪个？而下载了以后我们又将如何开始着手制作网站，可以像网上的例子那样?这些问题在大多数网上的教程中不是没有提及，就是一笔带过，这对我们这些小白来说，开始动手去启动一个带有框架的网站，是困难的，然而就是这些关键的地方我们找不到合理的简单易懂的教程。
博主也不是什么大牛，只能在这一步步学习的过程中，将所面临的问题和后来的解决方式写出，希望能让大家省去很多弯路，节省宝贵的开发时间。
记住我的话“start fast and write comfortable！”——”怎么快怎么舒服怎么来！“
话不多说，开始记录我们的学习日记。
首先，这个框架是一个是基于 HTML、CSS、JAVASCRIPT 的用于快速开发 Web 应用程序和网站的前端框架。
如果我们没明白框架是什么，那很简单我举个例子，这个东西就像是配好的咖喱块和组成咖喱粉的香料的区别。我们制作一道咖喱饭，排除原材料肉类，蔬菜和制作方法以及火候外，必不可少的就是咖喱。咖喱是什么，咖喱是许多香料组成的一种复合香料的名称，其中的比例多样，配法复杂，我们正常上班族制作咖喱饭并不会从配咖喱粉开始做起，我们用什么？一个便利店里配好的咖喱块，什么鸡肉，土豆胡萝卜一块放下去煮，丢一块配好的咖喱块，煮至香浓，浇在米饭上，GG，这就成了。而框架就像配好的咖喱块一样，在没有框架以前，你想制作一个用户界面友好，优雅的网站，你必须得懂点设计，你得花费大量的时候去定位你的div，你设计你按钮的样式，等等等等，你花费在CSS样式上的时间和你完成功能的时间一样多，你无法从大量的CSS样式中脱离出来，天啊，想想就可怕。而且你做出来的东西可能在你自己的电脑上看起来还不错，一旦换了一种浏览器或者一个分辨率不一样的电脑，你就会发现你原本骄傲的网站看起来就像一坨shit。
但是，现在我们有了Bootstrap，它为你实现规划好了CSS，可以让你的网站在不同的电脑、平板电脑、移动设备上有着合理的显示，什么你不懂？它就像是自动变形，去适应各种不一样的屏幕，你在自己的电脑上看是什么样的，在别人的电脑、平板电脑、移动设备上显示也是差不多一样的（当然一些老旧的浏览器并不能支持它，但是我相信你要开始学Bootstrap来制作网站不是制作一些老掉牙的网站类型的。）
也许你看到这里，以及跃跃欲试了。Stop！先不急，虽然我说这篇文章是分享给一些像我一样稍微了解html和css的人，但是，少年，你懂不懂JQuery?
如果你对它一无所知的话，我建议你先上个厕所，然后去借一本你们学校的图书馆的或者你舍友在跳蚤市场上低价买入的那些学长们买了却没有翻过的关于JQuery的书，抑或是上网查找相关的资料，先看一看。
当然，为了“start fast and write comfortable！”的宗旨，你也可以不看，然后你将收获一个静态网页，拍下它们然后在你的朋友圈里装装逼。
问题一：我怎么下载这个咖喱块（框架）？
作为一个2011 年八月在 GitHub 上发布的开源产品。这东西下载也是不要钱的，你可以从http://v3.bootcss.com/getting-started/#grunt这个链接的页面下找到下载地址。
你以为事情就这么简单？
WTF，作为新手的你肯定想知道，我到底该下载哪个，这些都是什么鬼？
（当然也有一些视觉少年会直接点击下载Bootstrap）
没错，你就点击下载Bootstrap好了，直接引入项目中。好吧，直接引入项目你也不懂，你就直接下就好了，下好了我们来看一下文件的树形结构。
css和js不必多说，bootstrap.min.css和bootstrap.min.js这两个我们在网站中将会引入，而有关于fonts的文件夹下的文件，都是来自 Glyphicons 的图标字体，除了svg，你用sublime打开看到的样子都是这样的。
而你只要知道当你用sublime打开jpg和png显示的也是这样的每行32位16进制数。
所以，这些图标是Bootstrap本身带有的，你想使用它们，那么请点击以下的链接，来学习并使用这些按钮。
http://v3.bootcss.com/components/
这个页面有多有可用图标和它们class的信息，我相信你在今后实际的建站中也许会使用到它们。
讲完了下载，你现在可以开始学习使用Bootstrap制作一个简单的页面。
在下载解压后的bootstrap文件夹下，建一个index.html。
里面的模板如下：
<!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>
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<h1>你好，SROMEI！</h1>
<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<!--如果你没有JQuery的话，使用这个地址的也可以，但是推荐还是下载一个放到本地文件夹中 -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
以上的代码是使用Bootstrap的html页面中不可缺少的信息，至于添加其他的东西，取决于你的具体情况。
这仅仅是一个静态页面，在后面我将会一步一步对于Bootstrap的页面布局等方面的特性进行一一讲解。
Bootstrap学习日记 （一）（分享给像我一样只稍微了解html和css的人）
原文：http://www.cnblogs.com/sromei666/p/4875045.html