Bootstrap--JavaScript插件

最新推荐文章于 2024-06-24 09:41:50 发布

原创

最新推荐文章于 2024-06-24 09:41:50 发布 · 732 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #javascript #jquery #css #bootstrap

本文详细介绍了Bootstrap框架中的JavaScript插件，包括过渡插件、模态框、选项卡、旋转轮播和滚动监听。讲解了如何使用data属性、JavaScript操作这些组件，以及各种示例和注意事项，帮助开发者更好地理解和应用Bootstrap的JavaScript功能。

简介
请添加图片描述
插件的引入方式
Bootsstrap框架的所有JavaScript插件都依赖jQuery。所以必须在引入bootstrap.js或者bootstrap.min.js之前引入jQuery库。

data属性

关闭data属性

过渡插件

请添加图片描述

模态框

简介
请添加图片描述
模态框的实现

示例

<body>
		<div id="mymodal1" class="modal fade"><!--生成一个宽为100%灰色背景-->
			<div class="modal-dialog"><!--居中生成一个白色窗口-->
				<div class="modal-content"><!--模态框内容-->
					<div class="modal-header"><!--头部内容-->
						<button class="close" data-dismiss="modal">&times;</button>
						<h4 class="modal-title">我的模态框</h4>
					</div>
					<div class="modal-body">你好</div><!--主体内容-->
					<div class="modal-footer"><!--底部内容-->
						<button class="btn btn-primary">确定</button>
					</div>
				</div>
			</div>
		</div>
</body>

请添加图片描述

	<script type="text/javascript">
			$("#mymodal1").modal();//初始化页面时，弹出模态框
		</script>

运行结果
在这里插入图片描述
注意事项
请添加图片描述
通过点击按钮弹出模态框

示例

<button class="btn btn-primary" data-toggle="modal" data-target="#mymodal2">弹出</button>
		<div id="mymodal2" class="modal fade"><!--生成一个宽为100%灰色背景-->
			<div class="modal-dialog"><!--居中生成一个白色窗口-->
				<div class="modal-content"><!--模态框内容-->
					<div class="modal-header"><!--头部内容-->
						<button class="close" data-dismiss="modal">&times;</button>
						<h4 class="modal-title">我的模态框</h4>
					</div>
					<div class="modal-body">你好</div><!--主体内容-->
					<div class="modal-footer"><!--底部内容-->
						<button class="btn btn-primary">确定</button>
					</div>
				</div>
			</div>
		</div>

运行结果
在这里插入图片描述

示例

<a href="#mymodal2" data-toggle="modal" class="btn btn-primary">弹出</a>
		<div id="mymodal2" class="modal fade"><!--生成一个宽为100%灰色背景-->
			<div class="modal-dialog"><!--居中生成一个白色窗口-->
				<div class="modal-content"><!--模态框内容-->
					<div class="modal-header"><!--头部内容-->
						<button class="close" data-dismiss="modal">&times;</button>
						<h4 class="modal-title">我的模态框</h4>
					</div>
					<div class="modal-body">你好</div><!--主体内容-->
					<div class="modal-footer"><!--底部内容-->
						<button class="btn btn-primary">确定</button>
					</div>
				</div>
			</div>
		</div>

运行结果和上面一样

模态框尺寸
请添加图片描述
示例

	<!--模态框尺寸-->
		<button class="btn btn-primary" data-toggle="modal" data-target="#mymodal3">弹出大</button>
		<div id="mymodal3" class="modal fade"><!--生成一个宽为100%灰色背景-->
			<div class="modal-dialog bs-example-modal-lg"><!--居中生成一个白色窗口-->
				<div class="modal-content modal-lg"><!--模态框内容-->
					<div class="modal-header"><!--头部内容-->
						<button class="close" data-dismiss="modal">&times;</button>
						<h4 class="modal-title">我的模态框</h4>
					</div>
					<div class="modal-body">你好</div><!--主体内容-->
					<div class="modal-footer"><!--底部内容-->
						<button class="btn btn-primary">确定</button>
					</div>
				</div>
			</div>
		</div>
		<button class="btn btn-primary" data-toggle="modal" data-target="#mymodal4">弹出小</button>
		<div id="mymodal4" class="modal fade"><!--生成一个宽为100%灰色背景-->
			<div class="modal-dialog bs-example-modal-sm"><!--居中生成一个白色窗口-->
				<div class="modal-content modal-sm"><!--模态框内容-->
					<div class="modal-header"><!--头部内容-->
						<button class="close" data-dismiss="modal">&times;</button>
						<h4 class="modal-title">我的模态框</h4>
					</div>
					<div class="modal-body">你好</div><!--主体内容-->
					<div class="modal-footer"><!--底部内容-->
						<button class="btn btn-primary">确定</button>
					</div>
				</div>
			</div>
		</div>

运行结果点击弹出大
在这里插入图片描述

点击弹出小

模态框data属性
请添加图片描述
示例测试data-backdrop属性

	<!--演示属性-->
		<button class="btn btn-primary" data-toggle="modal" data-target="#mymodal5">弹出</button>

最低0.47元/天解锁文章