[ASP.Net MVC] 如何套用 Bootstrap 網頁設計樣版 SB Admin 2 開發網站管理介面 (附範例)

工程師 Mars

2021 年 8 月 3 日

IPFS

想要快速開發一個 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 引用來源

修改在 <head> 區的 CSS 引用來源

<!-- Custom fonts for this template-->
<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">

<!-- Custom styles for this template-->
<link href="~/Content/sb-admin-2.min.css" rel="stylesheet">

所引用的檔案在上一步都要先放至專案目錄下才行喔。

修改 JavaScript 引用來源

修改在 <body> 最下面的引用部份

<!-- Bootstrap core JavaScript-->
<script src="~/Scripts/vendor/jquery/jquery.min.js"></script>
<script src="~/Scripts/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

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

<!-- Custom scripts for all pages-->
<script src="~/Scripts/js/sb-admin-2.min.js"></script>

<!-- Page level plugins -->
<script src="~/Scripts/vendor/chart.js/Chart.min.js"></script>

<!-- Page level custom scripts -->
<script src="~/Scripts/js/demo/chart-area-demo.js"></script>
<script src="~/Scripts/js/demo/chart-pie-demo.js"></script>

所引用的檔案在上一步都要先放至專案目錄下才行喔。