Twitter Bootstrap 3.0 是对其过去的重大改变，现在它更偏向于移动应用的框架，并且宣称是最好的web设计css框架之一，的确如此。
可能有人曾经使用过Twitter Bootstrap 2.0 ，很好，说明对它有了初步的了解。
自从Twitter Bootstrap 3.0成为了偏向移动开发的框架之后，我们的设计将会百分百兼容并且完美显示在移动终端上，是不是很酷呢？
今天让我来代大家一层层的掀开Bootstrap美人的衣服吧，哈哈哈哈，哥YD的笑了。
让我们开始吧
Twitter Bootstrap 网站就是采用Twitter Bootstrap 3.0 框架开发的，你瞧是不是很酷。
你可以从官方网站上把BootStrap 下载下来，然后解压缩下来之后就是这样（下载预编译版就行，毕竟我们没有必要去读懂它的源码）：
好了，看到了上面的文件夹了嘛？
css文件夹里面包含了：bootstrap.css, bootstrap.min.css, bootstrap-theme.css and bootstrap-theme.min.css.
bootstrap.css是最主要的css文件，我们所有的html文件中都必须包含它。（切记！）
bootstrap.min.css是压缩版的，当我们正式发布我们的网站的时候建议使用它。
bootstrap-theme.css 是额外的css文件，本次我们稍微忽略一下它。
同样还包含它的压缩版的文件。不解释了。
Bootstrap 2和Bootstrap 3 之间最大的差异就在于使用了font文件来替代图片，用于显示图标。
这是很大的飞越，也是极其富有挑战性的，真佩服twitter的牛人们！
这些font图标称之为Glyphicons——象形文字图标，这名字可够长的，将就着吧。
好的，让我们来瞧瞧js文件夹里面藏的是什么吧？
bootstrap.js和bootstrap.min.js
它们包含了bootstrap主要的js 函数库，像幻灯效果的，下拉选项的，搜索智能提示的，等等一系列的强大的js功能。
当然我们今天演示的只是它的一小部分，希望各位大爷大赏～～
我们下一步该干什么呢？
今天我就带大家使用bootstrap来创建一个静态的登陆界面。ok，让我们直接开门见山吧。
怎么样，还不错吧？
真正强大的还在后面，现在改变你的浏览器窗口的大小，你会惊奇的发现我们的web界面也在跟着改变，是不是很神奇，而且没有改变我们的阅读习惯，棒极了～现在是不是有点蠢蠢欲动啊，哈哈，bootstrap 就是如此的让人为之疯狂，着迷，就像屌丝看到了苍老师一样。
是不是很激动？好的，让我们来动手吧？开始撕扯你的衬衫吧，骚年！
架构
Bootstrap 3 能够很好的兼容html5和css3，这不得不说创造它的牛人的远见啊。
让我们来创建一个index.html文件。
然后，加上doctype 标签
<!DOCTYPE html>
之后，再加上基本的标签，<title></title><body></body>之类的
<html>
<head>
<title>Bootstrap 101 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
</head>
<body>
<h1>Hello, world!</h1>
<script src="//code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
请注意head－meta这个标签，至关重要。
这行标签就是刚才无论我们怎么调整窗口大小，而我们的网页内容都狠完美的显示的终极奥义，这就是完美自适应各类设备的一行小小的代码，无论设备是手机、平板、pc、retina屏幕，甚至你的手表。
body－h1 这个标签不解释了，如果大家再浏览器里面打开这个页面，你回发现字体是相当赏心悦目的哦。
body－script 包含了我们现在前端开发必须的神器，jquery.js和bootstrap.js。
再次深入探索Twitter BootStrap的奥秘
现在不妨让我们来画一张草图，如果要实现刚才的那个页面的话，我们可以这样设计
是不是很像？不过很丑，没关系，我们有Bootstrap。
menu 部分就是我们的导航部分，同navigation，简称 Nav，对于我们Bootstrap 3.0来说简直就是小菜一碟。
在body标签里面加上下面的代码
<nav class="navbar-wrapper navbar-default navbar-fixed-top" role="navigation"> </nav>
再来一炮吧！
<nav class="navbar-wrapper navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">Vacation Rentals</a>
</div>
</div>
大家请注意，这些class都是Bootstrap自带的哦，大家记住以后直接拿来用就行了，当然，如果大家觉得样式不满意，可以自行修改，这些都是无关痛痒的。
现在，把下列代码加入到navbar－header 块中
<div class="collapse navbar-collapse navbar-ex1-collapse">
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#"><span class="glyphicon glyphicon-home"></span> Home</a></li>
<li><a href="#"><span class="glyphicon glyphicon-star"></span> Top Destinations</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-user"></span> About Us<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Company Details</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-right" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-asterisk"></span> Book Tickets</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-info-sign"></span> Reservation<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Cancel</a></li>
<li><a href="#">Confirm</a></li>
</ul>
</li>
</ul>
</div>
上述代码就是我们导航的主要内容了，navbar－collapse能够让导航可触摸，并且能够自动的改变它的形状在小一点的设备上。
其余的代码很好理解。ul和li就是为了展示list 条目的。
还有navbar－right是为了把这个标签摆放到导航栏的最右边而存在的。
这里其实最重要的就是要记住这些标签代表的东东，以后可以直接在Bootstrap 3. 中调用，省得自己再写了。好了，我们完成了导航部分了，现在我们移步到body了，小激动了。
Header Area
Bootstrap 3提供了一个高复用的类叫做 jumbotron，它的作用是为了展示大的横幅和内容的，就像海报一样。
所以加上如下代码：
<div class="container-fluid">
<div class="jumbotron">
<h1>Best Vacation Rentals</h1>
<p>Sed placerat fringilla quam et.</p>
<a class="btn btn-primary btn-lg">Start Now!</a>
</div>
</div>
container 类和container－fluid类的区别就是在于后者可以自动的对焦于浏览器的中间。
jumbotron这个类太棒了，淘宝等大购物网站，争先恐后的再用它。
The Contents Area
现在我们碰到难题了，我们需要把Content 部分等分成3小块。这叫Bootstrap 3等分系统。在以前的css3 布局中，我们可能会想到，width＝33%，float＝left，之类的，现在对于Bootstrap 来说，简直是侮辱我们的节操啊，哈哈，不多说。看码。
不知道你有没有听说过Twitter Bootstrap的12网格理论，就是说它可以把任何的屏幕等分成12格，这就是Bootstrap为什么能够再任意屏幕的终端的展示的主要原因了。12里面的网格都包含12格更小的等分网格，然后小格子还有12个小格子……突然有点头晕，就像从前有座山，山上有座庙，庙里有个老和尚，有一天老和尚对小和尚说，从前有座山……
<div class="container">
<div class="row">
<div class="col-md-4">
<a href="#"><img class="img-responsive img-circle" src="images/feat1.jpg"></a>
<h3 class="text-center">Type 1</h3>
<p>Dummy Text..</p>
<a href="#" class="btn btn-success">Book Now @ $599</a>
</div>
<div class="col-md-4">
<a href="#"><img class="img-responsive img-circle" src="images/feat2.jpg"></a>
<h3 class="text-center">Type 2</h3>
<p>Dummy Text..</p>
<a href="#" class="btn btn-danger">Book Now @ $899</a>
</div>
<div class="col-md-4">
<a href="#"><img class="img-responsive img-circle" src="images/feat3.jpg"></a>
<h3 class="text-center">Type 3</h3>
<p>Dummy Text ...</p>
<a href="#" class="btn btn-info">Book Now @ $699</a>
</div>
</div>
</div>
其中col－md－4就是将12/3等分的结果，所以下次四等分，就可以col－md－3，是不是很简单呢？对，简直弱爆了！
Footer Area
直接贴代码吧，尼玛，要睡觉了。
<footer>
<div class="container">
<div class="row">
<div class="col-md-4">© 2013</div>
<div class="col-md-4">
<ul class="nav nav-pills">
<li class="active"><a href="#">About Us</a></li>
<li><a href="#">Support 24x7</a></li>
<li><a href="#">Privacy Policy</a></li>
</ul>
</div>
<div class="col-md-4">
<h3 class="text-right">Vacation Rentals</h3>
</div>
</div>
</div>
</footer>
偶了，到此为之了，困了，同志们，自己调整吧！！！
参考：http://www.sitepoint.com/understanding-twitter-bootstrap-3/
github:https://github.com/njaulj
来源：https://www.cnblogs.com/niuox/p/3581460.html