选项卡--JavaScript触发方法

除了在HTML设置 data-toggle 来触发选项卡之外，还可以通过JavaScript直接调用。

调用方法:

在每个链接的单击事件中调用tab("show")方法，显示对应的标签面板内容。针对上面的示例，删除HTML中自定义的 data-toggle="tab" 或 data-toggle="pill" 的属性，然后通过下面的脚本来调用：

$(function(){     $("#myTab a").click(function(e){                $(this).tab("show");     }); })

function(e){ e.preventDefault();这两行不知道是什么意思

阻止默认事件.比如当你点击带有href值的a标签时,元素响应click事件后,还会发生页面跳转.如果加上这个方法(属性)后,浏览器只会响应click事件,不会发生跳转.

事件冒泡：例如这样一个结构 ：<li><a></a></li>，假如你在a标签上绑定了一个点击click事件，如：$("a").click(function(){alert("a"); }); 还在li标签上绑定了一个事件，如：$("li").click(function(){alert("li"); });  如果不加e.preventDefault();这一语句，结果会在alert("a");执行后再次执行alert("li")语句，因为a标签在li标签中，a标签在li标签范围中，在执行a标签上的事件后会执行li标签上的相同类型事件，从内层标签往外层依次执行相同类型事件，从里面往外面，此为冒泡。

选项卡--胶囊式选项卡（nav-pills）

在Bootstrap除了可以让 nav-tabs 具有选项卡的切换功能之外，还可以对胶囊式 nav-pills 导航也具有选项卡的功能。我们只需要将 nav-tabs 换成 nav-pills，另外关键一点是将 data-toggle="tab"换成data-toggle="pill"。

下面的示例是将上面的 nav-tabs 换成 nav-pills：

<!-- 选项卡组件（菜单项nav-pills）--> <ul id="myTab" class="nav nav-pills" role="tablist">     <li class="active"><a href="#bulletin" role="tab" data-toggle="pill">公告</a></li>     <li><a href="#rule" role="tab" data-toggle="pill">规则</a></li>

选项卡--触发切换效果

同样的，选项卡也定义data属性来触发切换效果。当然前提你也要先加载bootstrap.js或者是tab.js。声明式触发选项卡需要满足以下几点要求：
  1、选项卡导航链接中要设置 data-toggle="tab"

  2、并且设置 data-target="对应内容面板的选择符(一般是ID)";

     如果是链接的话，还可以通过 href="对应内容面板的选择符(一般是ID)"

     主要起的作用是用户点击的时候能找到该选择符所对应的面板内容 tab-pane。

  3、面板内容统一放在 tab-content 容器中，而且每个内容面板 tab-pane 都需要设置一个独立的选择符（最好是ID）与选项卡中的 data-target 或 href 的值匹配。

代码如下所示：

<!-- 选项卡组件（菜单项nav-tabs）--> <ul id="myTab" class="nav nav-tabs" role="tablist">     <li class="active"><a href="#bulletin" role="tab" data-toggle="tab">公告</a></li>     <li><a href="#rule" role="tab" data-toggle="tab">规则</a></li>     <li><a href="#forum" role="tab" data-toggle="tab">论坛</a></li>     <li><a href="#security" role="tab"  data-toggle="tab">安全</a></li>     <li><a href="#welfare" role="tab" data-toggle="tab">公益</a></li> </ul> <!-- 选项卡面板 --> <div id="myTabContent" class="tab-content">     <div class="tab-pane fade in active" id="bulletin">公告内容面板</div>     <div class="tab-pane fade" id="rule">规则内容面板</div>     <div class="tab-pane fade" id="forum">论坛内容面板</div>     <div class="tab-pane fade" id="security">安全内容面板</div>     <div class="tab-pane fade" id="welfare">公益内容面板</div> </div>

运行效果如下：

选项卡--为选择卡添加fade样式

为了让面板的隐藏与显示在切换的过程效果更流畅，可以在面板中添加类名 fade，让其产生渐入的效果。

在添加 fade 样式时，最初的默认显示的内容面板一定要记得加上 in 类名，不然其内容用户无法看到。

项卡--选项卡的结构

一个选项卡主要包括两个部分，其一是菜单项，其二是内容面板。拿下面的示例来做演示。其HTML结构如下：

<）--> <ul id="myTab" class="nav nav-tabs" role="tablist">     <li class="active" role="tab">公告</a></li>     <li>" role="tab">规则</a></li>     <li><a href="#forum" role="tab">论坛</a></li>     <li>" role="tab">安全</a></li>     <li><a href="#welfare" role="tab">公益</a></li> </ul> <     <div class="tab-pane " id="bulletin">公告内容面板</div>     <div class="tab-pane fade" id="rule">规则内容面板</div>     <div class="tab-pane fade" id="forum">论坛内容面板</div>     <div class="tab-pane fade" id="security">安全内容面板</div>     <div class="tab-pane fade" id="welfare">公益内容面板</div> </div>

关键一点，选项卡中链接的锚点要与对应的面板内容容器的ID相匹配。

滚动监控器--JavaScript方法触发滚动监控器

在Bootstrap框架中，使用JavaScript方法触发滚动监控器相对来说较为简单，只需要指定两个容器的名称即可。比如下面的结构：

<nav id="navbar-menu" class="navbar navbar-default navbar-static" role="navigation">   … </nav> <div class="scrollspy" id="scrollspy">   … </div>

JavaScript触发可以这样写：

$(function(){     $("#scrollspy").scrollspy({         target: "#navbar-menu"     }); })

Bootstrap的滚动监控还提供了一个方法scrollspy("refresh")。当滚动监控所作用的DOM有增加或删除页面元素的操作时，需要调用下面的refresh方法：

$(function(){     $("[data-spy='scroll']").each(function(){         var $spy=$(this).scrollspy("refresh");     }) })

需要注意的是，这种refresh方法只对声明式用法有效。另外滚动监控除了options参数“target”之外，还提供了一个offset参数，此参数默认值为10。默认情况下，滚动内容距离滚动容器10px以内的话，就高一片面前显示所对应的菜单项。

滚动监控器--在body中加监控

除了这种方法之外，还可以直接在body上进行滚动条监控，此时要将滚动监控器移到body上，而且导航nav一定要在body内部。如下所示：

    <div class="navbar navbar-default navbar-fixed-top" id="navbar-menu">     </div>     <h3 id="blog">Blog</h3>     <p>…</p> </body>

注意：导航条必须设置为顶部固定样式（navbar-fixed-top）

<div class="scrollspy-example" data-offset="0" data-target="#navbar-example2" data-spy="scroll">

注意这段是写在文本那里的div的，data-target对应导航条的id

滚动监控器--声明属性触发滚动监控

为监控对象设置被监控的data属性：data-spy="scroll"，指定监控的导航条：data-target="#navbar-menu"。同时定义监控过程中滚动条偏移位置data-offset="60"。代码如下：

<div class="scrollspy" data-spy="scroll" data-target="#navbar-menu" data-offset="60">   … </div>

现在浏览器中预览，则可以看到当滚动div.scrollspy的滚动条时，导航条会实时监控并更新当前被激活的菜单项，如下图所示：

如果导航里有下拉菜单，并且滚动区域的内容到达下拉菜单子项所对应的区域，除了菜单高亮以外，子菜单的父元素dropdown也会高亮，如下图所示：

滚动监控器--滚动监控器的设计

在Web页面中实现Bootstrap滚动监控器其实非常简单，接下来我们一步一步来看滚动监控器是如何设计的。
第一步：使用滚动监控器，首要的条件是在页面中加载对应的插件。在这里你可以加载合并好的bootstrap.js或者其独立的插件文件scrollspy.js。这里以加载合并好的js为例：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

第二步：设计一个带有下拉菜单的导航条。分别为导航条和下拉菜单项定义一个锚点链接，锚点分别为“#blog”,“html”,“#css”,“#sass”,“#js”,“php”,“#about”。同时为导航条定义一个id值“navbar-menu”（id名称可自由定义），方便滚动监控。

第三步：设计监控对象。这里将监控对象内容都放置在一个div名为scrollspy（这个类名可自由定义）的容器中，其中放了多个子内容框。每个子内容框有一个标题，而且每个标题的ID值与导航菜单项中的锚点链接名相对应，并且注意加入“data-target="#navbar-menu"”属性（这个属性值要与前面的nav标签的id名称保持一致）

<div class="scrollspy" data-target="#navbar-menu">     <h4 id="blog">Blog</h4>     <p>…</p>     <h4 id="html">Html</h4>     <p>…</p>     <h4 id="css">CSS</h4>     <p>…</p>     <h4 id="sass">Sass</h4>     <p>…</p>     <h4 id="js">JavaScript</h4>     <p>…</p>     <p>…</p>     <h4 id="php">PHP</h4>     <p>…</p>     <p>…</p>     <h4 id="about">About</h4>     <p>…</p>     <p>…</p> </div>

第四步：为监控对象定义样式，设置容器scrollspy大小（设置高度目的是为了产生垂直滚动条）。

.scrollspy{     height:500px;     font-size:20px;     overflow:auto; }

滚动监控器

插件源文件：scrollspy.js

（官方发布引用地址：http://cdn.bootcss.com/bootstrap/2.3.1/js/bootstrap-scrollspy.js）

滚动监控器是Bootstrap提供的非常实用的JavaScript插件，被广泛应用到Web开发中。其表现形式是：

1、当用户鼠标滚动时，滚动条的位置会自动更新导航条中相应的导航项。如Bootstrap官网提供的示例：

（右侧结果窗口单击全屏按钮查看效果）

2、用户拖动滚动条，当滚动到@mdo时，上面的@mdo导航项就会高亮显示：

这是因为该插件可以自动检测滚动条到达哪个位置，然后在需要高亮的菜单元素上加了一个“active”样式。

下拉菜单--JavaScript触发方法

和模态弹出窗一样，Bootstrap框架中的下拉菜单也支持JavaScript方法触发下拉菜单显示。使用JavaScript触发下拉菜单和声明式原理是基本类似的，不同的是使用JavaScript方法可以按照自己的方式省略一些元素或者样式。同样用一个简单的示例来做演示：

<ul class="nav nav-pills">
    <li class="dropdown">
        <a href="##"  class="dropdown-toggle"  role="button" id="tutorial">教程<b class="caret"></b></a>
        <ul class="dropdown-menu" role="menu" aria-labelledby="tutorial">

相当于直接用$(function(){
    $(".dropdown-toggle").dropdown();
})代替了 date-toggle="dropdown" 触发

使用JavaScript调用dropdown()方法后，单击激活按钮，会弹出下拉菜单，再次单击的时候会收起下拉菜单。

$(function(){
    $(".dropdown-toggle").dropdown();
})

还可以使用参数“toggle”。当下拉菜单隐藏时，调用dropdown(“toggle”)方法可以显示下拉菜单，反之，如果下拉菜单显示时，调用dropdown(“toggle”)方法可以让下拉菜单隐藏。

$(function(){
    $(".dropdown-toggle").dropdown("toggle");
})

不过使用该参数，每次单击都要两次toggle，就会一直是一个不变的状态。所以，一般情况下，使用示例中不带参数的方法！！！。就算你需要使用参数“toggle”，也建议使用jQuery的one方法：

$(".dropdown-toggle").one("click",function(){
    $(this).dropdown("toggle");
})

js调用dropdown时无法隐藏

a 标签的 data-toggle="dropdown" 都没有删掉 是可以隐藏的呀. 然后那个js代码就没什么必要了

下拉菜单--属性声明式方法（二)

从上一节的两个示例，我们可以知道，用户只需要点击有向下三角形的按钮链接或者直接点击三角形就会弹出下拉菜单。实现这个效果，都是依赖于HTML相关元素自定义的属性完成。所以在编写HTML结构的时候必须满足下面的规则：

   按照制作菜单的结构编写结构，如前面“下拉菜单”一节(5-21)所介绍

   被点击的菜单项链接或按钮需要添加自定义属性 data-toggle="dropdown"

实现下拉菜单原理：

Dropdown插件加载时，对所有带 有“data-toggle=dropdown”样式的元素绑定了事件，用户单击带有“data-toggle=dropdown”样式的链接或按钮时， 会触发JavaScript事件代码。当用户点击带有“data-toggle=dropdown”样式的链接或按钮时，下拉菜单的父容器（上面的示例是 “<li class="dropdown">”）会添加一个open类名，此时下拉菜单显示；再次单击时，JavaScript会删除刚添加的open类 名，此时下拉菜单将隐藏。

简单的说，要制作下拉菜单，其结构基本如下：

<div class="dropdown">
    <a data-toggle="dropdown" href="#">下拉菜单触发器</a>
    <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"> ... </ul>
</div>

如果触发下拉菜单的元素是一个链接元素，为了避免点击链接，页面跳到顶部，可以使用data-target="#"来替代href="#"：

<div class="dropdown">
    <a id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html"> Dropdown <span class="caret"></span></a>
    <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"> ... </ul>
</div>

aria-labelledby="tutorial"有什么用？

aria-labelledby="tutorial"表示以下的标签是"tutorial"菜单的选项，而上面必须要定义一个id为"tutorial"的标签来触发这个菜单

 <li class="dropdown">
        <a href="##" data-toggle="dropdown" class="dropdown-toggle" role="button" 关于我们<b class="caret"></b></a>
        <ul class="dropdown-menu" role="menu">
            <li role="presentation"><a href="##">团队成长</a></li>

下拉菜单--属性声明式方法（一）

属性声明式方法：

一般下拉菜单都是出现在导航条中，比如下图的一个效果，用户点击带有三角形的菜单项都会弹出下拉菜单项：

<div class="navbar navbar-default" id="navmenu">     <a href="##" class="navbar-brand">W3cplus</a>     <ul class="nav navbar-nav">         <li class="dropdown">             <a href="##" data-toggle="dropdown" class="dropdown-toggle" role="button" id="tutorial">教程<b class="caret"></b></a>             <ul class="dropdown-menu" role="menu" aria-labelledby="tutorial">                 <li role="presentation"><a href="##">CSS3</a></li>                 <li role="presentation"><a href="##">HTML5</a></li>                 <li role="presentation"><a href="##">Sass</a></li>             </ul>         </li>         <li><a href="##">前端论坛</a></li>         <li><a href="##">关于我们</a></li>     </ul> </div>

除了这种导航条之外，在胶囊式导航中也具有下拉菜单，其结构如：

<ul class="nav nav-pills">     <li class="dropdown">         <a href="##" data-toggle="dropdown" class="dropdown-toggle" role="button" id="tutorial">教程<b class="caret"></b></a>         <ul class="dropdown-menu" role="menu" aria-labelledby="tutorial">             <li role="presentation"><a href="##">CSS3</a></li>             <li role="presentation"><a href="##">HTML5</a></li>             <li role="presentation"><a href="##">Sass</a></li>         </ul>     </li>     <li class="active"><a href="##">前端论坛</a></li>     <li><a href="##">关于我们</a></li> </ul>

运行效果如下：

动画过渡：transition.js

模态弹窗：modal.js

下拉菜单：dropdown.js

滚动侦测：scrollspy.js

选项卡：tab.js

提示框：tooltop.js

警告框：alert,js

按钮：button.js

折叠/手风琴：collapse.js

图片轮播：carousel,js

自动定位浮标A覅下：affix.js

下载地址

https://github.com/twbs/bootstrap

<a href="##" data-toggle="dropdown" class="dropdown-toggle" role="button" id="tutorial">教程<b class="caret"></b></a>

<ul class="dropdown-menu" role="menu" aria-labelledby="tutorial">
                <li role="presentation"><a href="##">CSS3</a></li>
                <li role="presentation"><a href="##">HTML5</a></li>
                <li role="presentation"><a href="##">Sass</a></li>
            </ul>

Bootstrap中文定制页面：http://v3.bootcss.com/customize/