How to use bootstrap plug-in-Bootstrap Tutorial-php.cn

How to use bootstrap plug-in

(*-*)浩

Release： 2019-07-19 10:18:50

Original

4487 people have browsed it

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 都包含了所有的插件。

Copy after login

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

Copy after login

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

Copy after login

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>

Copy after login

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!