這篇文章主要介紹ASP.NET Core Web App如何應(yīng)用第三方Bootstrap模板，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來自于我們對這個行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價值的長期合作伙伴，公司提供的服務(wù)項目有：申請域名、網(wǎng)站空間、營銷軟件、網(wǎng)站建設(shè)、浮梁網(wǎng)站維護、網(wǎng)站推廣。

引言

作為后端開發(fā)來說，前端表示玩不轉(zhuǎn)，我們一般會選擇套用一些開源的Bootstrap 模板主題來進行前端設(shè)計。那如何套用呢？今天就簡單創(chuàng)建一個ASP.NET Core Web MVC 模板項目為例，來應(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模板項目。項目結(jié)構(gòu)如下圖：

MVC Demo structure

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

2. 下載AdminLte

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

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

AdminLte Structure

3. 替換模板

基于AdminLTE進行開發(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打開項目后，我們可以看到VS2017已經(jīng)可以識別到未安裝的Bower包。

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

第五步：新增.bowerrc文件，配置包安裝路徑即可。這里我們指定為了wwwroot\plugins。（這里沒有指定為wwwroot\bower_components，與原始AdminLTE的目錄結(jié)構(gòu)保持一致，是因為如果指定為wwwroot\bower_components，還原包后bower_components默認不會包含在項目中。）

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

配置bower包安裝路徑

4. 修改_Layout.cshtml

接下來我們將AdminLTE的預(yù)置起始頁面starter.html移植進我們的布局頁面_Layout.cshtml。
我們先來觀察一下我們默認的布局頁。

主要有以上幾個地方需要注意。

1. 根據(jù)環(huán)境配置css和js的加載

2. @RenderBody()

3. @RenderSection("Scripts", required: false)

我們直接暴力復(fù)制starter.html的內(nèi)容復(fù)制粘貼到_Layout.cshtml，然后再將以上三個點進行修改即可。然后修改引用的css、js路徑即可。修改后的截圖如下：

updated _Layout.cshtml

updated _Layout.cshtml

最終效果

CTRL+F5運行效果圖如下，至此我們成功完成AdminLTE主題的應(yīng)用。DEMO已上傳到Github。

以上是“ASP.NET Core Web App如何應(yīng)用第三方Bootstrap模板”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

文章題目：ASP.NETCoreWebApp如何應(yīng)用第三方Bootstrap模板-創(chuàng)新互聯(lián)
當(dāng)前路徑：http://www.rwnh.cn/article46/csiohg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供做網(wǎng)站、營銷型網(wǎng)站建設(shè)、靜態(tài)網(wǎng)站、標(biāo)簽優(yōu)化、建站公司、微信公眾號

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)