Bootstrap迁移系列 - Modal
2023-09-11 14:20:13 时间
对jQuery的依赖
请注意,所有JavaScript插件都依赖jQuery,在页面中的引入顺序可以参考基本模版。 bower.json
中列出了Bootstrap所支持的jQuery版本。
3.x需要JQuery1.9.0以上版本,推荐V1.9.1(支持IE6+)
模态框组件(V3.0)的HTML结构发生了很大的改变。.modal-header
、.modal-body
和.modal-footer
部分目前包含在了.modal-content
和.modal-dialog
中,为的是增强移动设备上的样式和行为特性。
在2.x中的实现效果
实现代码:
<!DOCTYPE html> <html> <head> <title>登录框</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet" media="screen"> </head> <body style="background: #555;"> <div class="modal show" role="dialog"> <div class="modal-header"> <h3>登录</h3> <p>请输入E-mail和密码</p> </div> <div class="modal-body"> <form action="admin/user/login" method="post" accept-charset="utf-8"> <table class="table"> <tr> <td>Email</td> <td><input type="text" name="email" value="" /></td> </tr> <tr> <td>密码</td> <td><input type="password" name="password" value="" /></td> </tr> <tr> <td></td> <td><input type="submit" name="login" value="登入" class="btn btn-primary" /></td> </tr> </table> </form> </div> <div class="modal-footer"> © xiaobin_hlj80 </div> </div> <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script src="js/bootstrap.min.js"></script> </body> </html>
在3.x中的实现效果
实现代码:
<!DOCTYPE html> <html> <head> <title>登录框</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet" media="screen"> </head> <body style="background: #555;"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h3>登录</h3> <p>请输入E-mail和密码</p> </div> <div class="modal-body"> <form action="admin/user/login" method="post" accept-charset="utf-8"> <table class="table"> <tr> <td>Email</td> <td><input type="text" name="email" value="" class="form-control" placeholder="请输入你的E-mail" /></td> </tr> <tr> <td>密码</td> <td><input type="password" name="密码" value="" class="form-control" placeholder="请输入你的密码" /></td> </tr> <tr> <td></td> <td><input type="submit" name="login" value="登入" class="btn btn-primary btn-lg btn-block" /></td> </tr> </table> </form> </div> <div class="modal-footer"> © xiaobin_hlj80 </div> </div> </div> <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script src="js/bootstrap.min.js"></script> </body> </html>
模态框组件的HTML结构发生了很大的改变。
.modal-header
、
.modal-body
和
.modal-footer
部分目前包含在了
.modal-content
和
.modal-dialog
中,为的是增强移动设备上的样式和行为特性。
相关文章
- bootstrap : 解决使图片全屏显示有空白边距的问题
- 第二百四十四节,Bootstrap下拉菜单和滚动监听插件
- 第二百三十六节,Bootstrap辅组类和响应式工具
- bootstrap:时间日期日历控件(datetimepicker)
- DataTables Bootstrap 3 example
- thymeleaf+bootstrap,onclick传参实现模态框中遇到的错误
- bootstrap:时间日期日历控件(datetimepicker)
- 什么是 bootstrap 中的 break point
- 【Bootstrap】bootstrap快速入门
- BootStrap容器介绍
- VM1059 bootstrap-table.min.js:7 Uncaught TypeError: Cannot read property 'classes' of undefined
- 日期时间选择器、Bootstrap日期和时间表单组件。bootstrap-datetimepicker实现年月日,时分秒的选择。
- 【Bootstrap】bootstrap入门之栅格布局、弹性布局、组件类_02
- SpringBoot实例①SpringBoot+bootstrap+thymeleaf实现简单页面
- Bootstrap your own latent :A new approach to self-supervised Learning(BYOL)(论文解读)