3

Twitter のブートストラップ (tb) は初めてで、面白いと思います。クライアントprjの1つに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 content - You are looking 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 に答える