如何在Bootstrap中创建选项卡式面板 [英] How to create Tabbed Panel in Bootstrap

问题描述

我需要使用哪个班级的标签面板？是否有一个？

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

标签导航+面板并在它们之间填充0 -

 < div id =dashboardheaderclass =containerstyle =padding-top ：20px;> 
< ul< ul class =nav nav-tabs tab-pane> 
< li class =active>< a href =＃> Dashboard< / a>< / li> 
< / ul> 
< / div> 
 
< div id =dashboardpanelstyle =padding-top ：0px> 
< div class =panel panel-primary containerstyle =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.pngclass =btn btn-lgrole =buttononclick =OpenDialog（）/> 
< img src =.. \..\\内容/图片/仪表板/ fgh.png类= BTN BTN-LG 角色= 按钮/> 
< img src =.. \\\Content/ Images / Dashboard / fgh.pngclass =btn btn-lgrole =button/> 
< img src =.. \\\Content/ Images / Dashboard / fgh.pngclass =btn btn-lgrole =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.pngclass =btn btn-lgrole =button/> 
< img src =.. \\\Content/ Images / Dashboard / fgh.pngclass =btn btn-lgrole =button/> 
< img src =.. \\\Content/ Images / Dashboard / fgh.pngclass =btn btn-lgrole =button/> 
< / div> 
< / div> 
< / div> 
< / div> 
< / div> 
  

什么是替代？

解决方案

我想你想要的只是普通的

---

对于V4 ，你我们希望使用 .nav-tabs class ，并调用标签JavaScript插件

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-

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

解决方案

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

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-tabs class and also invoke the tab JavaScript plugin

这篇关于如何在Bootstrap中创建选项卡式面板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！