bootstrap-tabdrop.js是一款非常有用的Bootstrap响应式tabs选项卡转下拉列表框jQuery插件。当你的tabs选项卡在一行中显示不完的时候，该jQuery插件会将多出的选项卡隐藏到下拉列表中。

HTML结构

该jQuery插件的基本HTML结构采用Bootstrap的标签页的HTML结构：

<div class="tabbable ">
  <ul class="nav nav-tabs">
    <li class="active"><a href="#tab1" data-toggle="tab">Section 1</a></li>
    <li><a href="#tab2" data-toggle="tab">Section 2</a></li>
    ......
  </ul>
  <div class="tab-content">
    <div class="tab-pane active" id="tab1">
      <p>I'm in Section 1.</p>
    </div>
    <div class="tab-pane" id="tab2">
      <p>Howdy, I'm in Section 2.</p>
    </div>
    ......
  </div>
</div>            
              

JAVASCRIPT

在页面加载完毕后在.nav-tabs和.nav-pills上调用该jQuery插件。

$('.nav-pills, .nav-tabs').tabdrop()             
              

配置参数

方法

• .tabdrop(options)：初始化一个 tab drop 对象。
• .tabdrop('layout')：检测选项卡是否合适在一行显示。

在线预览    源码下载