Bootstrap无内置登录组件，但可用栅格、表单类10分钟构建响应式登录页：用container+row+col实现居中，form-control语义化表单，min-vh-100确保全屏适配，禁用input-group防小屏溢出，手动处理按钮状态与验证反馈。

Bootstrap 本身不提供“登录页面组件”，但用它的栅格、表单和工具类，10 分钟就能搭出响应式、可访问、符合现代 UI 习惯的登录页——关键不是套模板，而是理解哪些类该用、哪些要删、哪些必须手动补。

用 form + form-control 写表单结构，别用 input-group 套 login

很多人一上来就套 input-group 加图标，结果在小屏上溢出、焦点框错位、密码可见按钮点击区域过小。登录表单核心是语义清晰、键盘可操作、无障碍友好。

• form 必须带 role="form" 和 autocomplete="off"（如需禁用浏览器自动填充，但注意 autocomplete="username" / "current-password" 更推荐）
• 每个 input 必须有对应的 label，用 for 关联 id，不能只靠 placeholder
• form-control 足够用，input-group 只在需要紧邻按钮（如搜索框）或图标装饰时才加，且要配合 input-group-text 和 position-relative 修正定位
• 密码输入框务必设 type="password"，切换可见性用 JS 控制 type 属性，不要用 text 永久替代

居中布局别硬写 margin: 0 auto，用 container + row + col 组合

直接给 div 加 text-center 或 mx-auto 在不同断点下容易错位，尤其当内容高度变化时（比如错误提示出现后）。Bootstrap 的栅格系统才是可控方案。

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

• 外层用 container（固定宽度）或 container-fluid（全宽），避免用 container-sm 等缩写类——它们只在对应断点生效，登录页通常需统一控制
• 内部用 row justify-content-center align-items-center min-vh-100 实现垂直+水平居中，min-vh-100 比 vh-100 更安全（防止内容超长时撑高）
• 表单卡片用 col-12 col-md-8 col-lg-5，既保证移动端占满，又在桌面端留白合理；别用 col-xl-4 这种过度约束的类
• 移除所有自定义 margin-top 或 padding-top，靠栅格间距类（如 mt-4, pb-3）控制节奏

提交按钮状态和反馈必须手动处理，disabled 不等于防重复提交

Bootstrap 的 btn-primary disabled 只禁用点击态，不阻止 JS 事件或网络请求。真实场景中，用户狂点登录按钮会导致多次请求、后端重复校验、甚至账号被锁。

• 点击后立刻设 button.disabled = true 并改文字为 "登录中..."，同时给 form 加 pointer-events-none 防止其他输入交互
• 成功后跳转前清空表单（form.reset()），失败后恢复按钮状态，并用 is-invalid 类 + invalid-feedback 显示服务端返回的具体错误（如 "密码错误超过 3 次，请 15 分钟后再试"）
• 别用 alert 弹窗做错误提示——破坏表单流，也不利于屏幕阅读器识别
• 如果用了 fetch 或 axios，记得加 AbortController 处理超时或页面卸载时的请求取消

最常被忽略的是表单验证的边界：前端用 required 和 pattern 做基础校验没问题，但邮箱格式、密码强度、用户名长度这些规则，前后端必须完全一致。否则用户看到“格式错误”却不知道哪里错了，或者前端放过、后端拒绝，体验直接断裂。