<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">×</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>
效果图: