本文介绍了如何在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 ,你我们希望使用,并调用
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中创建选项卡式面板的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!