Bootstrap 5登录表单需用form-floating实现浮动标签、d-grid gap-2居中按钮、JS控制密码切换、手动触发is-invalid与show类强化验证反馈。
Bootstrap 5 登录表单的 class 组合不能照搬 Bootstrap 4
Bootstrap 5 移除了
、
等旧类，直接套用老教程代码会导致样式错乱或输入框无边框。核心变化是：所有表单控件默认使用
，尺寸靠
或
控制，但必须配合
才能实现浮动标签效果。
常见错误现象：
堆在输入框上方不动、输入框无圆角/阴影、聚焦时无 border-color 变化。
浮动标签必须用
包裹
+
，且
放在
后面
必须有
，
的
属性要严格匹配该
不要手动加
调间距——用
这类间距工具类
如何让登录按钮真正居中且响应式适配
单纯用
或
很容易失效，因为
默认是 inline 元素，而父容器若没设宽度或 flex 布局，居中就不可靠。正确做法是把按钮放在
或
容器里。
使用场景：小屏竖屏（手机）和大屏横屏（桌面）都要保持按钮水平居中、上下留白一致。
推荐用
form-groupform-control-lgform-controlform-control-lgform-control-smform-floatinglabelform-floatinginputlabellabelinputinputidlabelforidmargin-bottommb-3text-centermx-autobuttoncold-grid
包裹
button
，它会自动设为 block 并撑满父容器宽度
如果按钮需要随屏幕变宽/窄，给外层加
col-md-6 col-lg-4
等栅格类，避免固定
width: 300px
禁用
float
相关类（如
float-left
），Bootstrap 5 已弃用
密码可见性切换按钮的 DOM 结构和 JS 绑定要点
Bootstrap 本身不提供密码显示/隐藏功能，得自己加按钮和 JS。最容易踩的坑是：点击后图标不切换、输入框类型没改、焦点丢失、移动端点不灵。
原生Bootstrap旋转木马特效
原生Bootstrap旋转木马特效是一款基于jQuery实现的图片轮播切换代码。
下载
关键在于同步控制
type
属性、
aria-label
和图标 class（如
bi-eye
/
bi-eye-slash
）。
按钮必须用
type="button"
，防止触发表单提交
监听
click
事件，用
inputEl.type = inputEl.type === 'password' ? 'text' : 'password'
切换
记得调用
inputEl.focus()
，否则 iOS 上键盘会收起
图标建议用 Bootstrap Icons，引入后用
is-invalid
类和红色边框远远不够——很多人根本注意不到，尤其在深色背景或小屏上。Bootstrap 的验证样式默认很轻，需要主动强化。
性能影响极小，但兼容性要注意：
:invalid
伪类在未交互前也会触发，所以必须配合
was-validated
或 JS 手动加类来控制时机。
表单提交前务必加
novalidate
属性，禁用浏览器原生提示（干扰 Bootstrap 样式）
JS 验证失败后，给对应
input
加
is-invalid
，同时给紧邻的
div.invalid-feedback
加
show
类
invalid-feedback
文字别只写“格式错误”，要具体，比如“请输入有效的邮箱地址”
别依赖
:invalid
自动生效——很多字段（如密码确认）需自定义校验逻辑，必须 JS 控制
浮动标签 + 响应式栅格 + 密码切换 + 显性验证反馈，这四块拼不全，登录表单就会在某个环节让用户卡住。最常被忽略的是验证反馈的可见性和具体性，不是加了
is-invalid
就算完事。