bootstrap中的模态框

   <button class="btn btn-primary" data-toggle="modal" data-target=".modal">登录</button>
   <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <!--class="close"用于定位右侧按钮的样式-->
                <!--data-dismiss="modal"用来实现关闭模态框的动作-->
                <button class="close" data-dismiss="modal">&times;</button>
                <h5>登录百度账号</h5>
            </div>
            <div class="media-body">
                <div class="col-md-10 col-md-offset-1 myMargin">
                    <input type="text" placeholder="请输入用户名" class="form-control">
                </div>
                <div class="col-md-10 col-md-offset-1 myMargin">
                    <input type="text" placeholder="请输入邮箱" class="form-control">
                </div>
                <div class="col-md-10 col-md-offset-1 myMargin">
                    <input type="text" placeholder="请输入密码" class="form-control">
                </div>
                <div class="col-md-10 col-md-offset-1 myMargin">
                    <input type="checkbox">下次自动登录
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn form-control btn-primary">登录</button>
            </div>
        </div>
    </div>

效果图：