使用JavaScript修改Bootstrap卡片边框，实现Minecraft服务器状态标识

1. 基础Bootstrap卡片结构 #

先定义卡片，给它加专属类（比如mc-server-card）用于定位，保留Bootstrap原生card类：

<div class="card mc-server-card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">我的MC服务器</h5>
    <p class="card-text">服务器状态：<span id="server-status">检测中...</span></p>
  </div>
</div>

2. 自定义状态样式 #

添加CSS类覆盖Bootstrap卡片默认边框颜色：

/* 服务器在线时的边框样式 */
.server-online {
  border-color: #28a745 !important; /* Bootstrap原生绿色 */
  border-width: 2px !important; /* 可选：加粗边框提升辨识度 */
}

/* 服务器离线时的边框样式 */
.server-offline {
  border-color: #dc3545 !important; /* Bootstrap原生红色 */
  border-width: 2px !important;
}

注：!important用于确保样式优先级高于Bootstrap默认规则，若你的样式文件加载顺序在Bootstrap之后，也可省略。

3. 状态检测与样式切换 #

编写JS逻辑，根据服务器状态切换卡片类：

// 模拟获取服务器状态的函数（替换为你实际的状态接口调用）
async function checkServerStatus() {
  // 替换为你的真实状态检测接口，确保返回含online（布尔值）的JSON
  const isOnline = await fetch('/api/mc-server-status')
    .then(res => res.json())
    .then(data => data.online)
    .catch(err => false); // 请求失败默认视为离线

  const card = document.querySelector('.mc-server-card');
  const statusText = document.getElementById('server-status');

  // 切换卡片样式与状态文本
  if (isOnline) {
    card.classList.remove('server-offline');
    card.classList.add('server-online');
    statusText.textContent = '在线';
    statusText.style.color = '#28a745';
  } else {
    card.classList.remove('server-online');
    card.classList.add('server-offline');
    statusText.textContent = '离线';
    statusText.style.color = '#dc3545';
  }
}

// 页面加载时执行一次检测
window.addEventListener('load', checkServerStatus);
// 可选：每30秒自动刷新状态
setInterval(checkServerStatus, 30000);

关键提示 #

• 务必将fetch('/api/mc-server-status')替换为你实际获取服务器在线状态的接口。
• 若不需要定时刷新，可删除setInterval相关代码。
• 边框宽度为可选设置，可根据视觉需求调整。

内容的提问来源于stack exchange，提问作者Ace mavie Acemavie