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">

QQ

<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 id="header"></div>  <div id="footer"></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

http://www.html5jscss.com/?p=30

你可能感兴趣的:(bootstrap)