目前,在Bootstrap 3中设置选项卡时,选项卡没有响应。
此:
变成这样:
CSS。修复它的外观很容易,只需在最大宽度处移除浮子等。但是,内容与选项卡脱节,因此一堆选项卡将像标签一样工作,但在较小的视口上,您可能会看到或未看到内容的变化。
这是制作标签式导航的基本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 -->
如何将标签变成手风琴或折叠,以便它的视口友好?
答案 0 :(得分:28)
Bootstrap选项卡无法立即响应。响应,IMO,是一种风格变化,变化的功能是自适应的。有一些插件可以将Bootstrap 3选项卡转换为Collapse组件。最好和最新的一个是:https://github.com/flatlogic/bootstrap-tabcollapse。
以下是实现它的一种方法:
这会将内容转换为折叠组件:
依赖关系:
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;
}
答案 1 :(得分:27)
Slack有一种很酷的方法可以在一些管理页面上使标签小视口友好。我用bootstrap做了类似的东西。它是一种标签→下拉列表。
以下是在小视口上看起来如何折叠:
以下是在小视口上展示的方式:
HTML与默认引导程序选项卡完全相同。
有一个小的JS片段,需要jquery(并在DOM中插入两个span元素):
.xpath("//span[text()='Repo3']/following::div[1]")
然后有很多css(少):
$.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();
答案 2 :(得分:11)
有一个新的: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);
答案 3 :(得分:10)
我更喜欢基于水平滚动的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是您响应的重点(您可以使用引导变量设置它)
答案 4 :(得分:0)
仅用于导航标签的纯CSS,对于小屏幕非常简单:
@media (max-width: 767px) {
.nav-tabs {
min-width: 100%;
display: inline-grid;
}
}
答案 5 :(得分:0)
解决方案只有3行:
@media only screen and (max-width: 479px) {
.nav-tabs > li {
width: 100%;
}
}
..但是您必须接受选项卡的概念,这些选项卡可以包裹其他维度的更多行。
当然,您可以使用white-space: nowrap
技巧来实现水平滚动区域,但是滚动条在台式机上看起来很难看,因此您必须编写js代码,整个过程变得不那么简单了!
答案 6 :(得分:0)
我已经在ng-bootStrap组件支持的agularJS中创建了一条指令
https://angular-ui.github.io/bootstrap/#!#tabs
在这里我分享我实现的代码
[https://jsfiddle.net/k1r02/u6gpv4dc/] [1]
[1]: https://jsfiddle.net/k1r02/u6gpv4dc/