logo标签列表

如何在Bootstrap中创建标签面板

htmltwitter-bootstraptwitter-bootstrap-3
23

我需要使用哪个类来制作选项卡面板？是否有相应的类存在？

我尝试了下面的代码，但效果不佳 :-(

一个带有选项卡导航和面板的组合，并且它们之间没有任何填充。

    <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>

有什么替代方案吗？

2
请提供一个 Bootply。 - Pete TNT
这个没有“类”，因为类是用户输入的，可以是任何你想要的。 - Sam Denton
https://gist.github.com/mnewt/4228037 - Rachel Gallen
http://jsfiddle.net/7WuNf/ - Rachel Gallen
"an overpriced template"--https://wrapbootstrap.com/theme/tabs-control-tabbed-form-responsive-WB066F8J6 -> “一个过于昂贵的模板”--https://wrapbootstrap.com/theme/tabs-control-tabbed-form-responsive-WB066F8J6 - user3801502
5个回答
69

我认为你想要的只是普通的Bootstrap选项卡

<!-- 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>

在 jsFiddle 上的演示

稍微调整一下样式，就可以让它看起来符合你的需求：

screenshot

对于 V4 版本，你需要使用 .nav-tabs 类进行样式设置，并且还要调用 选项卡 JavaScript 插件

这就是我做的...它只是导航和选项卡，而不是选项卡面板。你有检查过这个吗？ https://wrapbootstrap.com/theme/tabs-control-tabbed-form-responsive-WB066F8J6 - user3801502
如何让您使用的类fa fa-user正常工作？@KyleMit - ASEN
@ASEN，不确定我理解你的问题。你看过这个fiddle吗？你尝试过 <i class="fa fa-user"></i> 吗？ - KyleMit
哈哈，抱歉，我不是故意表现得不感激的...你提供的一切都对我非常有用，只是我无法正确地设置盒子阴影。基本上我的“tab-pane”盒子阴影会重叠在选定的标签上。由于代码是使用本地数据库和一些jQuery生成的，所以很难复制。让我看看能否粘贴一张我的渲染HTML和CSS样式的图片。 - shreddish
@KyleMit 看了你创建的 JSFiddle 和我的 HTML、CSS，它们在我看来完全一样（显然我漏掉了什么）。逻辑上我遇到的问题是，你的 div "tab-panes" 的阴影为什么不会覆盖所选标签。根据你的 CSS，它看起来应该会这样做。 - shreddish
显示剩余3条评论
6

以下是一些简单的 less 代码，可以让你在 .panel .panel-heading 内包含 .nav.nav-tabs。

示例代码：http://codepen.io/anon/pen/utGaK

个人认为，与独立使用组件时相比，它看起来不够“干净”。

我也使用了 .pull-right 在 .nav 上测试了 .panel-title。虽然它可以正常工作，但我发现最好将 .clearfix 添加到标题中，因为选项卡当前高度有 1/2 像素的误差。这应该很容易解决。

以下是我在上面示例中使用的代码。

例如：

<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>

这是 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;                         
                    }
                }
            }
        }
    }
}

更新

我已经将以下内容添加到li的定义中，并移除了> li > a上的margin-right和border-radius，以便当我将导航拉到标题的右侧时，它可以适合并且看起来更加清晰。

            &:first-child > a { 
                border-top-left-radius:@panel-border-radius;
            }
            &:last-child > a {
                border-top-right-radius:@panel-border-radius;
            }

这是一个更新后的 CodePen：http://codepen.io/anon/pen/hJsEC

3

有一个Bootsnipp代码片段可以实现这个功能：http://bootsnipp.com/snippets/MaA0A

它包含了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>

结果：

选项卡面板示例

1
那300行CSS的解决方案非常不吸引人！我之前也在那里，所以我明白你为什么会被投票降低...抱歉。 - Phung D. An
1

我发现了一种基于Andrew Scott的HTML结构的简单样式解决方案：

.panel-heading>.nav-tabs {
    border-bottom: none;
    margin-bottom: -10px;
}
1

  <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>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接