使用 Bootstrap 5 构建后台域名解析页时，应仅引入 bootstrap-grid.min.css 和 bootstrap-reboot.min.css，并将所有 DOM 包裹在 内，通过 CSS 前缀隔离样式；用 formatter 安全处理 DNS 表格字段；禁用原生 focus 蓝框但保留可访问性；避免 bootstrap-select，改用原生 select 或 datalist；前端需正则预处理 record.value，MX 记录须分段校验优先级与域名。
用 Bootstrap 5 搭后台域名解析页，别碰 bootstrap.css 的全局样式污染
直接用官方 CDN 加载的 bootstrap.min.css 会导致表单控件、按钮、表格边框等和后台系统风格冲突，尤其在已有 AdminLTE 或 Ant Design 风格的项目里更明显。解决办法不是删 Bootstrap，而是隔离作用域：
- 只引入
bootstrap-grid.min.css和bootstrap-reboot.min.css（网格 + 重置），跳过bootstrap.min.css主样式包 - 所有解析页 DOM 包在
<div class="dns-admin"> 容器下，再用 CSS 前缀覆盖关键样式：<code>.dns-admin .form-control { border-radius: 4px; padding: 6px 12px; } - 禁用 Bootstrap 的
:focus蓝色外框：加.dns-admin input:focus { outline: none; box-shadow: 0 0 0 2px #007bff40; }保持可访问性但不突兀
bootstrap-table 渲染 DNS 记录列表时，data-formatter 要处理 TTL 和类型映射
原生 bootstrap-table 不会自动把 "A"、"CNAME" 转成带颜色标签，TTL 数值也不带单位。直接写死 HTML 容易 XSS，必须用 formatter 函数安全处理：
{
field: 'type',
title: '类型',
formatter: function(value) {
const map = { A: 'primary', CNAME: 'success', TXT: 'warning', MX: 'info' };
return `<span class="badge bg-${map[value] || 'secondary'}">${value}</span>`;
}
},
{
field: 'ttl',
title: '缓存时间',
formatter: function(value) {
return value ? `${value}s` : '默认';
}
}
注意：如果后端返回 TTL 是字符串 "3600"，要先 parseInt(value, 10) 再判断，否则 "0" 会被当成 false 导致显示“默认”
添加记录弹窗里，select 的 data-live-search="true" 在移动端失效
Bootstrap 5 的 bootstrap-select 插件开启搜索后，iOS Safari 和部分安卓 WebView 会卡顿甚至不响应点击。不用第三方插件也能解决：
- 改用原生
<select multiple></select>+size="5"，配合bootstrap 5.3+的form-select类，视觉足够清晰 - 类型选择项固定为
A/CNAME/TXT/MX/NS，数量少，根本不需要搜索 - 如果真要搜记录值（比如从历史记录中选 IP），用
<input list>+<datalist></datalist>更轻量，兼容性也好
保存前校验 record.value 必须按 DNS 规范过滤空格和非法字符
用户粘贴 IP 地址或域名时，常带首尾空格、全角空格、换行符，甚至中文句号。后端校验失败再返回提示，体验差。前端要用正则预筛：
function normalizeDnsValue(val) {
if (!val) return '';
return val
.replace(/[\u3000\s\u2000-\u200A\u2028\u2029\u202F\u205F\u3000]+/g, ' ') // 合并所有空白符
.trim()
.replace(/\.$/, '') // 去掉末尾点（避免 www.example.com.）
.replace(/[^a-zA-Z0-9.\-_]+/g, ''); // 只留合法 DNS 字符
}
特别注意：MX 记录的 value 开头可能有数字优先级（如 "10 mail.example.com"），这个正则会误删数字，所以实际要用更细粒度的校验——先分段再分别处理优先级和域名部分
