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" 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 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语义化标签
在HTML 5出来之前，我们用div来表示页面章节，但是这些div都没有实际意义(例如<div ></div> <div ></div>等等)，html5的出现改变了这一规则。语义化标签优点：结构更好，更利于搜索引擎的抓取（SEO的优化）和开发人员的维护(可维护性更高，结构清晰，易于阅读)；更有利于特殊终端的阅读等。
•<header></header> 网页的页眉，通常包含h1-h6元素或hgroup，作为整个页面或者一个内容块的标题。也可以包裹一节的目录部分，一个搜索框，一个nav，或者任何相关logo。整个页面没有限制header元素的个数，可以拥有多个，可以为每个内容块增加一个header元素。
•<footer></footer> 网页的页脚，通常含有该节的一些基本信息，譬如：作者，相关文档链接，版权资料。如果footer元素包含了整个节，那么它们就代表附录，索引，提拔，许可协议，标签，类别等一些其他类似信息。
•<hgroup></hgroup> 代表“网页”或“section”的标题，当元素有多个层级时，该元素可以将h1到h6元素放在其内，譬如文章的主标题和副标题的组合。如果只需要一个h1-h6标签就不用hgroup。
•<nav></nav> 元素代表页面的导航链接区域。用于定义页面的主要导航部分。
•<aside></aside> 元素被包含在article元素中作为主要内容的附属信息部分，其中的内容可以是与当前文章有关的相关资料、标签、名次解释等（特殊的section）。
•<section></section> 元素代表文档中的“节”或“段”，“段”可以是指一篇文章里按照主题的分段；“节”可以是指一个页面里的分组。section通常还带标题，虽然html5中section会自动给标题h1-h6降级，但是最好手动给他们降级。article、nav、aside可以理解为特殊的section，所以如果可以用article、nav、aside就不要用section，没实际意义的就用div。
•<article></article> 元素最容易跟section和div容易混淆，其实article代表一个在文档，页面或者网站中自成一体的内容，其目的是为了让开发者独立开发或重用。譬如论坛的帖子，博客上的文章，一篇用户的评论，一个互动的widget小工具。（特殊的section）除了它的内容，article会有一个标题（通常会在header里），会有一个footer页脚。如果在article内部再嵌套article，那就代表内嵌的article是与它外部的内容有关联的。article内部嵌套section，这样能让浏览器更容易区分各个章节所包括的内容。section内部嵌套article，section将这些自成一体的article包裹，就组成了一个团体。
参考资料：
http://www.cnblogs.com/TomXu/archive/2011/12/08/2269043.html
- 上一篇 »接触HTML和CSS心得体会
- 下一篇 »CSS使用心得
