8.2 对话框
在Web
页面上经常以对话框的方式完成某种操作,比如用户注册、登录或阅读一段提示信息,Bootstrap
的JS插件则为对话框提供了支持。
Bootstrap
的对话框插件依赖transition.js
和modal.js
库。这两个JS库都包含在bootstrap.js
或bootstrap.min.js
中。
8.2.1 静态对话框
从理论上来说,Bootstrap
可以将大部分HTML
元素(如<div>
元素)当成对话框处理,Bootstrap
可以在页面上弹出或隐藏这些元素。
但从实际界面效果来看,开发者当然希望给用户呈现一个优雅、美观的用户界面,因此Bootstrap
也为对话框提供了如下支持。
对话框组成
Bootstrap
的对话框分为如下几个部分。
- 第一层容器:这层容器需要被指定
class="modal"
样式,它是整个对话框的容器
。
- 第二层容器:这层容器需要被指定
class="modal-dialog"
样式,该样式设置一个居中的对话框。
- 第三层容器:这层容器需要被指定
class="modal-content"
样式,该样式用于设置对话框的主体,这层容器的样式用于控制对话框的边框、背景、阴影等效果。
对话框主体构成
如果要为对话框添加内容,则需要在class="modal-content"
容器内添加。该容器内可包含如下三个子部分。
- 对话框头:这部分需要被指定
class="modal-header"
样式,这部分包括对话框的标题、关闭按钮等。
- 对话框主体:这部分需要被指定
class="modal-body"
样式,这部分包括对话框的主要内容,可以任意设置这些内容,比如使用网格布局添加内容。
- 对话框尾注:这部分需要被指定
class="modal-footer"
样式,这部分包括对话框的各种操作按钮。
程序示例 创建静态对话框
下面代码示范了一个静态对话框的构建方法。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42
| <!DOCTYPE html> <html>
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title> 静态对话框 </title> <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css"> <link rel="stylesheet" href="../bootstrap/css/bootstrap-theme.min.css"> </head>
<body> <div class="modal show" tabindex="-1" role="dialog"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button class="close" type="button"> <span aria-hiden="true">×</span> </button> <h4>对话框</h4> </div> <div class="modal-body"> <p>对话框内容</p> </div> <div class="modal-footer"> <button class="btn btn-default" type="button">关闭</button> <button class="btn btn-primary" type="button">保存</button> </div> </div> </div> </div> <script type="text/javascript" src="../jquery-3.1.1.js"></script> <script type="text/javascript" src="../bootstrap/js/bootstrap.min.js"></script> </body>
</html>
|
上面代码分别定义了3个<div>
容器,这三个<div>
容器就是构建Bootstrap
对话框的三层容器。接下来代码在第三层容器中添加对话框头、对话框主体和对话框尾注三个部分。
在上面的对话框代码中,第一层容器除了被指定了.modal
样式之外,还被指定了一个.show
样式,该样式用于控制在加载页面时自动显示该对话框;与此对应的还有一个.fade
样式,该样式用于隐藏对话框。
提示:该对话框目前只是一个静态的对话框,用户无法通过底部的关闭按钮和右上角的关闭按钮来关闭对话框,本节后面会介绍如何关闭对话框。
Bootstrap对话框特征
Bootstrap
的对话框优雅、美观。同时该对话框还具有如下特征:
- 对话框会自动浮动在浏览器中央,而且宽度会自适应浏览器的大小。
- 当浏览器
viewport
宽度小于768px时,对话框宽度为600px。
- 在对话框的底部会自动添加一个灰色的蒙层,用于防止用户单击对话框底部分的元素。
- 对话框的显示、隐藏过程具有过渡效果。
另外需要说明的是,Bootstrap
不支持同时打开多个对话框,如果需要同时打开多个对话框,则需要自己修改代码。
控制对话框大小的样式
Bootstrap
为控制对话框大小提供了如下两个样式。
样式 |
描述 |
.modal-sm |
设置小的对话框。 |
.modal-lg |
设置大的对话框。 |
对于大的对话框,则可以向对话框中添加更多的内容。在向对话框添加更多内容时,应该考虑将内容添加在对话框主体(也就是被指定了class="modal-body" 属性的元素)内。 |
|
## 程序示例 在对话框主体内使用网格布局 ## |
|
例如如下代码示范了如何在对话框主体内使用网格布局。 |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72
| <!DOCTYPE html> <html>
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title> 静态对话框 </title> <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css"> <link rel="stylesheet" href="../bootstrap/css/bootstrap-theme.min.css"> <style type="text/css"> .row { margin-bottom: 20px; }
[class*="col-"] { padding-top: 15px; padding-bottom: 15px; background-color: #eee; background-color: rgba(86, 61, 124, .15); border: 1px solid #ddd; border: 1px solid rgba(86, 61, 124, .2); } </style> </head>
<body> <div class="modal modal-lg show" tabindex="-1" role="dialog"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button class="close" type="button"> <span aria-hiden="true">×</span> </button> <h4>对话框</h4> </div> <div class="modal-body"> <div class="row"> <div class="col-sm-6"> .col-sm-6 </div> <div class="col-sm-6"> .col-sm-6 </div> </div> <div class="row"> <div class="col-sm-4"> .col-sm-4 </div> <div class="col-sm-8"> .col-sm-8 </div> </div> </div> <div class="modal-footer"> <button class="btn btn-default" type="button">关闭</button> <button class="btn btn-primary" type="button">保存</button> </div> </div> </div> </div> <script type="text/javascript" src="../jquery-3.1.1.js"></script> <script type="text/javascript" src="../bootstrap/js/bootstrap.min.js"></script> </body>
</html>
|
|
|
原文链接: 8.2 对话框 8.2.1 静态对话框