bootstrap登录窗口
时间: 2023-09-09 16:13:16 浏览: 47
可以使用Bootstrap框架中的模态框(Modal)来实现登录窗口。以下是一个简单的示例代码:
```html
<!-- 登录按钮 -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#loginModal">
登录
</button>
<!-- 登录模态框 -->
<div class="modal fade" id="loginModal" tabindex="-1" role="dialog" aria-labelledby="loginModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="loginModalLabel">登录</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<!-- 登录表单 -->
<form>
<div class="form-group">
<label for="username" class="col-form-label">用户名:</label>
<input type="text" class="form-control" id="username">
</div>
<div class="form-group">
<label for="password" class="col-form-label">密码:</label>
<input type="password" class="form-control" id="password">
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary">登录</button>
</div>
</div>
</div>
</div>
```
当用户点击登录按钮时,登录模态框会弹出。用户在模态框中输入用户名和密码后,可以点击登录按钮进行登录操作。可以根据自己的需求对登录表单和登录按钮进行修改。