Question

我需要将哪个类用于标签面板？有吗？

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

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

什么是替补？

Answer 1

我认为你想要的只是常规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

通过一些造型，你可以看到你想要的样子：

对于V4 ，您需要使用.nav-tabs class设置样式并调用tab JavaScript plugin

Answer 2

您可以添加一些简单的内容，以便将.nav.nav-tabs纳入.panel .panel-heading

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

恕我直言，它并不像＃34;清洁＆＃34;因为组件是独立使用时没有其他样式..

我已使用.panel-title上的.pull-right使用.nav对其进行了测试。虽然它有效但我发现最好将.clearfix添加到标题中，因为标签是1 / 2px太高的ATM。应该很容易解决它。

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

例如：

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

更新

我已将以下内容添加到li定义中，并删除了margin-right＆amp; border-radius上> li > a，以便当我将导航按到标题右侧时，它适合＆amp;看起来更干净。

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

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

结果：

Answer 4

基于Andrew Scott的html结构找到了一个简单的样式解决方案：

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

Answer 5

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

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

5 个答案:

Demo in jsFiddle

更新