[ASP.NET MVC] 如何套用Bootstrap 網頁設計樣版SB Admin 2 ... | Bootstrap 3 版型
想要快速開發一個Bootstrap網頁設計樣版的網站,可以利用網路上已經設計好的網頁樣版下載套用在自己的網站。Bootstrap提供非常好用的前端設計框架,包含HTML,CSS及JavaScript的模組可使用。Bootstrap支援RWD響應式網頁設計,依行動裝置及電腦桌面瀏覽器大小自動調整頁面。想了解更多Bootstrap說明可至官網:Bootstrap[1]接下來我會介紹一款網路上免費的Bootstrap樣版:SBAdmin2[2]此樣版很適合做為管理介面使用。樣版已經有基本美編視覺設計,專案開發時可以取得樣版上的樣式原始碼來使用。這次的範例我會說明如何將SBAdmin2網頁樣版搬...
想要快速開發一個 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 2 檔案裡面,資源檔(CSS, Javascript, Image) 放到專案裡面。
複製 CSS專案目錄 Content 先清空原有的檔案將樣版檔案 startbootstrap-sb-admin-2-gh-pagescss 複製貼上至 Content
複製 Javascript專案目錄 Scripts 先清空原有檔案將樣版檔案 startbootstrap-sb-admin-2-gh-pag...