在ASP.NET MVC项目里使用Bootstrap，核心思路是利用MVC的布局页（Layout）统一加载前端框架，再在子视图中专注于业务数据展示。这种方式能把样式与结构解耦，让后端开发人员不必反复编写原生CSS，也能交付整齐的响应式界面。
一、准备Bootstrap资源与项目结构
新建一个ASP.NET MVC项目后，推荐通过NuGet安装Bootstrap包，这样版本管理和更新都比较方便。安装完成后，相关CSS与JS文件会出现在Content和Scripts目录下。相较于手动下载拷贝，NuGet方式能自动处理依赖，例如Bootstrap的JS需要jQuery支持，包管理器会一并拉取。
在项目结构中，我们通常会保留默认的Views/Shared文件夹，用来存放布局页。Bootstrap的样式文件建议在布局页中统一引用，避免每个视图重复书写link标签。下面是一个典型的资源引用顺序，注意jQuery必须早于Bootstrap的JS加载，否则下拉菜单、模态框等交互组件无法初始化。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>@ViewBag.Title</title>
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
@RenderBody()
<script src="~/Scripts/jquery-3.6.0.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
</body>
</html>
上述代码中的@RenderBody()是Razor语法，代表子页面内容注入点。把视口meta标签写上，是保证Bootstrap栅格在手机端正常缩放的前提，很多初学者漏掉这一行，导致移动端页面显示异常。
二、创建布局页并应用Bootstrap导航
在Views/Shared下新建_Layout.cshtml，将上节的HTML骨架放进去，并加入一个Bootstrap导航条。导航条使用navbar类，配合collapse插件实现小屏折叠。这样后台系统无论在内网大屏还是平板办公，都能有基本可用性。
布局页写好之后，需要在Views/_ViewStart.cshtml里指定默认布局，或者每个视图通过Layout属性显式声明。下面示例展示了一个带品牌名和菜单的导航结构，其中使用Html.ActionLink生成符合路由规则的链接，而不是硬编码a标签，便于后期改路由。
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">订单后台</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navMenu">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navMenu">
<ul class="navbar-nav">
<li class="nav-item">
@Html.ActionLink("订单列表", "Index", "Order", null, new { @class = "nav-link" })
</li>
<li class="nav-item">
@Html.ActionLink("新增订单", "Create", "Order", null, new { @class = "nav-link" })
</li>
</ul>
</div>
</nav>
<div class="container mt-3">
@RenderBody()
</div>
这里用@Html.ActionLink而不是裸写的<a>标签，是因为MVC的路由可能变化，Helper会自动拼接正确路径。如果直接写死href，一旦改了RouteConfig里的默认路由，所有菜单都会404。同时container和mt-3是Bootstrap的间距与容器类，让内容不会贴边。
三、在子视图中渲染业务表格
假设我们有一个Order控制器，Index动作返回订单集合。子视图Order/Index.cshtml可以继承布局页，然后用Bootstrap的table类呈现数据。Bootstrap提供了table-striped、table-hover等修饰类，几秒钟就能做出带隔行变色和悬停高亮的表格，不必自己写一堆CSS。
在Razor中遍历模型时，建议配合Html.DisplayNameFor和DisplayFor，这样既保持强类型安全，又方便统一改显示名。下面代码演示了如何把一个List<Order>模型铺成响应式表格，并在小屏幕上用table-responsive包裹，防止列过多把页面撑破。
@model IEnumerable<MyApp.Models.Order>
@{
ViewBag.Title = "订单列表";
}
<h2>订单列表</h2>
<div class="table-responsive">
<table class="table table-striped table-hover">
<thead>
<tr>
<th>@Html.DisplayNameFor(m => m.Id)</th>
<th>@Html.DisplayNameFor(m => m.Customer)</th>
<th>@Html.DisplayNameFor(m => m.Amount)</th>
<th>@Html.DisplayNameFor(m => m.CreateTime)</th>
</tr>
</thead>
<tbody>
@foreach (var item in Model)
{
<tr>
<td>@Html.DisplayFor(m => item.Id)</td>
<td>@Html.DisplayFor(m => item.Customer)</td>
<td>@Html.DisplayFor(m => item.Amount)</td>
<td>@Html.DisplayFor(m => item.CreateTime)</td>
</tr>
}
</tbody>
</table>
</div>
这段代码中，table-responsive会在窄屏时出现横向滚动条，而不是让表格挤压变形。若数据量较大，还应结合MvcPaging等分页组件，用Bootstrap的pagination类渲染页码，保持整体风格统一。注意不要为了省事把全部数据一次性输出到页面，那样既慢又让DOM过重。
四、打包压缩与常见疏漏
上线前应使用ASP.NET的BundleConfig对CSS和JS打包，减少请求数。但很多人在注册bundle时，把Bootstrap和自定义脚本写错顺序，或者遗漏了启用优化开关，导致本地调试正常、发布后样式全失。正确的做法是在App_Start/BundleConfig.cs里分别建好StyleBundle和ScriptBundle。
另一个常见误区是直接在视图里写<link>引用未打包的bootstrap.min.css，又在布局页通过@Styles.Render输出打包版，结果页面加载了两遍样式，产生难以排查的覆盖冲突。应当统一走bundle机制，视图中只保留业务相关的少量style。下面给出打包配置示例：
public class BundleConfig
{
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new StyleBundle("~/bundles/css").Include(
"~/Content/bootstrap.min.css",
"~/Content/site.css"));
bundles.Add(new ScriptBundle("~/bundles/js").Include(
"~/Scripts/jquery-3.6.0.min.js",
"~/Scripts/bootstrap.min.js"));
}
}
在布局页改用@Styles.Render("~/bundles/css")与@Scripts.Render("~/bundles/js")后，Web.config里把compilation debug设为false，优化才会生效。这样整合Bootstrap的MVC后台既便于维护，也具备基本性能保障。
ASP.NET_MVCBootstrap后台布局修改时间：2026-08-01 03:36:45