Bootstrap仅负责界面呈现，IP查询需调用后端或第三方API；须处理跨域、错误、加载状态；表单需语义正确、键盘可用；选CORS友好接口如httpbin.org/ip；响应解析要匹配格式；用Spinner和Alert反馈状态；fetch需检查response.ok并用AbortController防超时。
Bootstrap 本身不提供 IP 查询功能，它只负责界面呈现；真正的查询必须调用后端 API 或第三方服务（如 ipapi.co、ipify.org、httpbin.org/ip），前端仅做请求发起和结果渲染。直接用 Bootstrap 写个“能点、能看、不报错”的界面很简单，但若忽略跨域、错误处理、加载状态，上线后大概率白屏或静默失败。
用 form + input + button 搭出可交互骨架
别一上来就套 Card 或 Modal，先确保表单语义正确、键盘可操作、移动端可用：
-
input必须有type="text"和placeholder="输入 IP 地址（留空查本机）"，加上aria-label适配读屏器 -
button用type="submit"而非type="button"，支持回车触发 - 包裹在
form内，监听submit事件而非click，避免重复提交 - 禁用默认提交行为：
event.preventDefault()，否则页面刷新清空状态
调用公网 API 时绕开 CORS 和格式陷阱
浏览器直连 httpbin.org/ip 可以，但 ipapi.co 免费版默认不允许前端直调（会返回 403 或 CORS 头缺失）。常见误操作是硬写 fetch("https://ipapi.co/json") 然后卡死：
- 优先选明确支持 CORS 的地址，例如：
https://httpbin.org/ip（只返 IP）、https://api64.ipify.org?format=json（需解析 JSON 字符串） - 若必须用
ipapi.co，得加免费 token 并确认其文档写了 “Browser support: ✅”——很多用户复制的链接其实是服务端专用 URL - 响应体不总是 JSON：
httpbin.org/ip返回纯文本，需用response.text()；而ipify.org返回{"ip":"..."}，才用response.json()
用 Spinner 和 Alert 告诉用户“正在发生什么”
没加载反馈的查询界面，用户会狂点按钮。Bootstrap 提供现成组件，但得手动控制显隐：
- 初始隐藏
div class="spinner-border"和div class="alert"，靠 JS 切换show类 - 请求开始：显示 spinner，禁用 button（
button.disabled = true） - 成功：隐藏 spinner，显示
Alert success，内容插进pre或code保持格式 - 失败：隐藏 spinner，显示
Alert danger，错误信息取error.message或response.status，别直接打console.error就完事
最易被忽略的是网络异常兜底：fetch 不会因 4xx/5xx 抛错，必须手动检查 response.ok；超时需用 AbortController 控制，否则用户关掉标签页，请求还在后台挂着。
