怎么用Bootstrap制作后台域名解析管理页-Bootstrap教程-PHP中文网

使用 Bootstrap 5 构建后台域名解析页时，应仅引入 bootstrap-grid.min.css 和 bootstrap-reboot.min.css，并将所有 DOM 包裹在内，通过 CSS 前缀隔离样式；用 formatter 安全处理 DNS 表格字段；禁用原生 focus 蓝框但保留可访问性；避免 bootstrap-select，改用原生 select 或 datalist；前端需正则预处理 record.value，MX 记录须分段校验优先级与域名。

怎么用bootstrap制作后台域名解析管理页

用 Bootstrap 5 搭后台域名解析页，别碰 `bootstrap.css` 的全局样式污染

直接用官方 CDN 加载的 bootstrap.min.css 会导致表单控件、按钮、表格边框等和后台系统风格冲突，尤其在已有 AdminLTE 或 Ant Design 风格的项目里更明显。解决办法不是删 Bootstrap，而是隔离作用域：

只引入 bootstrap-grid.min.css 和 bootstrap-reboot.min.css（网格 + 重置），跳过 bootstrap.min.css 主样式包
所有解析页 DOM 包在 容器下，再用 CSS 前缀覆盖关键样式：.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 会卡顿甚至不响应点击。不用第三方插件也能解决：

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

改用原生  + size="5"，配合 bootstrap 5.3+ 的 form-select 类，视觉足够清晰
类型选择项固定为 A / CNAME / TXT / MX / NS，数量少，根本不需要搜索
如果真要搜记录值（比如从历史记录中选 IP），用  +  更轻量，兼容性也好

保存前校验 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"），这个正则会误删数字，所以实际要用更细粒度的校验——先分段再分别处理优先级和域名部分