jQuery 使 Bootstrap 3 标签响应
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25855428/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Make Bootstrap 3 Tabs Responsive
提问by Christina
Currently, when you set up tabs in Bootstrap 3, the tabs are not responsive.
目前，当您在 Bootstrap 3 中设置选项卡时，选项卡没有响应。
This:
这个：
Turns into this:
变成这样：
CSS. Fixing how it looks is easy, just removing the float, etc. at the max-width. However, the content is disjointed from the tab, so a stack of tabs will work like tabs but on smaller viewports you may or may not see the change in content.
CSS。修复它的外观很容易，只需在最大宽度处删除浮动等。但是，内容与选项卡脱节，因此一堆选项卡将像选项卡一样工作，但在较小的视口上，您可能会也可能不会看到内容的变化。
This is the basic html for making a tabbed navigation:
这是制作标签式导航的基本 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 -->
How do you turn the Tabs into the Accordion or Collapse so that it's small viewport friendly?
你如何将标签变成手风琴或折叠，以便它的小视口友好？
回答by Lee
Slack has a cool way of making tabs small viewport friendly on some of their admin pages. I made something similar using bootstrap. It's kind of a tabs → dropdown.
Slack 有一种很酷的方法，可以在他们的一些管理页面上使标签小视口友好。我使用引导程序做了类似的事情。这是一种标签→下拉菜单。
Demo: http://jsbin.com/nowuyi/1
Here's what it looks like on a big viewport:
这是在大视口上的样子：
Here's how it looks collapsed on a small viewport:
这是它在小视口上折叠起来的样子：
Here's how it looks expanded on a small viewport:
这是它在小视口上的扩展方式：
the HTML is exactly the same as default bootstrap tabs.
HTML 与默认引导选项卡完全相同。
There is a small JS snippet, which requires jquery (and inserts two span elements into the DOM):
有一个小的 JS 片段，它需要 jquery（并在 DOM 中插入两个 span 元素）：
$.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();
And then there is a lot of css (less):
然后有很多css（较少）：
@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;
}
}
}
}
回答by Christina
Bootstrap tabs are not responsive out of the box. Responsive, IMO, is a style change, changing functions is Adaptive. There are a few plugins to turn the Bootstrap 3 tabs into a Collapse component. The best and most updated one is : https://github.com/flatlogic/bootstrap-tabcollapse.
Bootstrap 选项卡没有开箱即用的响应。Responsive，IMO，是风格变化，功能变化是Adaptive。有几个插件可以将 Bootstrap 3 选项卡变成折叠组件。最好和最新的一个是：https: //github.com/flatlogic/bootstrap-tabcollapse。
Here's one way of implementing it:
这是实现它的一种方法：
DEMO: http://jsbin.com/zibani/1/
演示：http: //jsbin.com/zibani/1/
EDIT: http://jsbin.com/zibani/1/edit
编辑：http: //jsbin.com/zibani/1/edit
This turns the content into a collapse component:
这会将内容转换为折叠组件：
Dependencies:
依赖项：
- Bootstrap 3.2 css or higher but still in the 3 series
- Bootstrap 3.2 jQuery or higher but still in the 3 series
- Compatible version of bootstrap-tabcollapse.js
- Bootstrap 3.2 css 或更高但仍在 3 系列中
- Bootstrap 3.2 jQuery 或更高版本但仍在 3 系列中
- 兼容版本的 bootstrap-tabcollapse.js
HTML -- same as question with class name addition:
HTML - 与添加类名的问题相同：
<ul class="nav nav-tabs content-tabs" id="maincontent" role="tablist">
jQuery:
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 -- optional for fat fingers and active states:
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;
}
回答by hayatbiralem
There is a new one: http://hayatbiralem.com/blog/2015/05/15/responsive-bootstrap-tabs/
有一个新的：http: //hayatbiralem.com/blog/2015/05/15/responsive-bootstrap-tabs/
And also Codepen sample available here: http://codepen.io/hayatbiralem/pen/KpzjOL
以及此处提供的 Codepen 示例：http://codepen.io/hayatbiralem/pen/KpzjOL
No needs plugin. It uses just a little css and jquery.
不需要插件。它只使用了一点 css 和 jquery。
Here's a sample tabs markup:
这是一个示例标签标记：
<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>
.. and jQuery codes are also here:
.. 和 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);
回答by Federico González Brizzio
I prefer a css only scheme based on horizontal scroll, like tabs on android. This's my solution, just wrap with a class nav-tabs-responsive:
我更喜欢基于水平滚动的仅 css 方案，例如 android 上的选项卡。这是我的解决方案，只需用一个类 nav-tabs-responsive 包装：
<div class="nav-tabs-responsive">
<ul class="nav nav-tabs" role="tablist">
<li>...</li>
</ul>
</div>
And two css lines:
和两个 css 行：
.nav-tabs { min-width: 600px; }
.nav-tabs-responsive { overflow: auto; }
600px is the point over you will be responsive (you can set it using bootstrap variables)
600px 是你会响应的点（你可以使用引导变量设置它）
回答by MrTexas
Pure CSS only for nav tabs, very simple for small screens:
纯 CSS 仅用于导航选项卡，对于小屏幕非常简单：
@media (max-width: 767px) {
.nav-tabs {
min-width: 100%;
display: inline-grid;
}
}
回答by centurian
The solution is just 3 lines:
解决方案只有 3 行：
@media only screen and (max-width: 479px) {
.nav-tabs > li {
width: 100%;
}
}
..but you have to accept the idea of tabs that wrap to more lines in other dimensions.
..但是你必须接受标签在其他维度包裹更多行的想法。
Of course you can achieve a horizontal scrolling area with white-space: nowraptrick but the scrollbars look ugly on desktops so you have to write js code and the whole thing starts becoming no trivial at all!
当然，您可以通过white-space: nowrap技巧实现水平滚动区域，但是滚动条在桌面上看起来很难看，因此您必须编写 js 代码，整个事情开始变得非常重要！
