您好,登錄后才能下訂單哦!
這篇文章主要介紹ASP.NET Core Web App如何應(yīng)用第三方Bootstrap模板,文中介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們一定要看完!
引言
作為后端開發(fā)來說,前端表示玩不轉(zhuǎn),我們一般會選擇套用一些開源的Bootstrap 模板主題來進(jìn)行前端設(shè)計(jì)。那如何套用呢?今天就簡單創(chuàng)建一個ASP.NET Core Web MVC 模板項(xiàng)目為例,來應(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)來看,我們可以看到wwwroot目錄下包含了css、images、js、lib目錄,其中l(wèi)ib目錄默認(rèn)引用了bootstrap、jquery相關(guān)包。因?yàn)槭呛唵蔚哪0屙?xiàng)目,所以UI就很將就。
2. 下載AdminLte
目前AdminLte在計(jì)劃發(fā)布AdminLTE 3.0版本,不過現(xiàn)在還處于Alpha版本。我們下載AdminLTE-V2.4.3 (本地下載)來使用。
下載后解壓得到的項(xiàng)目結(jié)構(gòu)如下:
AdminLte Structure
3. 替換模板
基于AdminLTE進(jìn)行開發(fā),僅需要復(fù)制dist目錄,及其依賴的bower包就可以了。
第一步:我們清空wwwroot下的全部目錄(我這邊暫時保留了images文件夾,后面會用到)。
第二步:然后復(fù)制dist目錄到wwwroot下。
其依賴的bower包是安裝在bower_components目錄下的。我們無需直接復(fù)制整個bower_components文件夾,我們復(fù)制bower.json包定義文件即可。
第三步:復(fù)制AdminLTE下的bower.json到ASP.NET Core Mvc根目錄下。
第四步:使用VS2017打開項(xiàng)目后,我們可以看到VS2017已經(jīng)可以識別到未安裝的Bower包。
右鍵就可以還原bower包。不過先慢著,我們現(xiàn)在還原就會直接還原bower包到根目錄下了,并沒有還原bower包到wwwroot文件夾下。
第五步:新增.bowerrc文件,配置包安裝路徑即可。這里我們指定為了wwwroot\plugins。(這里沒有指定為wwwroot\bower_components,與原始AdminLTE的目錄結(jié)構(gòu)保持一致,是因?yàn)槿绻付閣wwroot\bower_components,還原包后bower_components默認(rèn)不會包含在項(xiàng)目中。)
第六步:Restore Package,還原成功后,我們會發(fā)現(xiàn)plugins文件夾已包含顯示在wwwroot目錄下了。
配置bower包安裝路徑
4. 修改_Layout.cshtml
接下來我們將AdminLTE的預(yù)置起始頁面starter.html移植進(jìn)我們的布局頁面_Layout.cshtml。
我們先來觀察一下我們默認(rèn)的布局頁。
主要有以上幾個地方需要注意。
根據(jù)環(huán)境配置css和js的加載
@RenderBody()
@RenderSection("Scripts", required: false)
我們直接暴力復(fù)制starter.html的內(nèi)容復(fù)制粘貼到_Layout.cshtml,然后再將以上三個點(diǎn)進(jìn)行修改即可。然后修改引用的css、js路徑即可。修改后的截圖如下:
updated _Layout.cshtml
updated _Layout.cshtml
最終效果
CTRL+F5運(yùn)行效果圖如下,至此我們成功完成AdminLTE主題的應(yīng)用。DEMO已上傳到Github。
以上是“ASP.NET Core Web App如何應(yīng)用第三方Bootstrap模板”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對大家有幫助,更多相關(guān)知識,歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。