[ASP.NET MVC] 如何套用Bootstrap 網頁設計樣版SB Admin 2 ... | 首都客運時刻表查詢網
![[ASP.NET MVC] 如何套用Bootstrap 網頁設計樣版SB Admin 2 ...](https://i.imgur.com/2oxSoeJ.png)
2021年5月19日—修改佈局頁.佈局頁(Views-Shared-_Layout.cshtml)是設計網頁整體的樣式、排版及引用資源檔的頁面。
![[ASP.NET MVC] 如何套用Bootstrap 網頁設計樣版SB Admin 2 ...](https://i.imgur.com/2oxSoeJ.png)
想要快速開發一個 Bootstrap 網頁設計樣版的網站,可以利用網路上已經設計好的網頁樣版下載套用在自己的網站。 Bootstrap 提供非常好用的前端設計框架,包含 HTML, CSS 及 JavaScript 的模組可使用。 Bootstrap 支援 RWD 響應式網頁設計,依行動裝置及電腦桌面瀏覽器大小自動調整頁面。 想了解更多 Bootstrap 說明可至官網: Bootstrap[1]
接下來我會介紹一款網路上免費的 Bootstrap 樣版: SB Admin 2[2] 此樣版很適合做為管理介面使用。 樣版已經有基本美編視覺設計,專案開發時可以取得樣版上的樣式原始碼來使用。 這次的範例我會說明如何將 SB Admin 2 網頁樣版搬到 ASP.NET MVC 專案上,最下方有附上此次修改結果範例檔下載
下載 SB Admin 2 樣版SB Admin 2 下載連結[3]
可以點左下角的「Live Preview[4]」預覽網頁。 此樣版提供常用的選單、卡片、圖表、按鈕、進度條、登入、註冊等視覺設計。
點擊「Free Download」下載檔案,解壓縮可看到原始碼。
建立 ASP.NET MVC 專案
我新增一個範例專案,說明如何將 SB Admin 2 網頁增加至 ASP.NET MVC 專案裡面。 選擇 ASP.NET Web 應用程式 (.Net Framework)
輸入專案名稱、路徑,按下建立
專案類型選「MVC」
按下「建立」專案就完成了。
複製資源檔案這裡我們要將下載 SB Admin...