基于Bootstrap 3的多卡片链接式仪表盘开发建议及代码示例请求

No worries about putting off the Bootstrap 4 upgrade right now—Bootstrap 3 has everything you need to build a clean, functional dashboard with clickable "card" links. We’ll use Bootstrap’s built-in panel component (the closest equivalent to Bootstrap 4+ cards) paired with its grid system for responsive layout, plus some custom touches to make the panels feel interactive.

Full Working Code Example #

Here’s a complete, copy-paste-ready implementation:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>应用仪表盘</title>
    <!-- Bootstrap 3 CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <style>
        /* Custom styles for clickable dashboard panels */
        .dashboard-panel {
            cursor: pointer;
            transition: all 0.3s ease;
            margin-bottom: 20px;
            display: block; /* Make the <a> tag behave like a block element */
            text-decoration: none;
        }
        .dashboard-panel:hover {
            box-shadow: 0 4px 8px rgba(0,0,0,0.15);
            transform: translateY(-2px);
            text-decoration: none;
        }
        .dashboard-panel .panel-body {
            text-align: center;
            padding: 30px 15px;
        }
        .dashboard-panel .glyphicon {
            font-size: 48px;
            margin-bottom: 15px;
            color: inherit; /* Inherit panel's primary color */
        }
        .dashboard-panel .panel-title {
            font-size: 18px;
            font-weight: 600;
            margin-bottom: 10px;
        }
        .dashboard-panel .text-muted {
            font-size: 14px;
        }
    </style>
</head>
<body>
    <div class="container-fluid">
        <div class="page-header">
            <h1>应用仪表盘</h1>
        </div>
        
        <div class="row">
            <!-- 用户管理卡片 -->
            <div class="col-md-4 col-sm-6">
                <a href="/user-management" class="dashboard-panel panel panel-default">
                    <div class="panel-body">
                        <span class="glyphicon glyphicon-user"></span>
                        <h3 class="panel-title">用户管理</h3>
                        <p class="text-muted">查看和管理系统用户</p>
                    </div>
                </a>
            </div>
            
            <!-- 数据统计卡片 -->
            <div class="col-md-4 col-sm-6">
                <a href="/analytics" class="dashboard-panel panel panel-primary">
                    <div class="panel-body">
                        <span class="glyphicon glyphicon-stats"></span>
                        <h3 class="panel-title">数据统计</h3>
                        <p class="text-muted">查看业务数据报表</p>
                    </div>
                </a>
            </div>
            
            <!-- 设置中心卡片 -->
            <div class="col-md-4 col-sm-6">
                <a href="/settings" class="dashboard-panel panel panel-success">
                    <div class="panel-body">
                        <span class="glyphicon glyphicon-cog"></span>
                        <h3 class="panel-title">设置中心</h3>
                        <p class="text-muted">配置系统参数</p>
                    </div>
                </a>
            </div>
            
            <!-- 工单系统卡片 -->
            <div class="col-md-4 col-sm-6">
                <a href="/tickets" class="dashboard-panel panel panel-warning">
                    <div class="panel-body">
                        <span class="glyphicon glyphicon-list-alt"></span>
                        <h3 class="panel-title">工单系统</h3>
                        <p class="text-muted">处理用户反馈工单</p>
                    </div>
                </a>
            </div>
            
            <!-- 日志查询卡片 -->
            <div class="col-md-4 col-sm-6">
                <a href="/logs" class="dashboard-panel panel panel-danger">
                    <div class="panel-body">
                        <span class="glyphicon glyphicon-file"></span>
                        <h3 class="panel-title">日志查询</h3>
                        <p class="text-muted">查看系统操作日志</p>
                    </div>
                </a>
            </div>
            
            <!-- 帮助文档卡片 -->
            <div class="col-md-4 col-sm-6">
                <a href="/help" class="dashboard-panel panel panel-info">
                    <div class="panel-body">
                        <span class="glyphicon glyphicon-question-sign"></span>
                        <h3 class="panel-title">帮助文档</h3>
                        <p class="text-muted">查看系统使用指南</p>
                    </div>
                </a>
            </div>
        </div>
    </div>

    <!-- Bootstrap 3 JS (only needed for dropdowns/modals, optional here) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>

Key Components Explained #

1. Responsive Grid Layout #

We use Bootstrap 3’s grid classes (col-md-4 col-sm-6) to make the cards adapt to different screen sizes:

• Medium screens (768px+): 3 cards per row
• Small screens (576px+): 2 cards per row
• Extra small screens: Cards stack vertically (1 per row)

2. Clickable Panels #

Instead of relying on JavaScript for clicks, we wrap the entire panel in an <a> tag. The custom .dashboard-panel class ensures the link behaves like a block element, so the whole panel is clickable—clean and accessible for screen readers.

3. Interactive Hover Effects #

The custom CSS adds subtle feedback when users hover over a card:

• A shadow and slight upward shift to signal interactivity
• A pointer cursor to indicate the panel is clickable
• No underline on hover, keeping the design clean

4. Built-in Styling #

We use Bootstrap’s panel color variants (panel-primary, panel-success, etc.) to differentiate cards, and Glyphicons (included with Bootstrap 3) for visual icons—no extra libraries required.

Additional Tips #

• Accessibility Alternative: If you prefer not to use block-level links, add an onclick event to the panel div and include a hidden link for screen readers:

  <div class="dashboard-panel panel panel-default" onclick="window.location.href='/user-management'">
      <div class="panel-body">
          <!-- Content here -->
      </div>
      <a href="/user-management" class="sr-only">用户管理</a>
  </div>
  

• Customization: Tweak padding, icon size, or colors in the custom CSS to match your brand.
• Extra Content: Add a panel-footer to include additional info like counts or last-updated timestamps.

内容的提问来源于stack exchange，提问作者Melu