备注:需要插入bootstrap插件 css如下:
body {
padding: 30px;
}
.myInput {
margin: 20px;
}
.mybtn {
margin-left: 80%;
}
.input-group{
margin: 10px;
}
#ntmAS{
margin: 10px;
}
html如下:
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<a href="#modal" class="btn btn-primary navbar-right" data-toggle="modal" style="margin-left: 10%;" id="ntmAS">登录</a>
<div class="input-group">
<input type="text" class="form-control" placeholder="请输入内容">
<span class="btn input-group-addon">百度一下</span>
</div>
</div>
</nav>
<div id="modal" class="modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close" data-dismiss="modal">×</button>
<span>百度登陆账号</span>
</div>
<div class="modal-body">
<form action="">
<div class="myInput">
<input type="text" class="form-control" placeholder="手机号/邮箱/用户名">
</div>
<div class="myInput">
<input type="password" class="form-control " placeholder="密码">
</div>
<div class="myInput">
<input type="checkbox"> 下次自动登录
</div>
<div class="myInput">
<button class="btn btn-primary form-control">登录</button>
</div>
</form>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>