首頁 > 文章 > web前端 > bootstrap外掛怎麼用

bootstrap外掛怎麼用

(*-*)浩原創: 2019-07-19 10:18:504451瀏覽

利用 Bootstrap 資料 API（Bootstrap Data API），大部分的外掛程式都可以在不寫任何程式碼的情況下被觸發。

網站引用Bootstrap 外掛程式的方式有兩種：（推薦學習：Bootstrap影片教學 )

單獨引用：使用Bootstrap 的個別的*.js 檔案。一些插件和 CSS 元件依賴其他插件。如果您單獨引用插件，請先確保弄清楚這些插件之間的依賴關係。

編譯（同時）引用：使用 bootstrap.js 或壓縮版的 bootstrap.min.js。

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

所有的外掛都依賴 jQuery。所以必須在插件檔案之前引用 jQuery。 請造訪 bower.json 查看 Bootstrap 目前支援的 jQuery 版本。

data 屬性

你可以只透過data屬性API就能使用所有的Bootstrap插件，無需寫一行JavaScript程式碼。 這是Bootstrap中的一等API，也應該是你的首選方式。

話又說回來，在某些情況下可能需要將此功能關閉。因此，我們也提供了關閉data 屬性API 的方法，即解除以data-api為命名空間並綁定在文件上的事件。就像下面這樣：

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

如需關閉一個特定的插件，只需要在data-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教學欄位進行學習！

以上是bootstrap外掛怎麼用的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：bootstrap為什麼彈出框沒有內容下一篇：bootstrap為什麼彈出框沒有內容

看更多