首页bootstrap登陆界面

bootstrap登陆界面

时间: 2024-09-11 15:00:49 浏览: 55

Bootstrap是一个流行的前端框架，它提供了一套预设的样式和组件，包括登录界面设计。创建一个简单的Bootstrap登录界面通常包含以下几个步骤： 1. **HTML结构**： ```html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Bootstrap 登录</title> <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.2/css/bootstrap.min.css"> </head> <body> <div class="container mt-5"> <div class="row justify-content-center"> <div class="col-md-6"> <div class="card"> <div class="card-body"> <h4 class="card-title">用户登录</h4> <form id="loginForm"> <div class="mb-3"> <label for="username" class="form-label">用户名</label> <input type="text" class="form-control" id="username" placeholder="请输入用户名"> </div> <div class="mb-3"> <label for="password" class="form-label">密码</label> <input type="password" class="form-control" id="password" placeholder="请输入密码"> </div> <button type="submit" class="btn btn-primary">登录</button> <a href="#" class="forgot-password">忘记密码?</a> </form> </div> </div> </div> </div> </div> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.2/js/bootstrap.min.js"></script> <script> // (添加必要的表单验证和交互逻辑) </script> </body> </html> ``` 2. **CSS样式**：利用Bootstrap内置的类来控制样式，如`card`, `card-body`, `form-group`, 等。 3. **JavaScript**：可以添加一些交互功能，比如表单验证、按钮点击事件等。

阅读全文