ホームページ > 記事 > ウェブフロントエンド > ブートストラップにはどのような種類のナビゲーションがありますか?
ブートストラップにはどのような種類のナビゲーションがありますか?
- (*-*)浩オリジナル
- 2019-07-12 10:37:354406ブラウズ
Bootstrap は、基本的なラベル ベースおよびカプセル ラベル ナビゲーション、積み重ねまたは垂直ラベル ベースおよびカプセル ラベル ナビゲーション、ラベルおよびカプセル ラベルに基づくドロップダウン メニューなど、さまざまなナビゲーションを作成できます。ナビゲーション リストを使用してスタック ナビゲーションを作成し、JavaScript を使用してクリック可能なナビゲーション (さまざまな方向) を作成します。
基本タグ (推奨学習: Bootstrap ビデオ チュートリアル )
2 つの CSS クラス 。 nav および .nav-tabs は、基本的なタブベースのナビゲーションを作成するために使用されます。 Bootstrap バージョン v2.0.1 では、CSS クラス .nav のスタイルは行番号 2176 ～ 2220 で宣言されています (これには関連するスタイルも含まれています)。行番号 2222 ～ 2267 には、.nav-tabs のスタイルが含まれています。
次の例は、ブートストラップを使用して基本的なタグベースのナビゲーションを作成する方法を示しています。
<div class="container"> <div class="row"> <div class="span6"> <ul class="nav nav-tabs"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Tutorials</a></li> <li><a href="#">Practice Editor </a></li> <li><a href="#">Gallery</a></li> <li><a href="#">Contact</a></li> </ul> </div> </div> </div>
基本的なカプセル タグ
Bootstrap を使用して基本的なタグベースのナビゲーションを作成する方法を理解すると、基本的なカプセルベースのタグ ナビゲーションの作成は、簡単そうに思えます。 。ここでは .nav-tabs クラスを使用する代わりに、.nav-pills クラスを使用します。 .nav-pill のスタイルは、bootstrap.css の 2222 ～ 2224 行目にあり、bootstrap.css の 2268 ～ 2280 行目 (最後のインスタンスで使用) で再度繰り返されます。
次の例は、基本的なカプセルタブベースのナビゲーションを作成する方法を示しています。
カプセル タグに基づいたブートストラップの基本ナビゲーションの例
<div class="container"> <div class="row"> <div class="span8"> <ul class="nav nav-pills"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Tutorials</a></li> <li><a href="#">Practice Editor </a></li> <li><a href="#">Gallery</a></li> <li><a href="#">Contact</a></li> </ul> </div> </div> </div>
スタックまたは垂直タグ
タブ付きナビゲーションの場合に基づいてスタックまたは垂直タグを作成するには、次の手順を実行する必要があります。 .nav-stacked、.nav、および .nav-tabs クラスをマークアップに追加します。これにより、デフォルトで水平タブベースのナビゲーションが作成されます。行番号 2281 ～ 2309 には .nav-stacked スタイルが含まれています。ここに一例を示します。
ブートストラップのスタック ナビゲーションまたは垂直タブ ベースのナビゲーションの例
<div class="container"> <div class="row"> <div class="span8"> <ul class="nav nav-tabs nav-stacked"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Tutorials</a></li> <li><a href="#">Practice Editor </a></li> <li><a href="#">Gallery</a></li> <li><a href="#">Contact</a></li> </ul> </div> </div> </div>
タブ ベースのドロップダウン メニュー
タブ ベースのドロップダウン メニューを作成できます。ブートストラップ メニュー ナビゲーションを使用してダウンします。 .nav クラスと .nav-tabs クラスに加えて、.dropdown、.dropdown-toggle、.dropdown-menu、.caret という 4 つの CSS クラスが必要です。 bootstrap.css (バージョン 2.0.1) では、行番号 1545 ～ 1547 には .dropdown クラス スタイルが含まれ、行番号 1548 ～ 1553 には .dropdown-toggle スタイルが含まれ、行番号 1576 ～ 1632 には .dropdown-menu スタイルが含まれます。行番号 1554 ～ 1575 には .caret スタイルが含まれています。デモの例では、別の CSS クラス .divider も使用されていますが、必須ではありません。
もちろん、HTML ファイル内で 3 つの JavaScript ファイル (jquery.js、bootstrap-dropdown.js、および application.js) を参照する必要があります。これらはすべて docs/assets/js/ フォルダー内にあります。
以下は例です。
ブートストラップのラベルベースのドロップダウン メニュー ナビゲーションの例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap 基于标签的下拉菜单的导航实例</title>
<meta name="description" content="Bootstrap 基于标签的下拉菜单的导航实例">
<link href="../bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap2.2.css" rel="stylesheet">
<style type="text/css">
.container {
margin-top: 200px;
}
</style>
</head>
<body>
<div>
<div>
<div>
<ul class="nav nav-tabs">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a data-toggle="dropdown" href="#">FrontEnd<b></b></a>
<ul>
<li><a href="#">Twitter Bootstrap</a></li>
<li><a href="#">Google Plus API</a></li>
<li><a href="#">HTML5</a></li>
<li></li>
<li><a href="#">Examples</a></li>
</ul>
</li>
<li><a data-toggle="dropdown" href="#">BackEnd<b class="caret bottom-up"></b></a>
<ul class="dropdown-menu bottom-up pull-right">
<li><a href="#">PHP</a></li>
<li><a href="#">MySQL</a></li>
<li><a href="#">PostgreSQL</a></li>
<li></li>
<li><a href="#">Live Demos</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/jquery.js"></script>
<script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-dropdown.js"></script>
<script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/application.js"></script>
</body>
</html>
ブートストラップ関連の技術記事の詳細については、ブートストラップ チュートリアル列にアクセスして学習してください。
以上がブートストラップにはどのような種類のナビゲーションがありますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。