[ASP.Net MVC] 如何套用 Bootstrap 网页设计样版 SB Admin 2 开发网站管理介面 (附范例)

想要快速开发一个 Bootstrap 网页设计样版的网站，可以利用网路上已经设计好的网页样版下载套用在自己的网站。
Bootstrap 提供非常好用的前端设计框架，包含 HTML, CSS 及 JavaScript 的模组可使用。
Bootstrap 支援 RWD 响应式网页设计，依行动装置及电脑桌面浏览器大小自动调整页面。
想了解更多 Bootstrap 说明可至官网: Bootstrap

接下来我会介绍一款网路上免费的 Bootstrap 样版: SB Admin 2 此样版很适合做为管理介面使用。
样版已经有基本美编视觉设计，专案开发时可以取得样版上的样式原始码来使用。
这次的范例我会说明如何将 SB Admin 2 网页样版搬到 ASP.Net MVC 专案上，最下方有附上此次修改结果范例档下载

下载 SB Admin 2 样版

SB Admin 2 下载连结

可以点左下角的「Live Preview」预览网页。
此样版提供常用的选单、卡片、图表、按钮、进度条、登入、注册等视觉设计。

点击「Free Download」下载档案，解压缩可看到原始码。

建立 ASP.Net MVC 专案

我新增一个范例专案，说明如何将 SB Admin 2 网页增加至 ASP.Net MVC 专案里面。
选择 ASP.Net Web 应用程序 (.Net Framework)

输入专案名称、路径，按下建立

专案类型选「MVC」

按下「建立」专案就完成了。

复制资源档案

这里我们要将下载 SB Admin 2 档案里面，资源档(CSS, Javascript, Image) 放到专案里面。

复制 CSS

专案目录 \Content 先清空原有的档案
将样版档案 startbootstrap-sb-admin-2-gh-pages\css 复制贴上至 \Content

复制 Javascript

专案目录 \Scripts 先清空原有档案
将样版档案 startbootstrap-sb-admin-2-gh-pages\js 及 startbootstrap-sb-admin-2-gh-pages\vendor 复制贴上至 \Scripts

复制 Image

将样版档案 startbootstrap-sb-admin-2-gh-pages\img 复制贴上至主目录 \

修改布局页 Views\Shared_Layout.cshtml

布局页(_Layout.cshtml)是设计网页整体的样式、排版及引用资源档的页面。
网页设计常有固定式的标题、选单、注脚等设计，将固定式的设计放在布局页，就可以使每一页都显示，当要修改时也只需要修改一个地方即可。

将下载样版页的 index.html 全部内容复制到 _Layout.cshtml 里面

修改 CSS 引用来源

修改在区的 CSS 引用来源

<link href="~/Scripts/vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i"
	  rel="stylesheet">
<link href="~/Content/sb-admin-2.min.css" rel="stylesheet">

所引用的档案在上一步都要先放至专案目录下才行喔。

修改 JavaScript 引用来源

修改在最下面的引用部份

<script src="~/Scripts/vendor/jquery/jquery.min.js"></script>
<script src="~/Scripts/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

<script src="~/Scripts/vendor/jquery-easing/jquery.easing.min.js"></script>

<script src="~/Scripts/js/sb-admin-2.min.js"></script>

<script src="~/Scripts/vendor/chart.js/Chart.min.js"></script>

<script src="~/Scripts/js/demo/chart-area-demo.js"></script>
<script src="~/Scripts/js/demo/chart-pie-demo.js"></script>

所引用的档案在上一步都要先放至专案目录下才行喔。