ブートストラッププラグインの使い方-ブートストラップのチュートリアル-php.cn

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

(*-*)浩

リリース： 2019-07-19 10:18:50

オリジナル

4462 人が閲覧しました

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 サイトの他の関連記事を参照してください。