首页 > 代码库 > Bootstrap使用心得
Bootstrap使用心得
久闻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
Bootstrap使用心得