3

我是 twitter bootstrap(tb) 的新手，觉得它很有趣。我正在为其中一个客户端 prj 使用 TB in play 框架。

是否可以使用看起来像的结构

如果我使用 data-toggle="dropdown"，则下拉菜单有效。下面是我使用的代码

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>Example tabbsable nav with Twitter Bootstrap</title> 
<meta name="description" content="Example tabable nav with Twitter Bootstrap">
<link href="@routes.Assets.at("stylesheets/bootstrap.css")" rel="stylesheet">
</head>
<body>
<div class="container-fluid">
<div class="row-fluid">
<div class="span4">
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="tab dropdown" href="#pane1">
Abonnement&nbsp;og&nbsp;bestillinger
<b class="caret"></b>
</a>
<ul class="dropdown-menu">  
<li><a href="#">Behandle abonnement</a></li>  
<li><a href="#">Vis bestillinger</a></li>  
<li><a href="#">Innportering av reserverte nummer</a></li>  
</ul>  
</li>   
<li class=""><a href="#2" data-toggle="tab">Section 2</a></li>  
<li class=""><a href="#3" data-toggle="tab">Section 3</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane" id="pane1">
<p>You are watching 1.</p>
</div>
<div class="tab-pane" id="2">
<p>You are watching 2.</p>
</div>
<div class="tab-pane" id="3">
<p>You are watching 3.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="@routes.Assets.at("javascripts/jquery.js")"></script>  
<script src="@routes.Assets.at("javascripts/bootstrap-dropdown.js")"></script>  
<script src="@routes.Assets.at("javascripts/application.js")"></script> 
<script src="@routes.Assets.at("javascripts/bootstrap-tab.js")"></script> 
</body>
</html>

我的要求是当我单击 Abonnement og bestillinger 时，pane1 内容 - 您正在观看 1 应该显示。

提前致谢

4

1 回答 1

1

你可以试试这样的..

<ul class="nav nav-tabs">
<li class="dropdown">
  <a class="pull-right" data-toggle="dropdown"><span class="caret"></span></a><a class="pull-left" data-toggle="tab" href="#pane1">Abonnement&nbsp;og&nbsp;bestillinger</a>
  <ul class="dropdown-menu">  
  <li><a href="#">Behandle abonnement</a></li>  
  <li><a href="#">Vis bestillinger</a></li>  
  <li><a href="#">Innportering av reserverte nummer</a></li>  
  </ul>  
</li>   
<li class=""><a href="#2" data-toggle="tab">Section 2</a></li>  
<li class=""><a href="#3" data-toggle="tab">Section 3</a></li>
</ul>

但是，存在格式/间距问题。您可能需要自定义 CSS 样式。

Demo on Bootply

于 2013-06-11T10:51:45.947 回答