Home > Article > Web Front-end > How to use bootstrap plug-in

How to use bootstrap plug-in

(*-*)浩Original: 2019-07-19 10:18:504460browse

Using the Bootstrap Data API, most plug-ins can be triggered without writing any code.

##There are two ways for sites to reference the Bootstrap plug-in: (recommended learning: Bootstrap video tutorial )

Separate reference: Use individual *.js files of Bootstrap. Some plugins and CSS components depend on other plugins. If you reference plugins individually, make sure you understand the dependencies between those plugins first.

Compile (simultaneously) references: use bootstrap.js or a minified version of bootstrap.min.js.

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

All plugins depend on jQuery. So jQuery must be quoted before the plugin file. Please visit bower.json to view the jQuery version currently supported by Bootstrap.

data attribute

You can use all Bootstrap plugins just

through the data attribute API without writing a single line of JavaScript code. This is the first-class API in Bootstrap and should be your preferred method.

Then again, there may be situations where this feature needs to be turned off. Therefore, we also provide a method to turn off the data attribute API, that is, to unblock the event bound to the document with the data-api namespace. Just like the following:

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

If you need to close a specific plug-in, you only need to add the name of the plug-in as the namespace before the data-api namespace, as shown below:

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

Example: Modal box plug-in

<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>

For more technical articles related to Bootstrap, please visit the

Bootstrap Tutorial column to learn!

The above is the detailed content of How to use bootstrap plug-in. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Why does the bootstrap pop-up box have no content?Next article：Why does the bootstrap pop-up box have no content?

See more

How to use bootstrap plug-in

Related articles