bootstrap弹窗模态组件怎么使用
bootstrap组件的介绍以及使用方法自学前端想要了解了解
http://www.bootstrap.cn/doc/read/219.html 建议到官网查阅官方文档，导入坐标后复制粘贴，根据需求进行简单修改就能用了
- 你可以看下这个问题的回答https://ask.csdn.net/questions/783204
- 这篇博客你也可以参考下：【Bootstrap】使用Bootstrap制作简单的登陆页面
- 除此之外, 这篇博客: Bootstrap编写的一个响应式网页中的 Bootstrap： 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
- Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。
- 学过css和html的特别容易上手
- 快速开发 Web 应用程序和网站的前端框架
下载完成后解压放在项目中即可，如下面项目目录
然后这便是代码(图片网上随便找的)！
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap 101 Template</title> <link href="css/bootstrap.css" rel="stylesheet"> <!--[if lt IE 9]> <script src="js/html5shiv.min.js"></script> <script src="js/respond.js"></script> <![endif]--> <style type="text/css"> #im1{ height: 45px; width: 70px; } #im2{ height: 230px; width: 160px; } hr{ border: #00007f 1px solid; } </style> </head> <body> <div class="container"> <div class="row bg-info"> <div class="col-xs-1 "><img id="im1" src="img/logo.PNG"></a></div> <div class="col-xs-1 navbar-brand"><a href="#">HOME</a></div> <div class="col-xs-1 navbar-brand"><a href="#">MTML</a></div> <div class="col-xs-1 navbar-brand"><a href="#">CSS</a></div> <div class="col-xs-1"> <a href="#" class="dropdown-toggle navbar-brand" data-toggle="dropdown">JS <span class="caret"></span> </a> <ul class="dropdown-menu"> <li><a href="#">HTML</a></li> <li><a href="#">CSS</a></li> <li><a href="#">JS</a></li> </ul> </div> <div class="col-xs-3"></div> <div class="col-xs-4"> <form class="navbar-form navbar-right"> <div class="form-group"> <input type="text" class="from-control" placeholder="Search"/> </div> </form> </div> </div> </div> <h6></h6> <div class="container"> <div class="row"> <div class="col-xs-12 col-sm-6 col-md-2 bg-danger text-danger"> <form class=""> <div class="form-group"> <h6></h6> <input type="text" placeholder="请输入...."/> </div> <div class="form-group"> <h6></h6> <input type="text" placeholder="请输入...."/> </div> </form> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea magni vel voluptatem dolore consectetur corporis quaerat velit provident a eaque perferendis veritatis quam reiciendis mollitia quidem voluptas minus. Ad optio! </p> </div> <div class="col-xs-12 col-sm-6 col-md-7 bg-info text-info"> <img id="im2" src="img/a3.jpg" class="img-thumbnail"> <img id="im2" src="img/a4.jpg" class="img-thumbnail"> <img id="im2" src="img/a5.jpg" class="img-thumbnail"> <img id="im2" src="img/a8.jpg" class="img-thumbnail"> <h6></h6> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio repudiandae omnis nobis labore assumenda excepturi ad similique consequatur! Eveniet quam officiis id consequuntur nostrum ullam fugit commodi ducimus magni ab! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus tempore mollitia omnis aperiam? Saepe tenetur iure alias reiciendis temporibus possimus soluta inventore laboriosam veritatis molestiae fugiat ut fugit magni neque. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem architecto quae soluta totam repellat rerum suscipit possimus laborum sint labore delectus corporis mollitia excepturi error aspernatur autem neque nam beatae? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit maiores temporibus nisi porro animi quae similique illum consequuntur laboriosam saepe ipsum id perferendis at provident nesciunt magni minus dolore odit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi ipsum illum quod reiciendis qui reprehenderit deserunt quaerat aliquam mollitia commodi dignissimos laudantium nulla deleniti placeat voluptates laborum fuga. Fugiat incidunt. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor maiores ut minima rerum obcaecati aliquid eveniet atque omnis esse commodi vero cupiditate nesciunt a eos magni? Obcaecati impedit dolores quibusdam. </p> </div> <div class="col-xs-3 bg-success text-success hidden-xs hidden-sm"> <h6></h6> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium corrupti deleniti minima delectus ut expedita aliquid? Debitis nulla nesciunt velit quidem doloribus nihil perspiciatis illo harum deleniti enim officia excepturi. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae debitis blanditiis iste quidem natus ea inventore quas rerum eius ab! Consectetur repellendus est. Officia aliquam autem earum alias eaque corporis. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor omnis ex ratione culpa in cum illo minus nihil veritatis repudiandae aliquam atque quis suscipit corrupti asperiores a nostrum fuga voluptatum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt laborum molestiae delectus architecto inventore quam expedita nobis cumque pariatur maiores labore commodi. Fugit obcaecati enim sit quaerat eius molestias ex. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident ipsam qui molestias eveniet consequuntur quam possimus officia ut voluptatem necessitatibus hic laboriosam modi alias autem excepturi tempora atque. Ullam est! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque porro aliquam debitis deserunt corporis est. Officiis veritatis dignissimos minima vel ut molestias culpa veniam quibusdam dolores nihil nemo eligendi sunt! </p> </div> </div> <hr > </div> <p class="text-center">©2020-10-12 版本专属作者所有</p> <script src="js/jquery-1.9.1.js"></script> <script src="js/bootstrap.js"></script> </body> </html>最后便是运行结果了！
（屏幕尺寸pc端）
（屏幕尺寸pad）
（屏幕尺寸手机端）
- 您还可以看一下 张晨光老师的BootStrap快速入门基础教程系列课程中的 bootstrap插件小节, 巩固相关知识点
- 以下回答由chatgpt基于相关博客总结生成:
Bootstrap弹窗模态组件是用来呈现交互式信息，允许用户与其它组件进行交互或执行特定的操作。以下是基本用法和步骤：
- 导入Bootstrap及相关JS库
在html文件中引入Bootstrap及相关JS库，例如jQuery和Popper.js
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.5.0/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>- 创建一个基本的模态框
使用Bootstrap的模态框组件创建一个基本的模态框：
<!-- Trigger the modal with a button --> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">Open modal</button> <!-- Modal --> <div class="modal fade" id="myModal" role="dialog"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="modal-title">Modal Header</h4> </div> <div class="modal-body"> <p>Some text in the modal.</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div>- 触发模态框
我们需要一个按钮或链接触发模态框，通过设置data-toggle="modal"和data-target="#myModal"来绑定模态框：
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">Open modal</button>- 设置模态框标题和内容
在模态框内添加一个标题和主体内容：
<div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="modal-title">Modal Header</h4> </div> <div class="modal-body"> <p>Some text in the modal.</p> </div>可以根据需要更改标题和内容。
- 添加底部按钮
模态框的底部通常会添加一些按钮，例如"Close"或"Save"等，这些按钮通常与data-dismiss="modal"一起使用，用于关闭模态框：
<div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div>- 自定义模态框样式
可以通过添加自定义CSS类来自定义模态框的样式，例如：
<div class="modal-content my-modal-style"> ... </div>- 修改模态框大小
Bootstrap提供了一些类来控制模态框的大小，例如modal-lg表示大尺寸，modal-sm表示小尺寸，在modal-dialog类中添加相应的类即可，例如：
<div class="modal-dialog modal-lg"> ... </div>- 设置模态框可滚动
如果模态框不适合移动设备（例如手机），可以使用.modal-dialog-scrollable class来设置模态框可滚动，例如：
<div class="modal-dialog modal-dialog-scrollable"> ... </div>可以根据需要添加到模态框的父元素中。
- 结合其他Bootstrap组件
可以将模态框组合使用其他Bootstrap组件，例如表格、表单等。
以上是使用Bootstrap弹窗模态组件的基本步骤和注意事项，实现效果请参考以下文章参考资料中的示例代码。
<div class="modal fade" id="modal1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">标题</h5>
<button class="close" data-dismiss="modal">
<span>×</span>//可直接关闭，也可以灰色区域
</button>
</div>
<div class="modal-body">
Cras mattis consectetur purus sit amet fermentum. Cras justo odio,
dapibus ac facilisis in, egestas eget quam. Morbi leo risus,
porta ac consectetur ac, vestibulum at eros.
</div>
<div class="modal-footer">
<button class="btn btn-secondary" data-dismiss="modal">关闭</button>
<button class="btn btn-primary">保存</button>
</div>
</div>
</div>
</div>
<button class="btn btn-primary" data-toggle="modal" data-target="#modal1">普通模态框</button>