久闻Twitter的Bootstrap框架强大且易用，近日为改版小丸工具箱的官网特地花了一周实践。
这篇文章总结我在使用Bootstarp中的一些关键点。
1.布局
Bootstrap框架的布局采用了栅格系统，默认情况下把页面分为12列。
在使用时只要在div的class属性中赋予适合的类即可。举例如下：
<div class="row">
<div class="col-sm-4 col-xs-12">
<h2 class="page-header">简介</h2>
</div>
<div>
在最外层套一个的<div class="row">作为一行。在里面添加<div class="col-sm-4 col-xs-12" >
col-sm-4 中的sm代表small，在宽度为750px以上时占用4列；
col-xs-12 中的xs在宽度按小于750px时占用12列（即满屏显示）
一般情况下，只需填写两个即可满足响应式网页的需求。
另外可以使用class="col-sm-4 hidden-xs" ，即在小于750px时隐藏元素。
参考资料：http://v3.bootcss.com/css/#grid
2. 导航条
Bootstrap框架预置了一个方便易用的导航栏，没有太多值得记录的，直接看参考资料即可掌握。
<header class="navbar navbar-inverse navbar-fixed-top" role="banner">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target="#example-navbar-collapse">
<span class="sr-only">切换导航</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="javascript:scroll(0,0)">Maruko Toolbox</a>
</div>
<nav class="collapse navbar-collapse" id="example-navbar-collapse" role="navigation">
<ul class="nav navbar-nav">
<li class="active">
<a href="#">HOME</a>
</li>
<li>
<a href="history.html">HISTORY</a>
</li>
<li>
<a href="developer.html">DEVELOPER</a>
</li>
<li class="dropdown">
<a href="tutorial.html" class="dropdown-toggle" data-toggle="dropdown">
TUTORIAL <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>
<a target="_blank" href="http://www.bilibili.com/video/av1242020">VIDEO</a>
</li>
<li class="divider"></li>
<li>
<a target="_blank" href="http://cnbeining.com/?p=289">FAQ</a>
</li>
</ul>
</li>
</ul>
</nav>
</div>
</header>
参考资料：http://www.w3cschool.cc/bootstrap/bootstrap-navbar.html
3. Bootstrap 滚动监听（Scrollspy）插件以及Bootstrap 附加导航（Affix）插件
结合两者可以实现滚动页面时导航栏变换焦点
范例页面 http://v3.bootcss.com/css/
<div id="myScrollspy" class="col-sm-4 hidden-xs">
<ul class="nav nav-pills nav-stacked" data-spy="affix" data-offset-top="140" role="tablist"> <li class="active"><a href="#r20140601">2014-06-01</a></li>
<li><a href="#r20140321">2014-03-21</a></li>
<li><a href="#r20140129">2014-01-29</a></li>
<li><a href="#r20131125">2013-11-25</a></li>
<li><a href="#r20130727">2013-07-27</a></li>
<li><a href="#r20130214">2013-02-14</a></li>
<li><a href="#r20121017">2012-10-17</a></li>
<li><a href="#r20120615">2012-06-15</a></li>
<li><a href="#r20120327">2012-03-27</a></li>
<li><a href="#r20120129">2012-01-29</a></li>
<li><a href="#r20110826">2011-08-26</a></li>
<li><a href="#r20110725">2011-07-25</a></li>
</ul>
</div>
1） 通过 data 属性：向您想要监听的元素（通常是 body）添加 data-spy="scroll"。
然后添加带有 Bootstrap .nav 组件的父元素的 ID 或 class 的属性 data-target。
为了它能正常工作，必须确保页面主体中有匹配您所要监听链接的 ID 的元素存在。
<body data-spy="scroll" data-target="#myScrollspy">
2）设置当滚动条下滑140个像素以后切换ul.nav-pills.affix 状态。
<ul class="nav nav-pills nav-stacked" data-spy="affix" data-offset-top="140" role="tablist">
3）设置当滚动条下滑140个像素以后在页面固定（fixed) 的位置。
ul.nav-pills.affix{
top: 43px; /* Set the top position of pinned element */
}
参考资料：
http://www.w3cschool.cc/bootstrap/bootstrap-scrollspy-plugin.html
http://www.w3cschool.cc/bootstrap/bootstrap-affix-plugin.html
4. 动画
本站用了知名的animate.css来实现动画。
<link href="css/animate.css" rel="stylesheet">
只需要在需要动画的元素的class属性加入"animated zoomIn"即可实现在页面载入时产生动画。
如需要精确控制时间则在元素的css中加入：
animation-delay:2s; animation-duration:2s;
如果需要在事件中添加动画可以在javascript中使用addClass。
jQuery代码：
$(function(){
$("#logo").click(function()
{
$("#logo").removeClass("animated zoomIn");
$("#logo").addClass("animated flip");
setTimeout(function(){
$("#logo").removeClass("animated flip");
},2000);
});
});
参考资料：
CSS动画简介
http://www.ruanyifeng.com/blog/2014/02/css_transition_and_animation.html
5. 响应式
有时需要实现个别CSS属性的响应式，这时要用 @media 来实现。
@media screen and (max-width: 768px) {
.titleContainer
{
width: 320px;
}
}
screen代表电脑屏幕，and是逻辑运算符， max-width 768px代表在768px以下才实现其中的CSS。
这段代码必须放在CSS的最后以免被覆盖。
参考资料
http://www.w3cplus.com/content/css3-media-queries
http://blog.mineducks.com/archives/22
6. web font
Bootstrap框架自带了一套web font字体glyphicons，可以在网页中直接使用。
<span class="glyphicon glyphicon-user"></span>
本站使用了Font Awesome来显示QQ和新浪微博的Logo。
<link href="css/font-awesome.min.css" rel="stylesheet">
<i class="fa fa-qq"></i>
新浪微博
<i class="fa fa-weibo"></i>
参考资料：
http://v3.bootcss.com/components/#glyphicons
http://www.w3cschool.cc/bootstrap/bootstrap-glyphicons.html
7. 移动设备浏览时禁止缩放
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" >
8. 首行缩进
p{
text-indent: 2em; /*em是相对单位，2em即现在一个字大小的两倍*/
}
9. HTML5标签
大家可能都知道HTML5中出现了很多以前没有的标签，例如，header，nav，和footer，在这之前我们如果开发相关的页面布局的时候，往往都是使用CSS来定义相关的头部，导航及其页底部分。
参考资料：http://www.cnblogs.com/TomXu/archive/2011/12/08/2269043.html