bootstrap——模态框

最新推荐文章于 2024-05-10 03:13:22 发布
最新推荐文章于 2024-05-10 03:13:22 发布
阅读量2.3k 收藏 4
点赞数
分类专栏： Bootsrap 文章标签： bootstrap html javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ys_chy/article/details/124559976
版权

目录

模态框  类似js中alert();

1.模态框的主样式：modal

2.模态框的代码最好是直接作为body的子元素，而不是后代元素

3.模态框的区域：

4.与Bootstrap.js中的相关属性

5.Bootstrap.css

 模态框的实现流程

案例：订单页面

模态框  类似js中alert();

1.模态框的主样式：modal

2.模态框的代码最好是直接作为body的子元素，而不是后代元素

3.模态框的区域：

        （1）modal声明层  div.modal
        （2）modal-dialog窗口声明层  div.modal-dialog
        （3）modal-content 内容声明层  div.modal-conetnt
                        modal-header  头部
                        modal-body    身体
                        modal-foot    尾部

4.与Bootstrap.js中的相关属性

                data-backdrop = "false"  控制模态框的遮罩层点击不关闭模态框
                data-keyboard = "true" 控制模态框按键盘的esc键关闭
                data-dismiss="modal" 控制模态框手动点击关闭

5.Bootstrap.css

               fade 淡入淡出

 模态框的实现流程

                1.有按钮
                    data-toggle   识别该按钮控制模态框
                    data-target   通过锚链接的设计找到指定的模态框
                2.有模态框的布局代码

案例：订单页面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<!-- 支持手机端 -->
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<!-- css -->
		<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
		<!-- js -->
		<script src="js/jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			.navbar-collapse {
				flex-grow: 0;
			}

			.form-group {
				width: 280px;
				margin: 0 auto;
			}
			/* 设置表格字体垂直居中 */
			.table tr td{
				vertical-align: middle;
				text-align: center;
			}
		</style>
	</head>
	<body>
		
		<!-- 设计一个模态框实现订单页面 -->
		<!-- Modal -->
		<div class="modal fade" id="orderModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
		  <div class="modal-dialog modal-lg" role="document">
		    <div class="modal-content">
		      <div class="modal-header">
		        <h5 class="modal-title" id="exampleModalLongTitle">结算页</h5>
		        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
		          <span aria-hidden="true">&times;</span>
		        </button>
		      </div>
		      <div class="modal-body">
		        <form>
		          <div class="form-row">
		            <div class="form-group col-md-6">
		              <label for="inputEmail4">Email</label>
		              <input type="email" class="form-control" id="inputEmail4" placeholder="Email">
		            </div>
		            <div class="form-group col-md-6">
		              <label for="inputPassword4">Password</label>
		              <input type="password" class="form-control" id="inputPassword4" placeholder="Password">
		            </div>
		          </div>
		          <div class="form-group">
		            <label for="inputAddress">Address</label>
		            <input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
		          </div>
		          <div class="form-group">
		            <label for="inputAddress2">Address 2</label>
		            <input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
		          </div>
		          <div class="form-row">
		            <div class="form-group col-md-6">
		              <label for="inputCity">City</label>
		              <input type="text" class="form-control" id="inputCity">
		            </div>
		            <div class="form-group col-md-4">
		              <label for="inputState">State</label>
		              <select id="inputState" class="form-control">
		                <option selected>Choose...</option>
		                <option>...</option>
		              </select>
		            </div>
		            <div class="form-group col-md-2">
		              <label for="inputZip">Zip</label>
		              <input type="text" class="form-control" id="inputZip">
		            </div>
		          </div>
		          <div class="form-group">
		            <div class="form-check">
		              <input class="form-check-input" type="checkbox" id="gridCheck">
		              <label class="form-check-label" for="gridCheck">
		                Check me out
		              </label>
		            </div>
		          </div>
		          <button type="submit" class="btn btn-primary">Sign in</button>
		        </form>
				
				
				
				
		      </div>
		      <div class="modal-footer">
		        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
		        <button type="button" class="btn btn-primary">确认订单</button>
		      </div>
		    </div>
		  </div>
		</div>
		
		
		
		
		
		
		
		
		
		

		<!-- 导航条的设置 -->
		<nav class="navbar navbar-expand-lg navbar-light bg-light">
			<!-- 固定容器 -->
			<div class="container">
				<a class="navbar-brand" href="#">您好！欢迎来到屌丝商城</a>
				<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup"
					aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
					<span class="navbar-toggler-icon"></span>
				</button>
				<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
					<div class="navbar-nav">
						<a class="nav-item nav-link active" href="#">首页 <span class="sr-only">(current)</span></a>
						<a class="nav-item nav-link" href="#">注册</a>
						<a class="nav-item nav-link" href="#">登录</a>
						<a class="nav-item nav-link disabled" href="#">我的购物车</a>
					</div>
				</div>
			</div>
		</nav>


		<!-- 利用栅格系统实现搜索区域，左侧列表，轮播图，热门书籍 -->
		<div class="container">
			<!-- 第一行  row  start-->
			<div class="row" style="margin-top: 10px;">
				<div class="col">
					<div class="jumbotron">
						<!-- 表单组件 -->
						<form action="" method="post">
							<div class="form-group">
								<!-- 输入框组 -->
								<div class="input-group mb-3">
									<input type="text" class="form-control" placeholder="书籍名"
										aria-label="Recipient's username" aria-describedby="button-addon2">
									<div class="input-group-append">
										<button class="btn btn-primary" type="button" id="button-addon2">搜索</button>
									</div>
								</div>
							</div>
						</form>
					</div>
				</div>
			</div><!-- 第一行row  end -->

			<!-- 第二行  左3右9 -->
			<div class="row">
				<div class="col-md-3 col-12">
					<!-- 列表组的核心样式  list-group -->
					<div class="accordion" id="accordionExample">
						<div class="card">
							<div class="card-header" id="headingOne">
								<h5 style="cursor: pointer;" class="mb-0 " data-toggle="collapse"
									data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
									书籍分类
								</h5>
							</div>

							<div id="collapseOne" class="collapse show" aria-labelledby="headingOne"
								data-parent="#accordionExample">
								<div class="list-group">
									<button type="button" class="list-group-item list-group-item-action ">
										爱情
									</button>
									<button type="button" class="list-group-item list-group-item-action">恐怖</button>
									<button type="button"
										class="list-group-item list-group-item-action active">悬疑</button>
									<button type="button" class="list-group-item list-group-item-action">修鬼</button>
									<button type="button" class="list-group-item list-group-item-action">修鬼</button>
									<button type="button" class="list-group-item list-group-item-action">修鬼</button>
									<button type="button" class="list-group-item list-group-item-action">修鬼</button>
									<button type="button" class="list-group-item list-group-item-action">修鬼</button>
									<button type="button" class="list-group-item list-group-item-action"
										disabled>穿越</button>
								</div>
							</div>
						</div>

					</div>
					<!-- ---------------------------- -->
				</div>
				<div class="col-md-9 col-12">
					<!-- 购物车 -->
					<table class="table table-hover">
						<tr class="bg-primary text-white">
							<td><input type="checkbox">全选</td>
							<td>商品名称</td>
							<td>图片</td>
							<td>商品单价</td>
							<td>商品数量</td>
							<td>商品总价</td>
							<td>操作</td>
						</tr>
						<tr>
							<td><input type="checkbox"></td>
							<td>黄金手铐</td>
							<td><img src="img/bookList/1.png" alt=""></td>
							<td>&yen;999</td>
							<td>
								<div style="width: 100px;" class="input-group mb-3">
									<div class="input-group-append">
										<button class="btn btn-outline-secondary" type="button"
											id="button-addon2">-</button>
									</div>
									<input type="text" class="form-control" value="1"
										aria-label="Recipient's username" aria-describedby="button-addon2">
									<div class="input-group-append">
										<button class="btn btn-outline-secondary" type="button"
											id="button-addon2">+</button>
									</div>
								</div>
							</td>
							<td>&yen;999</td>
							<td>
								<button type="button" class="btn btn-danger">删除</button>
								<button type="button" class="btn btn-warning">修改</button>
							</td>
						</tr>
						<tr>
							<td><input type="checkbox"></td>
							<td>黄金手铐</td>
							<td><img src="img/bookList/1.png" alt=""></td>
							<td>&yen;999</td>
							<td>
								<div style="width: 100px;" class="input-group mb-3">
									<div class="input-group-append">
										<button class="btn btn-outline-secondary" type="button"
											id="button-addon2">-</button>
									</div>
									<input type="text" class="form-control" value="1"
										aria-label="Recipient's username" aria-describedby="button-addon2">
									<div class="input-group-append">
										<button class="btn btn-outline-secondary" type="button"
											id="button-addon2">+</button>
									</div>
								</div>
							</td>
							<td>&yen;999</td>
							<td>
								<button type="button" class="btn btn-danger">删除</button>
								<button type="button" class="btn btn-warning">修改</button>
							</td>
						</tr>
						<tr>
							<td><input type="checkbox"></td>
							<td>黄金手铐</td>
							<td><img src="img/bookList/1.png" alt=""></td>
							<td>&yen;999</td>
							<td>
								<div style="width: 100px;" class="input-group mb-3">
									<div class="input-group-append">
										<button class="btn btn-outline-secondary" type="button"
											id="button-addon2">-</button>
									</div>
									<input type="text" class="form-control" value="1"
										aria-label="Recipient's username" aria-describedby="button-addon2">
									<div class="input-group-append">
										<button class="btn btn-outline-secondary" type="button"
											id="button-addon2">+</button>
									</div>
								</div>
							</td>
							<td>&yen;999</td>
							<td>
								<button type="button" class="btn btn-danger">删除</button>
								<button type="button" class="btn btn-warning">修改</button>
							</td>
						</tr>
					</table>

					<p class="text-center">
						<button class="btn btn-danger  btn-outline-info">清空购物车</button>
						<button class="btn btn-success">继续购物</button>
						<button class="btn btn-warning" data-toggle = "modal" data-target = "#orderModal">立即结算</button>
					</p>



					<!-- 分页 -->
					<nav aria-label="Page navigation example">
						<ul class="pagination" style="padding-left: 40%;">
							<li class="page-item">
								<a class="page-link" href="#" aria-label="Previous">
									<span aria-hidden="true">&laquo;</span>
									<span class="sr-only">Previous</span>
								</a>
							</li>
							<li class="page-item"><a class="page-link" href="#">1</a></li>
							<li class="page-item"><a class="page-link" href="#">2</a></li>
							<li class="page-item"><a class="page-link" href="#">3</a></li>
					  <li class="page-item">
								<a class="page-link" href="#" aria-label="Next">
									<span aria-hidden="true">&raquo;</span>
					    <span class="sr-only">Next</span>
								</a>
							</li>
						</ul>
					</nav>


				</div>
			</div>





			<!-- 第三行  版权信息 start -->
			<div class="row" style="margin: 20px 0px;border-top: 1px solid gainsboro;">
				<div class="col">
					<div class="text-center">&copy;所有版权信息归卓京教育所有</div>
				</div>
			</div>
			<!-- 第三行  版权信息  end-->

		</div>



	</body>
</html>

小羊持续开发
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
bootstrap模态框
shijiaolong0的博客
02-18 127
&lt;!DOCTYPE html&gt; &lt;html&gt;     &lt;head&gt;         &lt;meta charset="utf-8" /&gt;         &lt;title&gt;&lt;/title&gt;         &lt;link rel="stylesheet" href="css/bootstra
bootstrap之模态框
catherine_sfy的博客
03-01 411
模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。 ...
Bootstrap <基础三十二>模态框（Modal）插件
05-18 444
模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。 如果您想要单独引用该插件的功能，那么您需要引用modal.js。或者，正如Bootstrap 插件概览一章中所提到，您可以引用bootstrap.js或压缩版的bootstrap.min.js。 用法 您可以切换模态框（...
Bootstrap v3 之模态框的使用
yusuhbdybxbdhj的博客
06-29 854
首先在网页文件中引入bootstrap的三个文件，分别是jquery、js、css这三个文件。此时实现模态框打开的两种方式就都实现了！此时打开模态框功能就实现了。这里建议使用第一种方法！
Bootstrap 显示模态框
最新发布
2401_84048445的博客
05-10 599
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数Java工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Java开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
Bootstrap系列之模态框（Modal）
热门推荐
老__L的博客
06-16 1万+
模态框（Modal）
Bootstrap之JavaScript的模态框(modal)使用-不离开父窗体的情况下的互动-点击按钮弹出对话框
昊虹AI笔记
10-25 2997
Bootstrap之JavaScript的模态框(modal)使用-不离开父窗体的情况下的互动-点击按钮弹出对话框
Bootstrap 5 保姆级教程（十一）：模态框 & 提示框
Flag少侠的博客
04-20 1607
提示框要写在 JavaScript 的初始化代码里: 然后在指定的元素上调用 tooltip() 方法。我们可以通过添加 .modal-sm 类来创建一个小模态框，.modal-lg 类可以创建一个大模态框。通过向元素添加 data-bs-toggle="tooltip" 来来创建提示框。类名：modal-fullscreen。默认情况下提示框显示在元素上方。类名：modal-xl。类名：modal-lg。
零基础Bootstrap入门教程(16)--模态框
程序员大阳
02-24 2880
本文目录1. 概述2. 模态框样式3. 按钮直接关联模态框4. 通过JS方法打开/关闭模态框5. 调整大小6. 动画效果7. 小结 1. 概述 模态框这个名字有点高雅了，其实就是对话框，用来弹出一个新的界面。 模态框的使用非常的场景，例如在用户管理页面，当进行用户新增时，可以点击新增按钮，弹出一个窗体供填入用户信息然后保存。 注意Bootstrap的模态框一次只能显示一个，不能在打开一个模态框后尝试继续打开第二个。 2. 模态框样式 模态框相关的样式类比较多，我个人是感觉有些过于复杂了，当然这里也不排除Bo
mb-3 bootstrap
softuse的博客
06-05 9253
问：什么是mb-0？ 最佳答案: Bootstrap具有广泛的响应边距和填充实用程序类。它们适用于所有断点： xs(< = 576px)，sm(> = 576px)，md(> = 768px)，lg(> = 992px)或xl(> = 1200px)) 这些类的格式如下： {property} {sides} – {size} for xs& ...
BootStrap的两种模态框方式
12-09
data-target=”#mymodal-data”——– id=”mymodal-data” <!--在button上绑定触发弹出层的属性--> <button class="btn btn-primary delete" data-toggle="modal" data-target="#mymodal-data" data-...
AngularJs bootstrap搭载前台框架——准备工作
10-21
Bootstrap的JavaScript插件如模态框、下拉菜单等可以通过AngularJS的指令进行封装，使得交互更加灵活。同时，利用AngularJS的数据绑定，可以轻松地实现动态UI更新。 在后续的文章中，会详细介绍如何处理AngularJS的...
前端框架利器——bootstrap
06-09
- **功能组合**：集成了一系列可复用的组件，如导航栏、轮播图、模态框等，极大地提高了开发效率。 - **JavaScript库**：内置了多个JavaScript插件，如Carousel（轮播）、Collapse（折叠）等，通过简单的数据属性...
23.0 Bootstrap 框架1
10-06
同时，Bootstrap还提供了JavaScript插件，如模态框(modal)、下拉菜单(drop-down)和滚动spy，这些功能通过引入`bootstrap.js`或其精简版`bootstrap.min.js`实现。 Bootstrap的栅格系统是其核心组件之一，它基于12列...
bootstrap3 dialog 更强大、更灵活的模态框
12-12
但nakupanda开源作者封装了一个更强大、更灵活的模态框——bootstrap3-dialog。 一、源码下载 bootstrap3-dialog git下载地址 二、效果展示 1.error警告框 2.confirm确认选择框 3.Success提示框 4.ajax加载远程...
极速掌握MySQL存储过程，开学秒室友
2401_84046635的博客
04-07 325
上述知识点，囊括了目前互联网企业的主流应用技术以及能让你成为“香饽饽”的高级架构知识，每个笔记里面几乎都带有实战内容。很多人担心学了容易忘，这里教你一个方法，那就是重复学习。打个比方，假如你正在学习 spring 注解，突然发现了一个注解@Aspect，不知道干什么用的，你可能会去查看源码或者通过博客学习，花了半小时终于弄懂了，下次又看到@Aspect 了，你有点郁闷了，上次好像在哪哪哪学习，你快速打开网页花了五分钟又学会了。从半小时和五分钟的对比中可以发现多学一次就离真正掌握知识又近了一步。
bootstrap的模态框
weixin_69031161的博客
02-07 155
<div class="modal fade" id="addModal"> <!-- 这就是一个bootstrap的模态框 --> </div> <script> let 变量 = new bootstrap.Modal(模态框盒子) 变量.show() // 让模态框显示 变量.hide() // 让模态框隐藏 </script>
Bootstrap的CSS类积累学习
昊虹AI笔记
09-04 1425
Bootstrap的CSS类积累学习
Bootstrap-03 (前台开发框架)
m0_63579794的博客
05-03 468
Bootstrap-03
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小羊持续开发

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值