<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="modal fade account-modal in" id="step1" data-backdrop="true" aria-hidden="false" style="display:block;"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title">个人管理</h4> </div> <div class="modal-body"> <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expande="true" aria-controls="collapseOne"> 绑定手机 </a> </h4> </div> <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel"> <div class="panel-body"> <form class="form-horizontal form-feedback-out" role="form"> <div class="form-group has-feedback"> <label for="" class="col-sm-3 control-label">已绑定手机</label> <div class="col-sm-3"> <p class="form-control-static">133*********44</p> </div> <div class="col-sm-2"> <a class="btn btn-link">更改手机号</a> </div> <div class="col-sm-2"> <a class="btn btn-link">解除绑定</a> </div> </div> <div class="form-group has-feedback"> <label for="" class="col-sm-3 control-label">新手机号</label> <div class="col-sm-4"> <input type="text" class="form-control" placeholder="" data-type="text" /> </div> <div class="col-sm-2"> <a class="btn btn-warning">获取验证码</a> </div> </div> <div class="form-group has-feedback"> <label for="" class="col-sm-3 control-label">验证码</label> <div class="col-sm-4"> <input type="text" class="form-control" placeholder="" data-type="text" /> </div> </div> <div class="form-group has-feedback"> <div class="col-sm-offset-4 col-sm-2"> <button type="button" class="btn btn-warning btn-act" name="next">绑定</button> </div> </div> </form> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expande="true" aria-controls="collapseTwo"> 重置密码 </a> </h4> </div> <div id="collapseTwo" class="panel-collapse collapse " role="tabpanel"> <div class="panel-body"> <form class="form-horizontal form-feedback-out" role="form"> <div class="form-group has-feedback"> <label for="" class="col-sm-3 control-label">账号</label> <div class="col-sm-5"> <input type="text" class="form-control" placeholder="" data-type="text" readonly/> </div> </div> <div class="form-group has-feedback"> <label for="" class="col-sm-3 control-label">新密码</label> <div class="col-sm-5"> <input type="password" class="form-control" placeholder="" data-type="text"/> </div> </div> <div class="form-group"> <label for="plainPWD_ix61" class="col-sm-3 control-label invisible">显示明文</label> <div class="col-sm-5 checkbox"> <label for="plainPWD_ix61" class="control-label"> <input type="checkbox" id="plainPWD_ix61" name="plainPWD" value="1" data-type="checkbox" data-onlabel="开启" data-offlabel="offLabel">显示明文 </label> </div> </div> <div class="form-group has-feedback"> <div class="col-sm-offset-4 col-sm-2"> <button type="button" class="btn btn-warning btn-act" name="next">确定</button> </div> </div> </form> </div> </div> </div> </div> </div> <div class="modal-footer "> <button type="button" class="btn btn-default btn-act" name="cancel">关闭</button> </div> </div> </div> </div>