利用bootstrap做一个登录页面

 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,利用录页 initial-scale=1.0"> <title>登录页面 - Bootstrap 实战</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <div class="container mt-5" style="max-width: 400px;"> <div class="card shadow-sm"> <div class="card-body p-4"> <h3 class="text-center mb-4">登录</h3> <form> <div class="mb-3"> <label for="email" class="form-label">邮箱地址</label> <input type="email" class="form-control" id="email" placeholder="name@example.com" required> </div> <div class="mb-3"> <label for="password" class="form-label">密码</label> <input type="password" class="form-control" id="password" placeholder="输入密码" required> </div> <div class="mb-3 form-check"> <input type="checkbox" class="form-check-input" id="remember"> <label class="form-check-label" for="remember">记住我</label> </div> <button type="submit" class="btn btn-primary w-100">登 录</button> </form> <p class="text-center text-muted mt-3 mb-0">还没有账号？ <a href="#">立即注册</a></p> </div> </div> </div> </body> </html> 

写这段代码之前，我其实在纠结——登录页这种东西，个登看起来简单，利用录页但坑不少。个登很多人直接抄一个模板，利用录页结果表单没验证、个登移动端错位、利用录页按钮丑得像块砖。个登Bootstrap 的利用录页好处就是替你把这些坑填了大半。 先说布局。个登我用了 `container` 加 `max-width: 400px`，利用录页这招挺实用。个登默认的利用录页容器太宽，登录框容易显得散。个登限制宽度后，利用录页卡片在桌面端居中，在手机上也不会贴边。`mt-5` 给上方留出呼吸空间，不至于顶到浏览器边缘，看着压抑。 卡片（`card`）是视觉核心。`shadow-sm` 其实是我故意选的——阴影太重显得浮夸，太轻又没层次感，这个中间值刚好。`card-body` 里塞 `p-4`，让内容四周有内边距，不会挤在边框上。标题用 `h3` 加 `text-center`，简单直接，不用搞什么花哨的图标或者渐变背景，那是画蛇添足。 表单部分，重点在 `form-label` 和 `form-control` 的配对。Bootstrap 5 要求 label 必须配 `for` 属性指向输入框的 `id`，这不仅是规范，更是无障碍访问的基础。视力障碍用户靠屏幕阅读器时，label 就是他们的“视觉指引”。我见过不少开发把 label 当摆设，光写个文字不放 `for`，结果屏幕阅读器读出来是“编辑框，编辑框”，鬼知道要填啥。 密码框的 `placeholder` 我写了“输入密码”，虽然有人觉得 placeholder 不该替代 label，但这里只是辅助提示，无伤大雅。真正要注意的是 `type="password"`——别手滑写成 `text`，密码明文显示会让人社死。 “记住我”复选框用了 `form-check` 系列，这是 Bootstrap 5 改版后的标准写法。老版本用 `checkbox` 加 `label` 就行，现在必须包一层 `form-check`，否则样式会崩。我踩过这个坑，那次调试花了二十分钟，最后发现是忘了加父容器。 按钮是全宽（`w-100`），这在移动端特别重要。窄屏下若按钮只有内容那么宽，点击区域太小，拇指操作容易误触。登录按钮是表单里唯一的提交入口，必须给足面积。 底部那行注册链接，我特意用了 `text-muted` 降低存在感，但链接本身还是保留了蓝色。这种“弱化次要操作”的设计逻辑，能引导用户把注意力放在主按钮上。 最后说下响应式。Bootstrap 的栅格系统在这里没怎么用，但 `container` 的断点机制依然生效。你试着把窗口拖窄，卡片会跟着收缩，内边距不变，文字不会溢出。这背后是媒体查询在起作用，但你没写一行 CSS——这就是框架的价值。 整个页面就一个 HTML 文件，没写任何自定义样式。但你不觉得它比那些手写 CSS 的登录页更整洁吗？Bootstrap 的真正优势不是“快”，而是“稳”——你不需要知道每个断点具体是多少像素，只要按它的规则搭积木，结果大概率是及格的。对于登录页这种高频场景，及格就是优秀。

(责任编辑：休闲)