使Bootstrap 3标签页具有响应式设计

Question

目前，在Bootstrap 3中设置选项卡时，选项卡不具有响应性。

这个：

变成了这样：

CSS。修复外观很容易，只需在max-width处删除浮动等即可。但是，内容与选项卡分离，因此一堆选项卡将像选项卡一样工作，但在较小的视口上，您可能会看不到内容的更改。

---

这是制作选项卡导航的基本HTML：

      <!--begin tabs going in wide content -->
       <ul class="nav nav-tabs" id="maincontent" role="tablist">
          <li class="active"><a href="#home" role="tab" data-toggle="tab">Home</a></li>
          <li><a href="#profile" role="tab" data-toggle="tab">Profile</a></li>
          <li class="dropdown">
             <a href="#" id="myTabDrop1" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
             <ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
                <li><a href="#dropdown1" tabindex="-1" role="tab" data-toggle="tab">@fat</a></li>
                <li><a href="#dropdown2" tabindex="-1" role="tab" data-toggle="tab">@mdo</a></li>
             </ul>
          </li>
       </ul><!--/.nav-tabs.content-tabs -->


       <div class="tab-content">

          <div class="tab-pane fade in active" id="home">
             <p>Home Content : ...</p>
          </div><!--/.tab-pane -->

          <div class="tab-pane fade" id="profile">
             <p>Profile Content : ...</p>
          </div><!--/.tab-pane -->

          <div class="tab-pane fade" id="dropdown1">
             <p>Dropdown1 - ...</p>
          </div><!--/.tab-pane -->

          <div class="tab-pane fade" id="dropdown2">
             <p>Dropdown 2 - ...</p>
          </div><!--/.tab-pane -->

       </div><!--/.tab-content -->

如何将选项卡转换为手风琴或折叠式，以便在小视口中更加友好？

- Christina

Answer 1

Slack在其某些管理页面上以一种很酷的方式使选项卡适应小视口。我使用Bootstrap制作了类似的东西。它有点像选项卡→下拉菜单。

演示： http://jsbin.com/nowuyi/1

这是在大视口上的显示效果：

这是在小视口上折叠后的外观:

这是在小视口上展开的外观:

HTML与默认的Bootstrap选项卡完全相同。

有一个小JS片段，需要jquery（并将两个span元素插入DOM）：

$.fn.responsiveTabs = function() {
  this.addClass('responsive-tabs');
  this.append($('<span class="glyphicon glyphicon-triangle-bottom"></span>'));
  this.append($('<span class="glyphicon glyphicon-triangle-top"></span>'));

  this.on('click', 'li.active > a, span.glyphicon', function() {
    this.toggleClass('open');
  }.bind(this));

  this.on('click', 'li:not(.active) > a', function() {
    this.removeClass('open');
  }.bind(this));
};

$('.nav.nav-tabs').responsiveTabs();

然后还有很多CSS（Less）：

@xs: 768px;


.responsive-tabs.nav-tabs {
  position: relative;
  z-index: 10;
  height: 42px;
  overflow: visible;
  border-bottom: none;

  @media(min-width: @xs) {
    border-bottom: 1px solid #ddd;
  }

  span.glyphicon {
    position: absolute;
    top: 14px;
    right: 22px;
    &.glyphicon-triangle-top {
      display: none;
    }
    @media(min-width: @xs) {
      display: none;
    }
  }

  > li {
    display: none;
    float: none;
    text-align: center;

    &:last-of-type > a {
      margin-right: 0;
    }

    > a {
      margin-right: 0;
      background: #fff;
      border: 1px solid #DDDDDD;

      @media(min-width: @xs) {
        margin-right: 4px;
      }
    }

    &.active {
      display: block;
      a {
        @media(min-width: @xs) {
          border-bottom-color: transparent; 
        }
        border: 1px solid #DDDDDD;
        border-radius: 2px;
      }
    }

    @media(min-width: @xs) {
      display: block;
      float: left;
    }

  }

  &.open {

    span.glyphicon {
      &.glyphicon-triangle-top {
        display: block;
        @media(min-width: @xs) {
          display: none;
        }
      }
      &.glyphicon-triangle-bottom {
        display: none;
      }
    }

    > li {
      display: block;

      a {
        border-radius: 0;
      }

      &:first-of-type a {
        border-radius: 2px 2px 0 0;
      }
      &:last-of-type a {
        border-radius: 0 0 2px 2px;
      }
    }
  }
}

- Lee

---

我真的希望能够使用Bootstrap 5使其正常工作。但是我无法使其正常工作。这是我更喜欢的方法。https://codepen.io/ThePixelPixie/pen/JjNxPog - Laura Sage

Answer 2

Bootstrap标签页默认不具备响应式功能。在我看来，响应式是一种样式变化，而改变功能则是自适应的表现。有一些插件可以将Bootstrap 3标签页转换为折叠组件。最好和最新的一个是：https://github.com/flatlogic/bootstrap-tabcollapse。

这里介绍一种实现方法:

演示：http://jsbin.com/zibani/1/

编辑：http://jsbin.com/zibani/1/edit

这将内容转换为折叠组件：

依赖项：

1. Bootstrap 3.2 css或更高版本但仍在3系列中
2. Bootstrap 3.2 jQuery或更高版本但仍在3系列中
3. 与 bootstrap-tabcollapse.js 兼容的版本

HTML -- 与问题相同，只需添加类名：

       <ul class="nav nav-tabs content-tabs" id="maincontent" role="tablist">

jQuery：

$(document).ready(function() {

    // DEPENDENCY: https://github.com/flatlogic/bootstrap-tabcollapse
    $('.content-tabs').tabCollapse();

    // initialize tab function
    $('.nav-tabs a').click(function(e) {
        e.preventDefault();
        $(this).tab('show');
    });

});

CSS -- 为了防止手指粗大和激活状态而选用：

.panel-heading {
    padding: 0
}
.panel-heading a {
    display: block;
    padding: 20px 10px;
}
.panel-heading a.collapsed {
    background: #fff
}
.panel-heading a {
    background: #f7f7f7;
    border-radius: 5px;
}
.panel-heading a:after {
    content: '-'
}
.panel-heading a.collapsed:after {
    content: '+'
}
.nav.nav-tabs li a,
.nav.nav-tabs li.active > a:hover,
.nav.nav-tabs li.active > a:active,
.nav.nav-tabs li.active > a:focus {
    border-bottom-width: 0px;
    outline: none;
}
.nav.nav-tabs li a {
    padding-top: 20px;
    padding-bottom: 20px;
}
.tab-pane {
    background: #fff;
    padding: 10px;
    border: 1px solid #ddd;
    margin-top: -1px;
}

- Christina

---

不确定为什么您拒绝了我的编辑。您发布的两个链接已经失效了。这是一个可用的演示链接：http://jsfiddle.net/obliviga/gpavt9h0/ - Ralph David Abernathy

JSBin出了问题。我已经将它们标记为私有，但现在应该是公开的。 - Christina

原帖中的演示链接和编辑链接都无效，但是@ralph-david-abernathy的演示按预期工作！ - Sergey

Answer 3

我更喜欢基于水平滚动的纯CSS方案，就像Android上的选项卡一样。这是我的解决方案，只需用类nav-tabs-responsive包装：

<div class="nav-tabs-responsive">
  <ul class="nav nav-tabs" role="tablist">
    <li>...</li>
  </ul>
</div>

还有两行css代码：

.nav-tabs { min-width: 600px; }
.nav-tabs-responsive { overflow: auto; }

600px是响应式的分界点（你可以使用Bootstrap变量来设置它）

- Federico González Brizzio

---

视觉效果不是最好的解决方案，但它的工作表现还不错，几乎可以立即集成到任何网页中。 - Mario

如果您有很多选项卡，则“600px”最小宽度可能不足。否则，选项卡仍将换行，您可能需要增加此值。 - Aaron Hudon

Answer 4

这里有一个新的例子：http://hayatbiralem.com/blog/2015/05/15/responsive-bootstrap-tabs/

还有Codepen示例可用，网址在这里：http://codepen.io/hayatbiralem/pen/KpzjOL

不需要插件。它只使用了一些CSS和jQuery。

这是一个示例标签页的标记：

<ul class="nav nav-tabs nav-tabs-responsive">
    <li class="active">
        <a href="#tab1" data-toggle="tab">
            <span class="text">Tab 1</span>
        </a>
    </li>
    <li class="next">
        <a href="#tab2" data-toggle="tab">
            <span class="text">Tab 2</span>
        </a>
    </li>
    <li>
        <a href="#tab3" data-toggle="tab">
            <span class="text">Tab 3</span>
        </a>
    </li>
    ...
</ul>

..这里也有 jQuery 代码:

(function($) {

  'use strict';

  $(document).on('show.bs.tab', '.nav-tabs-responsive [data-toggle="tab"]', function(e) {
    var $target = $(e.target);
    var $tabs = $target.closest('.nav-tabs-responsive');
    var $current = $target.closest('li');
    var $parent = $current.closest('li.dropdown');
        $current = $parent.length > 0 ? $parent : $current;
    var $next = $current.next();
    var $prev = $current.prev();
    var updateDropdownMenu = function($el, position){
      $el
        .find('.dropdown-menu')
        .removeClass('pull-xs-left pull-xs-center pull-xs-right')
        .addClass( 'pull-xs-' + position );
    };

    $tabs.find('>li').removeClass('next prev');
    $prev.addClass('prev');
    $next.addClass('next');

    updateDropdownMenu( $prev, 'left' );
    updateDropdownMenu( $current, 'center' );
    updateDropdownMenu( $next, 'right' );
  });

})(jQuery);

- hayatbiralem

---

很好，但是从用户体验的角度来看，这种实现只有在标题是连续的情况下才有意义，比如日、周、月等。否则，如果标题是任意的，用户将会迷失方向。 - Ralph David Abernathy

但是如果我只想针对sm和xs，怎么办？目前它只能检测到xs。 - ZeroOne

你可以将 max-width: 479px 更改为 max-width: 991px，或者编写更多代码来动态适应，例如 nav-tabs-responsive--xs、nav-tabs-responsive--sm 等。 - hayatbiralem

Answer 5

纯CSS导航选项卡，非常适合小屏幕：

@media (max-width: 767px) {
     .nav-tabs {
         min-width: 100%;
         display: inline-grid;
     }
}

- MrTexas

Answer 6

解决方案只需要3行代码：

@media only screen and (max-width: 479px) {
   .nav-tabs > li {
      width: 100%;
   }
}

但你必须接受在其他维度上换行的标签的想法。

当然，您可以使用white-space: nowrap技巧实现水平滚动区域，但桌面设备上的滚动条看起来很丑陋，因此您必须编写JS代码，整个过程开始变得不再简单！

- centurian

---

你也可以加上 "nav-justified" 类（用于响应式）；因此你的 UL 标签类将看起来像这样：<ul class="nav nav-tabs nav-justified">...</ul> - Jennifer Miranda Beuses

Answer 7

我已经在AngularJS中创建了一个指令，支持ng-bootStrap组件。

https://angular-ui.github.io/bootstrap/#!#tabs

这里我分享我实现的代码

[https://jsfiddle.net/k1r02/u6gpv4dc/][1]

  [1]: https://jsfiddle.net/k1r02/u6gpv4dc/

- mQuiroz