bootstrap(选项卡、提示框和弹出框)

选项卡（Tabs）
选项卡Tabs是Web中一种非常常用的功能。用户点击或悬浮对应的菜单项，能切换出对应的内容

Bootstrap框架中的选项卡主要有两部分内容组成：
选项卡组件（也就是菜单组件），对应的是 Bootstrap的 nav-tabs）
底部可以切换的选项卡面板，在 Bootstrap 中通常 tab-pane 来表示.

<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 active" id="bulletin">公告内容面板div>
    <div class="tab-pane" id="rule">规则内容面板div>
    <div class="tab-pane" id="forum">论坛内容面板div>
    <div class="tab-pane" id="security">安全内容面板div>
    <div class="tab-pane" id="welfare">公益内容面板div>
div>

<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js">script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js">script> 

选项卡–选项卡的结构
一个选项卡主要包括两个部分，其一是菜单项，其二是内容面板
关键一点，选项卡中链接的锚点要与对应的面板内容容器的ID相匹配。
对于面板内容tab-pane都是隐藏的，只有当前面板内容才是显示的：

css源码：
.tab-content > .tab-pane {
    display: none;
}
.tab-content > .active {
    display: block;
}

选项卡–触发切换效果
选项卡也定义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 的值匹配。

选项卡–为选择卡添加fade样式
为了让面板的隐藏与显示在切换的过程效果更流畅，可以在面板中添加类名 fade，让其产生渐入的效果。
在添加 fade 样式时，最初的默认显示的内容面板一定要记得加上 in 类名，不然其内容用户无法看到

<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>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js">script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js">script> 

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

<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>
    <li><a href="#forum" role="tab" data-toggle="pill">论坛a>li>
    <li><a href="#security" role="tab" data-toggle="pill">安全a>li>
    <li><a href="#welfare" role="tab" data-toggle="pill">公益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>

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

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

实例 ：

<ul id="myTab2" class="nav nav-tabs" role="tablist">
    <li><a href="#a" role="tab">娱乐a>li>
    <li><a href="#b" role="tab">房产a>li>
    <li><a href="#c" role="tab">国内a>li>
    <li><a href="#d" role="tab">国外a>li>    
ul>

<div id="myTabContent2" class="tab-content">
    <div class="tab-pane fade in active" id="a">娱乐内容面板div>
    <div class="tab-pane fade" id="b">房产内容面板div>
    <div class="tab-pane fade" id="c">国内内容面板div>
    <div class="tab-pane fade" id="d">国外内容面板div>  
div>

<script>    
    $(function(){
    $("#myTab2 a").click(function(e){
        e.preventDefault();
        $(this).tab("show");
    });
})
script>

提示框(Tooltip)
样式文件：
LESS版本：对应源文件 tooltips.less

<style id="jsbin-css">
  body {
    padding: 100px;
  }
  .btn {
    margin: 20px 10px 20px;
  }
  style>
head>
<body>
  <h3>按钮做的提示框h3>
  <button type="button" 
          class="btn btn-default" 
          data-toggle="tooltip" 
          data-placement="left" 
          data-original-title="提示框居左" 
          title="">
  提示框居左      
  button>  

  <button type="button" 
          class="btn btn-default" 
          data-toggle="tooltip" 
          data-placement="top" 
          data-original-title="提示框在顶部">
   提示框在顶部
  button>

  <button type="button" 
          class="btn btn-default" 
          data-toggle="tooltip" 
          data-placement="bottom" 
          data-original-title="提示框在底部">
  提示框在底部             
  button>

  <button type="button" 
          class="btn btn-default" 
          data-toggle="tooltip" 
          data-placement="right" 
          data-original-title="提示框居右">
  提示框居右      
  button>

  <h3>链接制作的提示框h3>
  <a class="btn btn-primary" 
     data-toggle="tooltip" 
     data-placement="left" 
     title="提示框居左">
     提示框居左
  a>

  <a class="btn btn-primary" 
     data-toggle="tooltip" 
     data-placement="top" 
     title="提示框在顶部">
     提示框在顶部
  a>

  <a class="btn btn-primary" 
     data-toggle="tooltip" 
     data-placement="bottom" 
     title="提示框在底部">
     提示框在底部
  a>

  <a class="btn btn-primary" 
     data-toggle="tooltip" 
     data-placement="right" 
     title="提示框在居右">
     提示框居右
  a>

  <a href="##" 
     class="btn btn-primary" 
     id="myTooltip">
     我是提示框
  a>

  <a href="##" 
     class="btn btn-primary" 
     id="myTooltip2">
     我是提示框2
  a>
  <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js">script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js">script>
  <script>


  $(function(){
      //添加提示框的事件
    $('[data-toggle="tooltip"]').tooltip();

    //能过js来更改提示框
    $('#myTooltip').tooltip({
      title:"我是一个提示框，我在顶部出现",
      placement:'top'
    });
  });
  script>

通过 title 属性的值来定义提示信息(也可以使用自定义属性 data-original-title 来设置提示信息)。
通过 data-placement 自定义属性来控制提示信息框的位置，根据四种不同的位置，data-placement具有四个值：top、right、bottom和left，分别表示提示框出现的位置在顶部、右边、底部和左边。
还有一个最重要的参数不可缺少，data-toggle=”tooltip”。

需要特别注意的是：
1、如果同时设置了 data-original-title 和 title 定义提示信息，那么 data-original-title 的优先级要高于 title。只有 data-original-title 值为空时，才会取 title 的值做为提示信息的内容。

2、Bootstrap框架中的提示框的触发方式和前面介绍的插件略有不同。不能直接通过自定义的属性 data- 来触发。必须得依赖于JavaScript的代码触发。

提示框–其他的自定义属性

提示框–JS设置参数方法

弹出框（Popover）
不同的是：弹出框除了有标题 title 以外还增加了内容 content 部分。这个在提示框中是没有的。
样式文件：
☑ LESS版本：对应的源文件是 popovers.less

<button type="button" class="btn btn-default" id="myPopover">猛击我吧button>

<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js">script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js">script>
<script>
$(function(){
  $('#myPopover').popover({
     title:"我是弹出框的标题",
     content:"我是弹出框的内容",
     placement:"right"
  });
});
script>

弹出框–弹出框的结构
弹出框Popover和提示框tooltip相比，就多了一个content内容，那么在此使用 data-content 来定义弹出框中的内容。同样可以使用或者标签来制作，
调用popover的时候，options的参数与声明式选择里以data-开头的自定义属性一样。都可以在options里设置，

<button type="button" 
          data-toggle="popover" 
          class="btn btn-default" 
          id="myPopover">
          鼠标放上显示弹出框
  button>

<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js">script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js">script>
<script>
//通过js来定义弹出框
$(function(){
    $('#myPopover').popover({
        title:"我是弹出框的标题",
        content:"我是弹出框的内容",
        placement:"top",
        trigger:"hover"
    });
});
script>

弹出框–提示框和弹出框的异同
提示框 tooltip 的默认触发事件是 hover 和 focus，而弹出框 popover 是 click
提示框 tooltip 只有一个内容(title)，而弹出框不仅可以设置标题（title）还可以设置内容(content)

提示框tooltip的模板：

<div class="tooltip" role="tooltip">
    <div class="tooltip-arrow">div>
    <div class="tooltip-inner">div>
div>

弹出框popover的模板：

<div class="popover" role="tooltip">
    <div class="arrow">div>
    
class="popover-title">
    <div class="popover-content">div>
div>