在 ASP.NET Core MVC 中使用 Bootstrap 实现可点击 Tiles 并跳转网站

Bootstrap不是实现磁贴效果的唯一方案，但对新手、以及基于ASP.NET Core MVC开发的场景来说，是性价比很高的选择：

• 官方ASP.NET Core MVC模板默认集成Bootstrap，无需额外安装配置
• 内置响应式栅格系统，自动适配手机、平板、桌面端的磁贴排列，不用手写多端适配逻辑
• 仅需少量自定义CSS即可实现磁贴样式，学习成本低
  如果只是做固定数量的静态磁贴，纯HTML+CSS也能实现，但需要自行处理响应式兼容，新手选择Bootstrap开发效率更高。

如果你使用的是Visual Studio默认的「ASP.NET Core MVC（非空模板）」，项目已经在Views/Shared/_Layout.cshtml中引入了Bootstrap样式，直接编写业务代码即可，无需额外安装。

静态磁贴写法 #

在需要展示磁贴的视图（例如Views/Home/Index.cshtml）中编写以下代码：

@{
    ViewData["Title"] = "首页";
}

@section Styles {
<style>
    /* 磁贴行间距 */
    .tile-row {
        gap: 1rem;
    }

    /* 磁贴基础样式 */
    .tile-item {
        min-height: 120px;
        background-color: #f0f4f8;
        border-radius: 8px;
        /* 内容垂直水平居中 */
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        /* 清除链接默认样式 */
        text-decoration: none;
        color: #2d3748;
        font-weight: 500;
        /* 悬停过渡动画 */
        transition: all 0.2s ease;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    /* 鼠标悬停效果 */
    .tile-item:hover {
        transform: translateY(-3px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        background-color: #e2e8f0;
    }

    /* 磁贴图标间距 */
    .tile-icon {
        font-size: 2rem;
        margin-bottom: 0.5rem;
    }
</style>
}

<div class="container mt-4">
    <h3 class="mb-4">功能入口</h3>
    <div class="row tile-row">
        <!-- 
            col-6：手机端一行显示2个
            col-md-4：中等屏幕以上一行显示3个
            col-lg-3：大屏幕一行显示4个
            可根据需求自行调整栅格参数
        -->
        <div class="col-6 col-md-4 col-lg-3">
            <a 
                class="tile-item w-100" 
                href="目标站点地址" 
                target="_blank" 
                rel="noopener noreferrer"
            >
                <div class="tile-icon">📄</div>
                <span>站点1</span>
            </a>
        </div>
        <div class="col-6 col-md-4 col-lg-3">
            <a 
                class="tile-item w-100" 
                href="目标站点地址" 
                target="_blank" 
                rel="noopener noreferrer"
            >
                <div class="tile-icon">📊</div>
                <span>站点2</span>
            </a>
        </div>
        <div class="col-6 col-md-4 col-lg-3">
            <a 
                class="tile-item w-100" 
                href="目标站点地址" 
                target="_blank" 
                rel="noopener noreferrer"
            >
                <div class="tile-icon">⚙️</div>
                <span>站点3</span>
            </a>
        </div>
        <div class="col-6 col-md-4 col-lg-3">
            <a 
                class="tile-item w-100" 
                href="目标站点地址" 
                target="_blank" 
                rel="noopener noreferrer"
            >
                <div class="tile-icon">❓</div>
                <span>站点4</span>
            </a>
        </div>
    </div>
</div>

参数说明：

• 把href属性的占位文本替换为实际跳转地址即可，target="_blank"会让页面在新标签页打开
• rel="noopener noreferrer"是外跳的安全配置，防止外部站点操作原页面，建议保留
• 磁贴的高度、颜色、圆角、阴影效果都可以直接修改CSS参数自定义

动态渲染磁贴（推荐） #

实际项目中磁贴数据一般从后端加载，可以通过后端传集合、视图循环的方式渲染，避免重复代码。

1. 先在Models文件夹新建磁贴实体类TileItem.cs：

namespace 你的项目名称.Models;

public class TileItem
{
    /// <summary>
    /// 磁贴标题
    /// </summary>
    public string Title { get; set; } = string.Empty;
    
    /// <summary>
    /// 跳转地址
    /// </summary>
    public string Url { get; set; } = string.Empty;
    
    /// <summary>
    /// 磁贴图标（示例用emoji，也可替换为图标字体类名）
    /// </summary>
    public string Icon { get; set; } = string.Empty;
    
    /// <summary>
    /// 自定义背景色（可选）
    /// </summary>
    public string? BgColor { get; set; }
}

2. 在对应控制器（例如HomeController.cs）中传入数据：

using 你的项目名称.Models;

public class HomeController : Controller
{
    public IActionResult Index()
    {
        // 实际开发可从数据库或配置文件读取数据
        var tileList = new List<TileItem>
        {
            new() { Title = "站点1", Url = "目标地址", Icon = "📄", BgColor = "#ebf8ff" },
            new() { Title = "站点2", Url = "目标地址", Icon = "📊", BgColor = "#f0fff4" },
            new() { Title = "站点3", Url = "目标地址", Icon = "⚙️", BgColor = "#fffaf0" },
            new() { Title = "站点4", Url = "目标地址", Icon = "❓", BgColor = "#faf5ff" }
        };
        return View(tileList);
    }
}

3. 视图中通过循环渲染磁贴，替换原有静态磁贴的重复结构：

@model List<你的项目名称.Models.TileItem>
@{
    ViewData["Title"] = "首页";
}

@section Styles {
<style>
    /* 样式和静态写法一致，可复用 */
    .tile-row {
        gap: 1rem;
    }
    .tile-item {
        min-height: 120px;
        border-radius: 8px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        color: #2d3748;
        font-weight: 500;
        transition: all 0.2s ease;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }
    .tile-item:hover {
        transform: translateY(-3px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }
    .tile-icon {
        font-size: 2rem;
        margin-bottom: 0.5rem;
    }
</style>
}

<div class="container mt-4">
    <h3 class="mb-4">功能入口</h3>
    <div class="row tile-row">
        @foreach (var tile in Model)
        {
            <div class="col-6 col-md-4 col-lg-3">
                <a 
                    class="tile-item w-100" 
                    href="@tile.Url" 
                    target="_blank" 
                    rel="noopener noreferrer"
                    style="background-color: @(tile.BgColor ?? "#f0f4f8")"
                >
                    <div class="tile-icon">@tile.Icon</div>
                    <span>@tile.Title</span>
                </a>
            </div>
        }
    </div>
</div>

• 如果需要大小不一的磁贴效果，只需给对应磁贴的外层设置不同的栅格类，例如大磁贴用col-12 col-md-8、小磁贴用col-6 col-md-4，无需额外写布局代码。
• 如果使用空模板新建项目没有集成Bootstrap，手动引入Bootstrap样式文件后即可使用上述代码。
• 该方案只用到Bootstrap的栅格布局能力，磁贴样式完全自定义，不会受Bootstrap默认组件风格限制。

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