模态窗体
1、SPA —— Single Page Application
2、结构:
- 外三层:
- modal fade/show
- modal-dialog
- modal-content
- 内三层:
- modal-header
- modal-body
- modal-footer
<div class="container">
<div>
<button class="btn btn-success" data-toggle="modal" data-target="#myModal">显示</button>
</div>
<div class="modal fade" id="myModal"><!--思考:点击按钮时,这一行有什么样的变化让它显示出来-->
<div class="modal-dialog"><!--调整模态窗体的宽度-->
<div class="modal-content">
<div class="modal-header">
添加用户
</div>
<div class="modal-body">
body
</div>
<div class="modal-footer">
modal-footer
</div>
</div>
</div>
</div>
</div>
3、常见错误
这个错误是常见错误,使用Bootstrap的JavaScript时必须引入jQuery包
4、如何实现插件和jQuery的交互?
<div class="container">
<div>
<button class="btn btn-success" id="btnShow">显示</button>
</div>
<div class="modal fade" id="myModal"><!--思考:点击按钮时,这一行有什么样的变化让它显示出来-->
<div class="modal-dialog"><!--调整模态窗体的宽度-->
<div class="modal-content">
<div class="modal-header">
添加用户
</div>
<div class="modal-body">
body
</div>
<div class="modal-footer">
modal-footer
</div>
</div>
</div>
</div>
</div>
$(document).ready(function () {
$('#btnShow').bind('click',btnShowClick);
})
function btnShowClick() {
$('#myModal').modal();
}
在此容易出现的常见问题
控制台报错:$(…).modal is not a function
解决办法:在bootstrap.min.js之前引用jquery即可。
练习:把form表单添加到模态窗体中,实现添加用户界面设计
总结
一、栅格系统和form-horizantal相结合 :
1、简单form域
<div class="col-md-3">
<input class="form-control"/>
</div>
2、 input-group
<div class="col-md-3">
<div class="input-group">
</div>
</div>
3、button
4、table
5、面包屑导航
练习 : 内容页
二、 panel 和 modal
结构:
- panel是三层
- modal是外三层 、内三层
练习:登录页面/ 注册页面