Bootstrap基本教程

Bootstrapプラグイン

Bootstrapヒントツールプラグイン Bootstrapスクロールリスナープラグイン

Bootstrapタブ（Tab）プラグイン

タブ(Tab)は Bootstrapナビゲーション要素の章で紹介された通り、data属性を組み合わせることで、タブインターフェースを簡単に作成できます。このプラグインを使用して、タブ、カプセルスタイルのタブ、またはドロップダウンメニューのタブに内容を配置できます。

プラグインの機能を単独で参照したい場合は、以下を参照する必要があります tab.js。または、以下のように Bootstrapプラグイン概要第[章数]で述べたように、以下を参照できます bootstrap.js または圧縮版の bootstrap.min.js

使い方

タブを有効にする方法は以下の2通りです：

data属性を使用して：以下のdata属性を追加する必要があります data-toggle="tab" または data-toggle="pill" アンカーテキストリンクに追加してください。
を以下に nav および nav-tabs クラスを以下に ul 、Bootstrapが適用されますタブスタイルに追加します nav および nav-pills クラスを以下に ul 、Bootstrapが適用されますカプセルスタイル
```
<ul>
　　　　-/a></li>
　　　　...
</ul>
```
JavaScriptを通じて：JavaScriptを使用してタブを有効にする方法は以下の通りです：
```
$('#myTab a').click(function (e) {
　　
　　
)
```
```
//　

//　

//　

//　
2
```

　　　　/div>
　　　　/div>
　　　　/div>
　　　　/div>
</div>

オンラインサンプル

サンプル

<!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">-8">　
	<title>Bootstrap サンプル　-　/title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<ul　id="myTab"　class="nav　nav-tabs">
	
		-toggle="tab">
			　
		</a>
	</li>
	<li><a　href="#ios"　data-toggle="tab">iOS</a></li>
	<li　class="dropdown">
		<a　href="#"　id="myTabDrop1"　class="dropdown-toggle"　
		　　　data-　
			/
		</a>
		<ul　class="dropdown-menu"　role="menu"　aria-labelledby="myTabDrop1">
			tabindex="-1"　data-toggle="tab">jmeter</a></li>
			<li><a　href="#ejb"　tabindex="-1"　data-toggle="tab">ejb</a></li>
		</ul>
	</li>
</ul>
<div　id="myTabContent"　class="tab-content">
	<div　class="tab-pane　fade　in　active"　id="home">
		<p>基本的なチュートリアルウェブサイトは、最新のウェブ技術を提供するウェブサイトで、このサイトでは無料でウェブサイト構築に関する技術文書を提供し、ウェブ技術の愛好家が迅速に初歩を学び、自分自身のウェブサイトを構築するのをサポートします。初心者でも早く飛び立ち、早く仕事に就ける——基礎を学ぶことが、より遠くへ行くための鍵です。/p>
	</div>
	<div　class="tab-pane　fade"　id="ios">
		<p>iOSは、アップル社が開発およびリリースしたモバイルオペレーティングシステムで、最初は　2007　年でiPhone、iPod　Touch、Apple　
			TV。iOSはOS　Xから派生しており、Darwinプラットフォームを共有しています。OS　Xはアップルコンピュータで使用されるオペレーティングシステムであり、iOSはアップルのモバイル版です。/p>
	</div>
	<div　class="tab-pane　fade"　id="jmeter">
		<p>jMeterは、オープンソースのテストソフトウェアです。それは　100%　純　Javaアプリケーションで、負荷とパフォーマンステストに使用されます。</p>
	</div>
	<div　class="tab-pane　fade"　id="ejb">
		<p>Enterprise　Java　Beans(EJB)は、高度な拡張性と強力な企業レベルのアプリケーションを開発するための開発アーキテクチャで、JBOSS、Web　Logicなどのアプリケーションサーバーでデプロイされます。2EE　上。
		</p>
	</div>
</div>
</body>
</html>

テストをしてみる‹/›

以下の結果が表示されます：

data-

　　　　-/a></li>
　　　　
</ul>

　　　　/div>
　　　　
</div>
<script>
　　　　
　　　　　　　　
　　　　)
</script>

オンラインサンプル

サンプル

<!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">-8">　
	<title>Bootstrap サンプル　-　/title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<ul　id="myTab"　class="nav　nav-tabs">
	
		-/a>
	</li>
	<li><a　href="#ios"　data-toggle="tab">iOS</a></li>
	<li　class="dropdown">
		<a　href="#"　id="myTabDrop1"　class="dropdown-toggle"　
		　　　data-/
		</a>
		<ul　class="dropdown-menu"　role="menu"　aria-labelledby="myTabDrop1">
			tabindex="-1"　data-toggle="tab">
				/a>
			</li>
			<li><a　href="#ejb"　tabindex="-1"　data-toggle="tab">
				/a>
			</li>
		</ul>
	</li>
</ul>
<div　id="myTabContent"　class="tab-content">
	<div　class="tab-pane　fade　in　active"　id="home">
		<p>基本的なチュートリアルウェブサイトは、最新のウェブ技術を提供するウェブサイトで、このサイトでは無料でウェブサイト構築に関する技術文書を提供し、ウェブ技術の愛好家が迅速に初歩を学び、自分自身のウェブサイトを構築するのをサポートします。初心者でも早く飛び立ち、早く仕事に就ける——基礎を学ぶことが、より遠くへ行くための鍵です。/p>
	</div>
	<div　class="tab-pane　fade"　id="ios">
		<p>iOSは、アップル社が開発およびリリースしたモバイルオペレーティングシステムで、最初は　2007　年でiPhone、iPod　Touch、Apple　
			TV。iOSはOS　Xから派生しており、Darwinプラットフォームを共有しています。OS　Xはアップルコンピュータで使用されるオペレーティングシステムであり、iOSはアップルのモバイル版です。/p>
	</div>
	<div　class="tab-pane　fade"　id="jmeter">
		<p>jMeterは、オープンソースのテストソフトウェアです。それは　100%　純　Javaアプリケーションで、負荷とパフォーマンステストに使用されます。</p>
	</div>
	<div　class="tab-pane　fade"　id="ejb">
		<p>Enterprise　Java　Beans(EJB)は、高度な拡張性と強力な企業レベルのアプリケーションを開発するための開発アーキテクチャで、JBOSS、Web　Logicなどのアプリケーションサーバーでデプロイされます。2EE　上。
		</p>
	</div>
</div>
<script>
	
		1
	});
</script>
</body>
</html>

テストをしてみる‹/›

以下の結果が表示されます：

事件

以下の表は、タブ（Tab）プラグインで使用されるイベントを示しています。これらのイベントは、関数内でフックとして使用できます。

事件	説明	サンプル
	このイベントはタブが表示されるときにトリガーされますが、新しいタブが表示される前にトリガーされる必要があります。以下のを使用して、表示されるタブを特定します。 event.target および event.relatedTarget を使用して、アクティブなタブと前回アクティブなタブを特定します。	$('a[data-toggle="tab"]').on('show.bs.tab', function(e) { 　　e.target　//　アクティブなタブ　　e.relatedTarget　//　前一个アクティブなタブ )
shown.bs.tab	このイベントはタブが表示されたときにトリガーされますが、すでに表示されているタブがある必要があります。以下のを使用して、表示されるタブと新しいタブを特定します。 event.target および event.relatedTarget を使用して、アクティブなタブと前回アクティブなタブを特定します。	$('a[data-toggle="tab"]').on('shown.bs.tab',　function　(e)　{ 　　e.target　//　アクティブなタブ　　e.relatedTarget　//　前一个アクティブなタブ )

オンラインサンプル

以下のサンプルは、タブ(Tab)プラグインのイベントの使用法を示しています。このサンプルでは、現在と前回訪問したタブを表示します：

オンラインサンプル

サンプル

<!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">-8">　
	<title>Bootstrap サンプル　-　タブ(Tab)プラグインのイベント</title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<hr>
	<p　class="active-tab"><strong>アクティブなタブ</strong>：<span></span></p>
	<p　class="previous-tab"><strong>前一个アクティブなタブ</strong>：<span></span></p>
<hr>
<ul　id="myTab"　class="nav　nav-tabs">
	<li　class="active"><a　href="#home"　data-toggle="tab">
		基础教程网</a></li>
	<li><a　href="#ios"　data-toggle="tab">iOS</a></li>
	<li　class="dropdown">
		<a　href="#"　id="myTabDrop1"　class="dropdown-toggle"　
		　　　data-toggle="dropdown">
			Java　<b　class="caret"></b></a>
		<ul　class="dropdown-menu"　role="menu"　aria-labelledby="myTabDrop1">
			tabindex="-1"　data-toggle="tab">jmeter</a></li>
			<li><a　href="#ejb"　tabindex="-1"　data-toggle="tab">ejb</a></li>
		</ul>
	</li>
</ul>
<div　id="myTabContent"　class="tab-content">
	<div　class="tab-pane　fade　in　active"　id="home">
		<p>基本的なチュートリアルウェブサイトは、最新のウェブ技術を提供するウェブサイトで、このサイトでは無料でウェブサイト構築に関する技術文書を提供し、ウェブ技術の愛好家が迅速に初歩を学び、自分自身のウェブサイトを構築するのをサポートします。初心者でも早く飛び立ち、早く仕事に就ける——基礎を学ぶことが、より遠くへ行くための鍵です。/p>
	</div>
	<div　class="tab-pane　fade"　id="ios">
		<p>iOSは、アップル社が開発およびリリースしたモバイルオペレーティングシステムで、最初は　2007　年でiPhone、iPod　Touch、Apple　
			TV。iOSはOS　Xから派生しており、Darwinプラットフォームを共有しています。OS　Xはアップルコンピュータで使用されるオペレーティングシステムであり、iOSはアップルのモバイル版です。/p>
	</div>
	<div　class="tab-pane　fade"　id="jmeter">
		<p>jMeterは、オープンソースのテストソフトウェアです。それは　100%　純　Javaアプリケーションで、負荷とパフォーマンステストに使用されます。</p>
	</div>
	<div　class="tab-pane　fade"　id="ejb">
		<p>Enterprise　Java　Beans(EJB)は、高度な拡張性と強力な企業レベルのアプリケーションを開発するための開発アーキテクチャで、JBOSS、Web　Logicなどのアプリケーションサーバーでデプロイされます。2EE　上。
		</p>
	</div>
</div>
<script>
$(function(){
	$('a[data-toggle="tab"]').on('shown.bs.tab',　function　(e)　{
		//　現在アクティブなタブの名前を取得します
		var　activeTab　=　$(e.target).text();　
		//　前一个激活のタブの名前を取得します
		var　previousTab　=　$(e.relatedTarget).text();　
		$(".active-tab　span").html(activeTab);
		$(".previous-tab　span").html(previousTab);
	});
});
</script>
</body>
</html>

テストをしてみる‹/›

以下の結果が表示されます：

Bootstrapヒントツールプラグイン Bootstrapスクロールリスナープラグイン