gpt4 book ai didi

javascript - Bootstrap 标签面板

转载 作者:太空宇宙 更新时间:2023-11-04 01:22:21 25 4
gpt4 key购买 nike

我正在尝试弄清楚如何获得“选项卡式面板”。我有一个面板和一个选项卡式菜单,工作正常,但面板和选项卡式导航之间存在间隙。

我仍在尝试找出这个 Bootstrap 框架,因此非常感谢任何指导。我也附上了它的截图 screenshot of tabbed pane .我已取出所有 PHP 代码,以便更容易复制。

代码如下:

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/

更新

将工作代码放入我们的“门户”,样式等正在被拉取,截图:

result

最佳答案

您的代码几乎可以工作,您只需添加 jQuery并关闭 Assets 选项卡 <div>在启动服务之前<div> .

请在此处查看工作演示 https://jsfiddle.net/dLpm9hgy/2/

或在这里:

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>

关于javascript - Bootstrap 标签面板,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48788442/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com