Html 如何在 Bootstrap 中创建选项卡式面板
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24553105/
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
How to create Tabbed Panel in Bootstrap
提问by user3801502
Which class i need to use for tabbed panel? Is there one?
我需要将哪个类用于选项卡式面板？有吗？
i do the following and looks bad :-(
我做了以下事情，看起来很糟糕:-(
A tabbed navigation + a panel with and 0 padding between them-
一个标签式导航 + 一个面板，它们之间有 0 填充-
<div id="dashboardheader" class="container" style="padding-top: 20px;">
<ul class="nav nav-tabs tab-pane">
<li class="active"><a href="#">Dashboard</a></li>
</ul>
</div>
<div id="dashboardpanel " style="padding-top: 0px">
<div class="panel panel-primary container" style="padding-top: 30px;">
<div class="row">
<div class="col-md-offset-2 col-md-8 col-md-offset-2">
<div class="row">
<img src="..\..\Content/Images/Dashboard/fgh.png" class="btn btn-lg" role="button" onclick="OpenDialog()" />
<img src="..\..\Content/Images/Dashboard/fgh.png" class="btn btn-lg" role="button" />
<img src="..\..\Content/Images/Dashboard/fgh.png" class="btn btn-lg" role="button" />
<img src="..\..\Content/Images/Dashboard/fgh.png" class="btn btn-lg" role="button" />
</div>
</div>
</div>
<div class="row">
<div class="col-md-offset-2 col-md-8 col-md-offset-2">
<div class="row">
<img src="..\..\Content/Images/Dashboard/fgh.png" class="btn btn-lg" role="button" />
<img src="..\..\Content/Images/Dashboard/fgh.png" class="btn btn-lg" role="button" />
<img src="..\..\Content/Images/Dashboard/fgh.png" class="btn btn-lg" role="button" />
</div>
</div>
</div>
</div>
</div>
whats the alternate?
什么是替代品？
回答by KyleMit
I think what you want is just the regular bootstrap tabs
我认为你想要的只是常规的引导标签
<!-- Nav tabs -->
<ul class="nav nav-tabs" 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><a href="#messages" role="tab" data-toggle="tab">Messages</a></li>
<li><a href="#settings" role="tab" data-toggle="tab">Settings</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="home">...</div>
<div class="tab-pane" id="profile">...</div>
<div class="tab-pane" id="messages">...</div>
<div class="tab-pane" id="settings">...</div>
</div>
Demo in jsFiddle
jsFiddle 中的演示
With a little bit of styling, you can get it to look how you want:
通过一些样式，您可以让它看起来像您想要的样子：
For V4, you'll want to style with the .nav-tabsclassand also invoke the tab JavaScript plugin
对于 V4，您需要使用.nav-tabs类设置样式并调用选项卡 JavaScript 插件
回答by Andrew Scott
Here's some simple less you can add that allows you to include .nav.nav-tabsinside a .panel .panel-heading
这里有一些简单的 less 你可以添加，允许你包含.nav.nav-tabs在一个.panel .panel-heading
An example codepen : http://codepen.io/anon/pen/utGaK
一个示例代码笔：http://codepen.io/anon/pen/utGaK
IMHO it doesn't quite look as "clean" as the components are when used independently w/o additional styles..
恕我直言，它看起来并不像组件在没有其他样式的情况下独立使用时那样“干净”。
I've tested it with .panel-titletoo using .pull-righton the .nav. While it worked I found it best to add .clearfixto the header as the tabs are 1/2px too tall ATM. Should be simple to resolve it.
我已经测试过它.panel-title太使用.pull-right的.nav。虽然它有效，但我发现最好添加.clearfix到标题中，因为选项卡的 ATM 太高了 1/2 像素。解决起来应该很简单。
Here's the code I use in the above example.
这是我在上面的例子中使用的代码。
For example :
例如 ：
<div class="panel panel-default">
<div class="panel-heading">
<!-- Nav tabs -->
<ul class="nav nav-tabs" 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><a href="#messages" role="tab" data-toggle="tab">Messages</a></li>
<li><a href="#settings" role="tab" data-toggle="tab">Settings</a></li>
</ul>
</div>
<!-- Tab panes + Panel body -->
<div class="panel-body tab-content">
<div class="tab-pane active" id="home">HOME</div>
<div class="tab-pane" id="profile">PROFILE</div>
<div class="tab-pane" id="messages">MESSAGES</div>
<div class="tab-pane" id="settings">SET</div>
</div>
</div>
This is the less :
这是较少的：
// Need to compensatve for padding in panel-heading
// Must be a way to invert this
// variable - @panel-heading-padding.
@panel-heading-padding-negate: -10px -15px;
.panel {
.panel-heading {
.nav-tabs {
margin:@panel-heading-padding-negate;
border-bottom-width:0;
> li {
> a {
// re-apply the original padding
padding:@panel-heading-padding;
margin-bottom:1px;
border:solid 0 transparent;
&:hover {
border-color: transparent;
}
}
&.active > a {
&,
&:hover,
&:focused {
border:solid 0 transparent;
}
}
}
}
}
}
UPDATE
更新
I've added the following to the lidefinition and removed the margin-right& border-radiuson the > li > aso that when I pull the nav to the right of the header it fits & looks cleaner.
我在li定义中添加了以下内容并删除了margin-right& border-radius，> li > a这样当我将导航拉到标题右侧时，它适合&看起来更干净。
&:first-child > a {
border-top-left-radius:@panel-border-radius;
}
&:last-child > a {
border-top-right-radius:@panel-border-radius;
}
Here's an updated codepen : http://codepen.io/anon/pen/hJsEC
这是一个更新的代码笔：http://codepen.io/anon/pen/hJsEC
回答by Tereza Tomcova
There's a Bootsnipp snippet that does this: http://bootsnipp.com/snippets/MaA0A
有一个 Bootsnipp 片段可以做到这一点：http://bootsnipp.com/snippets/MaA0A
It contains CSS to allow embedding tabs in the panel header like this:
它包含 CSS 以允许在面板标题中嵌入选项卡，如下所示：
<div class="panel with-nav-tabs panel-default">
<div class="panel-heading">
<ul class="nav nav-tabs">
<!--...-->
</ul>
</div>
<div class="panel-body">
<div class="tab-content">
<!--...-->
</div>
</div>
</div>
Result:
结果：
回答by user1633272
Found a simple styling solution based on Andrew Scott's html structure:
根据 Andrew Scott 的 html 结构找到了一个简单的样式解决方案：
.panel-heading>.nav-tabs {
border-bottom: none;
margin-bottom: -10px;
}
回答by Ajay Rathore
<ul class="nav nav-tabs ">
<li class="active" > <a href="#One" data-target="#One" data-toggle="tab"> One </a> </li>
<li ><a href="#Two" data-target="#Two" data-toggle="tab"> Two </a> <li>
</ul>
<div class="tab-content clearfix">
<div class="tab-pane fade in active" id="One">
This is one
</div>
<div class="tab-pane fade " id="Two">
This is Two
</div>
</div>
