Bootstrap--JavaScript插件

最新推荐文章于 2024-04-04 01:56:42 发布

VIP文章 yananye

最新推荐文章于 2024-04-04 01:56:42 发布

阅读量638

点赞数

文章标签： html5 javascript jquery css bootstrap

本文链接：https://blog.csdn.net/yananye/article/details/119256282

版权

简介
请添加图片描述
插件的引入方式
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

最低0.47元/天解锁文章

yananye

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap--JavaScript插件

简介插件的引入方式Bootsstrap框架的所有JavaScript插件都依赖jQuery。所以必须在引入bootstrap.js或者bootstrap.min.js之前引入jQuery库。data属性关闭data属性过渡插件模态框简介模态框的实现示例<body> <div id="mymodal1" class="modal fade"> <div class="modal-d
复制链接

扫一扫