[英]Bootstrap tabbed panel
I'm trying to figure out how to get a "tabbed panel".我想弄清楚如何获得“选项卡式面板”。 I've got a panel and a tabbed menu working just fine, but there is a gap between the panel and the tabbed nav.
我有一个面板和一个标签式菜单工作得很好,但面板和标签式导航之间存在差距。
I'm still trying to figure out this Bootstrap framework, so any guidance would be most appreciated.我仍在尝试找出这个 Bootstrap 框架,因此非常感谢任何指导。 I've enclosed a screenshot too of what it's appearing like screenshot of tabbed pane .
我还附上了一张截图,说明它看起来像tabbed pane 的截图。 I've taken out all the PHP code so it's easier to replicate.
我已经去掉了所有的 PHP 代码,所以更容易复制。
Here's the code:这是代码:
body { padding: 10px; } #exTab1 .tab-content { color: white; background-color: #428bca; padding: 5px 5px; } #exTab2 h3 { color: white; background-color: #428bca; padding: 5px 5px; } /* remove border radius for the tab */ #exTab1 .nav-pills > li > a { border-radius: 0; } /* change border radius for the tab , apply corners on top*/ #exTab3 .nav-pills > li > a { border-radius: 4px 4px 0 0; } #exTab3 .tab-content { color: white; background-color: #428bca; padding: 5px 5px; }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="exTab3" class="container"> <ul class="nav nav-tabs"> <li class="active"> <a href="#overview" data-toggle="tab"><strong>Overview</strong></a> </li> <li><a href="#assets" data-toggle="tab"><strong>Assets</strong></a> </li> <li><a href="#services" data-toggle="tab"><strong>Services</strong></a> </li> </ul> <div class="tab-content clearfix"> <div class="tab-pane active" id="overview"> <!-- Overview --> <!-- Default panel contents --> <div class="panel-heading"><i class="fa fa-user" center-block style="font-size:inherit;color:orange;"></i> Overview</div> <div class="panel-body"> <p>Your content here</p> </div> <!-- /Overview --> <div class="col-sm-4"> </div> </div> <div class="tab-pane" id="assets"> <!-- Assets --> <div class="panel-heading"><i class="fa fa-bug" center-block style="font-size:inherit;color:orange;"></i> Associated Assets</div> <div class="panel-body"> <p>Your content here</p> <!-- Table --> <!-- /Assets --> </div> </div> <div class="tab-pane" id="services"> <!-- Services --> <div class="panel-heading"><i class="fa fa-bullhorn" center-block style="font-size:inherit;color:orange;"></i> Associated Services</div> <div class="panel-body"> <p>Your content here</p> </div> </div> </div>
https://jsfiddle.net/richss/mxp8qm2a/20/ https://jsfiddle.net/richss/mxp8qm2a/20/
UPDATE更新
Dropping the working code into our "portal" the styles etc are being pulled, screenshot:将工作代码放入我们的“门户”中,正在拉取样式等,截图:
Your code almost works, you just need to add jQuery
and close assets tab <div>
before starting the services <div>
.您的代码几乎工作,你只需要添加
jQuery
和关闭标签的资产<div>
开始服务之前<div>
See working demo here https://jsfiddle.net/dLpm9hgy/2/在此处查看工作演示https://jsfiddle.net/dLpm9hgy/2/
Or here:或者在这里:
body { padding: 10px; } #exTab1 .tab-content { color: white; background-color: #428bca; padding: 5px 15px; } #exTab2 h3 { color: white; background-color: #428bca; padding: 5px 15px; } /* remove border radius for the tab */ #exTab1 .nav-pills > li > a { border-radius: 0; } /* change border radius for the tab , apply corners on top*/ #exTab3 .nav-pills > li > a { border-radius: 4px 4px 0 0; } #exTab3 .tab-content { color: white; background-color: #428bca; padding: 5px 15px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <div id="exTab3" class="container"> <ul class="nav nav-tabs"> <li class="active"> <a href="#overview" data-toggle="tab"><strong>Overview</strong></a> </li> <li><a href="#assets" data-toggle="tab"><strong>Assets</strong></a> </li> <li><a href="#services" data-toggle="tab"><strong>Services</strong></a> </li> </ul> <div class="tab-content clearfix"> <div class="tab-pane active" id="overview"> <!-- Overview --> <div class="panel panel-default"> <!-- Default panel contents --> <div class="panel-heading"><i class="fa fa-user" center-block style="font-size:inherit;color:orange;"></i> Overview</div> <div class="panel-body"> <p>...</p> </div> </div> <!-- /Overview --> <div class="col-sm-4"> </div> </div> <div class="tab-pane" id="assets"> <!-- Assets --> <div class="panel panel-default"> <!-- Default panel contents --> <div class="panel-heading"><i class="fa fa-bug" center-block style="font-size:inherit;color:orange;"></i> Associated Assets</div> <div class="panel-body"> </div> <!-- Table --> <!-- /Assets --> </div> </div> <div class="tab-pane" id="services"> <!-- Services --> <div class="panel panel-default"> <!-- Default panel contents --> <div class="panel-heading"><i class="fa fa-bullhorn" center-block style="font-size:inherit;color:orange;"></i> Associated Services</div> <div class="panel-body"> <table class="table"> <tr> <th>Below is a list of associated services for user:</th> </tr> es --> </div> <div class="tab-pane" id="4b"> </div> </div> </div> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.