検索

ホームページ  >  記事  >  ウェブフロントエンド  >  ブートストラッププラグインの使い方

ブートストラッププラグインの使い方

(*-*)浩
(*-*)浩オリジナル
2019-07-19 10:18:504460ブラウズ

Bootstrap Data API を使用すると、ほとんどのプラグインはコードを記述せずにトリガーできます。

ブートストラッププラグインの使い方

サイトで Bootstrap プラグインを参照するには 2 つの方法があります: (推奨学習: Bootstrap ビデオ チュートリアル )

別の参照: Bootstrap の個別の *.js ファイルを使用します。一部のプラグインと CSS コンポーネントは他のプラグインに依存します。プラグインを個別に参照する場合は、まずそれらのプラグイン間の依存関係を必ず理解してください。

参照を (同時に) コンパイルします。bootstrap.js または bootstrap.min.js の縮小バージョンを使用します。 

不要尝试同时引用这两个文件，因为 bootstrap.js 和 bootstrap.min.js 都包含了所有的插件。

すべてのプラグインは jQuery に依存します。したがって、jQuery はプラグイン ファイルの前に引用符で囲む必要があります。 Bootstrap で現在サポートされている jQuery のバージョンを確認するには、bower.json にアクセスしてください。

データ属性

すべてのブートストラップ プラグインは、JavaScript コードを 1 行も記述することなく、データ属性 API を介してのみ使用できます。

これは Bootstrap のファーストクラス API であり、推奨される方法です。 また、状況によっては、この機能をオフにする必要がある場合があります。したがって、データ属性 API をオフにするメソッド、つまり、data-API 名前空間を使用してドキュメントにバインドされたイベントのブロックを解除するメソッドも提供します。次のようになります。 

$(document).off('.data-api')

特定のプラグインを閉じる必要がある場合は、以下に示すように、データ API 名前空間の前にプラグインの名前を名前空間として追加するだけです。 ##

$(document).off('.alert.data-api')
例: モーダル ボックス プラグイン

<head>
	<meta charset="utf-8"> 
	<title>Bootstrap 实例 - 模态框（Modal）插件</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>

<h2>创建模态框（Modal）</h2>
<!-- 按钮触发模态框 -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
	开始演示模态框
</button>
<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
					&times;
				</button>
				<h4 class="modal-title" id="myModalLabel">
					模态框（Modal）标题
				</h4>
			</div>
			<div class="modal-body">
				在这里添加一些文本
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">关闭
				</button>
				<button type="button" class="btn btn-primary">
					提交更改
				</button>
			</div>
		</div><!-- /.modal-content -->
	</div><!-- /.modal -->
</div>
</body>
</html>
Bootstrap に関連する技術的な記事については、

Bootstrap チュートリアル

列にアクセスして学習してください。

以上がブートストラッププラグインの使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：ブートストラップ ポップアップ ボックスにコンテンツがないのはなぜですか?次の記事：ブートストラップ ポップアップ ボックスにコンテンツがないのはなぜですか?

関連記事

続きを見る