data-offset-top=125 当页面向上滚动超过125时 ul则不会跟着页面继续滚动。

nav-tabs.affix {top：30px}  则是定义ul的页面位置。

前者是设置滚动距离，后者是页面top距离

模态弹出框（Modals）

<!-- 按钮触发模态框 -->

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">开始演示模态框</button>

• data-toggle="modal"，HTML5 自定义的 data 属性 data-toggle 用于打开模态窗口。

• data-target="#myModal"，您想要在页面上加载的模态框的目标

  <!-- 模态框（Modal） -->

  <div class="modal fade"  id="myModal"  tabindex="-1" role="dialog"  aria-labelledby="myModalLabel" aria-hidden="true">   

• modal fade 当模态框被切换时，它会引起内容淡入淡出。

• aria-labelledby="myModalLabel"，该属性引用模态框的标题。

• aria-hidden="true" 用于保持模态窗口不可见，直到触发器被触发为止（比如点击在相关的按钮上）。
  

   <div class="modal-dialog">  

   <div class="modal-content">        

     <div class="modal-header">       

       <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 

• data-dismiss="modal"，是一个自定义的 HTML5 data 属性。在这里它被用于关闭模态窗口。

• class="close"，close 是一个 CSS class，用于为模态窗口的关闭按钮设置样式。

           <h4 class="modal-title" id="myModalLabel">模态框（Modal）标题</h4>         

   </div>        

    <div class="modal-body">在这里添加一些文本</div>     

       <div class="modal-footer">          

      <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>           

     <button type="button" class="btn btn-primary">提交更改</button>  

          </div> 

        </div>

 </div> 

  </div>

Affix 插件可以对任何元素进行固定定位，其中比较简单的方法，就是通过自定义属性 data 来触发。其主要包括两个参数：<br> <br> 1、data-spy：取值 affix，表示元素固定不变的。<br> <br> 2、data-offset：整数值，比如 90，表示元素 top 和 bottom 的值都是 90px，其包括两种方式：data-offset-top 和 data-offset-bottom。<br> <br> data-offset-top 用来设置元素距离顶部的距离。比如 90，表示元素距离顶部 90px，当用户从顶部向下拖动滚动条，当滚动的距离大于 90px 时，affix 元素不再滚动，就会固定在浏览器窗口顶部。<br> data-offset-bottom 刚好与 data-offset-top 相反。<br> 具体使用如下：<br> <br> <div data-spy="affix" data-offset="90">affix元素</div><br> 分开设置 data-offset 值方式：<br> <br> <div data-spy="affix" data-offset-top="90" data-offset-bottom="150">affix元素</div> 请在宽屏模式下查看效果。据我测试下来，使用声明式，就算设置了 data-offset-top 的值也会失效，需要在样式中给 affix 设置一个top值，与 data-offset-top 值相等。data-offset-bottom一样。

按钮状态切换 使用 data-toggle 属性还可以激活按钮的行为状态，实现在激活和未激活之间进行状态切换。例如，下面代码可以激活按钮行为特性，单击时将按钮激活，再单击可以让按钮恢复到默认状态： <button type="button" data-toggle="button" class="btn btn-primary">确认</button>

使用按钮组来模拟复选按钮和模拟单选按钮是一样的，具有同等效果，也是通过在按钮组上自定义data-toggle="buttons"来实现。唯一不同的是，将input[type="radio"]换成input[type="checkbox"]

模拟单选择按钮是通过一组按钮来实现单选择操作。使用按钮组来模拟单选按钮组，能够让设计更具个性化，可以定制出更美观的单选按钮组。

可以通过按钮组自定义属性"data-toggle="buttons">，如下代码：

<div class="btn-group" data-toggle="buttons">

        <label for="male" class="btn btn-primary">

            <input type="radio" name="options" id="male">男

        </label>

        <label for="female" class="btn btn-primary">

            <input type="radio" name="options" id="female">女

        </label>

        <label for="unknow" class="btn btn-primary">

            <input type="radio" name="options" id="unknow">未知

        </label>

    </div>

JavaScript触发警告框 $(function(){    $("#close").on("click",function(){        $(this).alert("close");    }); });

关闭按钮不在 div.alert 容器内时，只要给关闭元素定义了data-target属性（如果是链接元素还可以通过href属性）,而且属性值与div.alert容器的id一致，关闭元素放在容器外也可以关闭警告框。来看一个简单的示例： <div class="alert alert-warning" role="alert" id="myAlert">    <h4>谨防被骗</h4>    <p>请确认您转账的信息是你的亲朋好友，不要轻意相信不认识的人...</p> </div> <button type="button" data-target="#myAlert" class="btn btn-danger" data-dismiss="alert">关闭</button>

触发警告框，需要在关闭按钮上设置自定义属性data-dismiss="alert"。

从之前的学习可知，弹出框中HTML自定义的 data 属性和提示框中的自定义的 data 属性基本相同，只不过在其基础上增加了一个 data-content 属性，用来设置弹出框的内容。其实两插件也有略微的不同： 提示框 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>    <h3 class="popover-title"></h3>    <div class="popover-content"></div> </div>

Bootstrap框架中触发弹出框和提示框一样不能直接通过HTML的自定义data属性来触发。需要依赖于JavaScript脚本。 最简单的触发方式如下： html代码： <button type="button"        class="btn btn-default"        data-toggle="popover"        data-placement="left"        title="提示框居左"        data-content="我是弹出框的内容">        猛击我吧 </button> js代码： $(function(){    $('[data-toggle="popover"]').popover(); }); 注意：上面这种方法注意要使用 data- 设置弹出框的属性。 使用JS设置参数： html代码： <button type="button"          class="btn btn-default"          id="myPopover">          猛击我吧 </button> 除此之外，也可以单独指定一个元素，在该元素上调用提示框，并且可能通过JavaScript的各种参数来实现，无需定义一些data属性，如： $(function(){    $('#myPopover').popover({        title:"我是弹出框的标题",        content:"我是弹出框的内容",        placement:"top"    }); })

弹出框(Popover)仅从外表上看，和前面介绍的提示框（Tooltip）长得差不多， 不同的是：弹出框除了有标题 title 以外还增加了内容 content 部分。这个在提示框中是没有的。 <script> $(function(){  $('#myPopover').popover({     title:"我是弹出框的标题",     content:"我是弹出框的内容",     placement:"right"  }); }); </script>

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

<a class="btn btn-primary" data-toggle="tooltip" data-placement="top" title="我是一个提示框，我在顶部出现">我是提示框1</a>

<script>

        $(function(){

            $('[data-toggle]').tooltip();

        })

    </script>