首頁 >web前端 >Bootstrap教程 >bootstrap外掛怎麼用

bootstrap外掛怎麼用

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

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

bootstrap外掛怎麼用

網站引用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