ASP.NET MVC 中的「样式和布局」主要靠下面这几块配合完成，学会了就能轻松做出漂亮、统一、可维护的前后台界面。
一、核心布局文件（_Layout.cshtml）
位置（两种常见写法）：
- 经典写法：
Views/Shared/_Layout.cshtml→ 前台通用布局 - 后台写法：
Areas/Admin/Views/Shared/_AdminLayout.cshtml→ 后台专用布局
标准 _Layout.cshtml 模板（2025 年推荐写法，兼容 Bootstrap 5）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>@ViewBag.Title - 我的网站</title>
<!-- CSS（使用 Bundle 或直接 CDN） -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="~/Content/site.css" rel="stylesheet" /> <!-- 自己额外写的样式 -->
@RenderSection("styles", required: false) <!-- 每个页面可额外插入 css -->
</head>
<body>
<!-- 顶部导航栏 -->
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<div class="container">
<a class="navbar-brand" href="/">我的商城</a>
<div class="navbar-nav ms-auto">
@Html.Partial("_LoginPartial") <!-- 右上角：登录/注册/用户名 -->
</div>
</div>
</nav>
<!-- 页面主体 -->
<div class="container body-content">
@RenderBody() <!-- ★ 这里渲染每个页面的内容 ★ -->
</div>
<!-- 底部 -->
<footer class="bg-light text-center py-4 mt-5">
<p>© @DateTime.Now.Year - 我的网站，所有代码都是自己写的</p>
</footer>
<!-- JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/Scripts/jquery-3.7.1.min.js"></script>
@Scripts.Render("~/bundles/jqueryval") <!-- 客户端验证 -->
@RenderSection("scripts", required: false) <!-- 每个页面可额外插入 js -->
</body>
</html>二、让每个页面自动使用这个布局（两种方法）
方法1：在每个视图最上面写（最常用）
@{
Layout = "~/Views/Shared/_Layout.cshtml"; // 前台
// Layout = "~/Areas/Admin/Views/Shared/_AdminLayout.cshtml"; // 后台
}方法2：全局统一设置（推荐，省事）
在 Views/_ViewStart.cshtml 里写一次就全部生效：
@{
Layout = "~/Views/Shared/_Layout.cshtml";
}后台 Admin 区域单独在 Areas/Admin/Views/_ViewStart.cshtml 里再写一次，覆盖成自己的布局。
三、常见布局技巧（99% 项目都会用到）
| 需求 | 写法示例 |
|---|---|
| 给当前页面单独加标题 | @{ ViewBag.Title = "商品列表"; } |
| 页面要额外插入 CSS | 在具体页面顶部加入@section styles { <link href="~/Content/datatable.css" rel="stylesheet" /> } |
| 页面要额外插入 JS | @section scripts { <script src="~/Scripts/mychart.js"></script> } |
| 面包屑导航 | 在 _Layout 里放 @RenderSection("breadcrumb", false)，然后每个页面自己填 |
| 左侧菜单（后台常见） | 在 _AdminLayout.cshtml 放左侧 <aside>，用 @Html.Action("Menu","Nav") 动态生成菜单 |
四、样式文件组织建议（企业级标准）
Content/
├─ css/
│ ├─ site.css ← 全局自定义样式
│ ├─ admin.css ← 后台专用
│ └─ themes/dark.css ← 黑暗模式（可选）
├─ bootstrap/ ← 如果你想本地放 Bootstrap
└─ fonts/
Scripts/
├─ jquery.validate.min.js
├─ admin.js
└─ site.js五、快速美化整站的 3 个神器（2025 最新推荐）
| 工具 | 用途 | 一行代码接入 |
|---|---|---|
| Bootstrap 5 | 响应式 + 组件最全 | CDN 两行搞定 |
| AdminLTE 3（免费） | 最漂亮的后台模板 | https://adminlte.io |
| Bootswatch | 免费换肤（22 套主题） | 换一个 CDN 链接即可 |
示例：想用 AdminLTE 做后台，只需要把 Areas/Admin/Views/Shared/_AdminLayout.cshtml 整个替换成官方模板就行，5 分钟出效果。
六、完整示例：前台 + 后台两种布局完美共存
Views/
├─ Shared/
│ └─ _Layout.cshtml ← 前台（Bootstrap 5 简洁风）
└─ _ViewStart.cshtml ← 默认使用前台布局
Areas/
└─ Admin/
└─ Views/
├─ Shared/
│ └─ _AdminLayout.cshtml ← 后台（AdminLTE 深色侧边栏）
└─ _ViewStart.cshtml ← 强制后台所有页面使用 _AdminLayout这样访问 /Home/Index 用前台布局，访问 /Admin/Dashboard 自动切换成后台布局，完美！
需要我直接发你两个超好看的现成布局包吗？
- 前台：Bootstrap 5 + 极简风（带响应式导航）
- 后台：AdminLTE 3.2 中文版（已汉化，带动态菜单、权限示例）
直接拉到项目里覆盖 Views/Shared 和 Areas/Admin/Views/Shared，F5 运行立刻高大上，随时说一声就发！
