Bootstrap（三）：Bootstrap模态窗体

模态窗体

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是外三层 、内三层

练习：登录页面/ 注册页面