快捷導(dǎo)航

ASP.NET Core Web App應(yīng)用第三方Bootstrap模板的方法教程

更新時(shí)間：2018年06月03日 10:51:34 作者：圣杰

這篇文章主要給大家介紹了關(guān)于ASP.NET Core Web App應(yīng)用第三方Bootstrap模板的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起看看吧

引言

作為后端開(kāi)發(fā)來(lái)說(shuō)，前端表示玩不轉(zhuǎn)，我們一般會(huì)選擇套用一些開(kāi)源的Bootstrap 模板主題來(lái)進(jìn)行前端設(shè)計(jì)。那如何套用呢？今天就簡(jiǎn)單創(chuàng)建一個(gè)ASP.NET Core Web MVC 模板項(xiàng)目為例，來(lái)應(yīng)用第三方Bootstrap Template——Admin LTE。

AdminLte Dashboard

1. 創(chuàng)建ASP.NET Core MVC Demo

命令行執(zhí)行dotnet new mvc -n ApplyBootstrapTemplate，即可創(chuàng)建預(yù)置的MVC模板項(xiàng)目。項(xiàng)目結(jié)構(gòu)如下圖：

MVC Demo structure

從項(xiàng)目結(jié)構(gòu)來(lái)看，我們可以看到wwwroot目錄下包含了css、images、js、lib目錄，其中l(wèi)ib目錄默認(rèn)引用了bootstrap、jquery相關(guān)包。因?yàn)槭呛?jiǎn)單的模板項(xiàng)目，所以UI就很將就。

2. 下載AdminLte

目前AdminLte在計(jì)劃發(fā)布AdminLTE 3.0版本，不過(guò)現(xiàn)在還處于Alpha版本。我們下載AdminLTE-V2.4.3 (本地下載)來(lái)使用。

下載后解壓得到的項(xiàng)目結(jié)構(gòu)如下：

AdminLte Structure

3. 替換模板

基于AdminLTE進(jìn)行開(kāi)發(fā)，僅需要復(fù)制dist目錄，及其依賴的bower包就可以了。

第一步：我們清空wwwroot下的全部目錄（我這邊暫時(shí)保留了images文件夾，后面會(huì)用到）。

第二步：然后復(fù)制dist目錄到wwwroot下。

其依賴的bower包是安裝在bower_components目錄下的。我們無(wú)需直接復(fù)制整個(gè)bower_components文件夾，我們復(fù)制bower.json包定義文件即可。

第三步：復(fù)制AdminLTE下的bower.json到ASP.NET Core Mvc根目錄下。

第四步：使用VS2017打開(kāi)項(xiàng)目后，我們可以看到VS2017已經(jīng)可以識(shí)別到未安裝的Bower包。

右鍵就可以還原bower包。不過(guò)先慢著，我們現(xiàn)在還原就會(huì)直接還原bower包到根目錄下了，并沒(méi)有還原bower包到wwwroot文件夾下。

第五步：新增.bowerrc文件，配置包安裝路徑即可。這里我們指定為了wwwroot\plugins。（這里沒(méi)有指定為wwwroot\bower_components，與原始AdminLTE的目錄結(jié)構(gòu)保持一致，是因?yàn)槿绻付閣wwroot\bower_components，還原包后bower_components默認(rèn)不會(huì)包含在項(xiàng)目中。）

第六步：Restore Package，還原成功后，我們會(huì)發(fā)現(xiàn)plugins文件夾已包含顯示在wwwroot目錄下了。