如何在 Bootstrap 中创建选项卡式面板

新手上路,请多包涵

我需要为选项卡式面板使用哪个类?有吗?

我做了以下并且看起来很糟糕:-(

选项卡式导航 + 面板之间有 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>

什么是替代品?

原文由 user3801502 发布,翻译遵循 CC BY-SA 4.0 许可协议

阅读 341
2 个回答

我想你想要的只是常规的 引导程序选项卡

<!-- 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中的演示

通过一点点样式,您可以让它看起来像您想要的那样:

截屏


对于 V4 ,您需要使用 .nav-tabs 进行样式设置,并调用 选项卡 JavaScript 插件

原文由 KyleMit 发布,翻译遵循 CC BY-SA 3.0 许可协议

这是您可以添加的一些简单的 less,它允许您将 .nav.nav-tabs 包含在 .panel .panel-heading

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

恕我直言,它看起来并不像组件在没有其他样式的情况下独立使用时那样“干净”。

我已经在 .panel-title 上使用 .pull-right 测试了它 .nav 。虽然它起作用了,但我发现最好将 .clearfix 添加到标题中,因为这些选项卡的 ATM 太高了 12 像素。解决起来应该很简单。

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

例如 :

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

这是较少的:

 // 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;
                    }
                }
            }
        }
    }
}

更新

I’ve added the following to the li definition and removed the margin-right & border-radius on the > li > a so that when I pull the nav在标题的右侧,它适合并且看起来更干净。

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

这是一个更新的代码笔: http ://codepen.io/anon/pen/hJsEC

原文由 Andrew Scott 发布,翻译遵循 CC BY-SA 3.0 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题