MVC 5 프로젝트에서 bootswatch 또는 wrapbootstrap에서 테마를 구현하려면 어떻게해야합니까?

Question 1

새 ASP.Net MVC5 웹 응용 프로그램을 만들려고합니다. 응용 프로그램에서 bootswatch 또는 wrapbootstrap의 테마를 사용하고 싶지만이를 수행하는 방법에 대한 지침을 찾을 수 없습니다.

Question 2

테마를 적용하는 단계는 매우 간단합니다. 모든 것이 함께 작동하는 방식을 제대로 이해하려면 ASP.NET MVC 5 템플릿이 기본적으로 제공하는 내용과 필요에 맞게 사용자 지정할 수있는 방법을 이해해야합니다.

_{참고 : MVC 5 템플릿의 작동 방식을 기본적으로 이해하고 있다면 테마 섹션으로 스크롤하십시오.}

ASP.NET MVC 5 템플릿 : 작동 방식

이 연습에서는 MVC 5 프로젝트를 만드는 방법과 내부에서 진행되는 작업에 대해 설명합니다 . 이 블로그 에서 MVC 5 템플릿의 모든 기능을 참조하십시오 .

새 프로젝트를 만듭니다. 템플릿에서 웹 > ASP.NET 웹 응용 프로그램을 선택합니다 . 프로젝트 이름을 입력하고을 클릭 OK합니다.
다음 마법사에서 MVC를 선택 하고을 클릭 OK합니다. 그러면 MVC 5 템플릿이 적용됩니다.
MVC 5 템플릿은 Bootstrap을 사용하여 반응 형 디자인 및 테마 기능을 제공하는 MVC 응용 프로그램을 만듭니다. 후드, 템플릿이 포함 부트 스트랩 3 * nuget 패키지 4 개 파일을 설치합니다 : bootstrap.css, bootstrap.min.css, bootstrap.js,와 bootstrap.min.js.

부트 스트랩은 웹 최적화 기능을 사용하여 애플리케이션에 번들로 제공됩니다. 검사 Views/Shared/_Layout.cshtml및 찾기

@Styles.Render("~/Content/css")

과

@Scripts.Render("~/bundles/bootstrap")

이 두 경로는에 설정된 번들을 참조합니다 App_Start/BundleConfig.cs.

bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
    "~/Scripts/bootstrap.js",
    "~/Scripts/respond.js"));

bundles.Add(new StyleBundle("~/Content/css").Include(
    "~/Content/bootstrap.css",
    "~/Content/site.css"));

이것이 사전 구성없이 애플리케이션을 실행할 수있게하는 것입니다. 지금 프로젝트를 실행 해보십시오.

ASP.NET MVC 5에서 부트 스트랩 테마 적용

이 연습에서는 MVC 5 프로젝트에서 부트 스트랩 테마를 적용하는 방법을 다룹니다.

먼저 css적용하려는 테마를 다운로드하십시오 . 이 예에서는 Bootswatch의 Flatly를 사용 합니다. 다운로드 포함 flatly.bootstrap.css하고 flatly.bootstrap.min.css에 Content폴더 (뿐만 아니라 프로젝트에 포함해야합니다)를.

App_Start/BundleConfig.cs다음을 열고 변경하십시오.

bundles.Add(new StyleBundle("~/Content/css").Include(
    "~/Content/bootstrap.css",
    "~/Content/site.css"));

새 테마를 포함하려면 :

bundles.Add(new StyleBundle("~/Content/css").Include(
    "~/Content/flatly.bootstrap.css",
    "~/Content/site.css"));

_Layout.cshtmlMVC 5 템플릿에 포함 된 기본값을 사용하는 경우 4 단계로 건너 뛸 수 있습니다. 그렇지 않은 경우 최소한 부트 스트랩 HTML 템플릿 과 함께 레이아웃에 다음 두 줄을 포함합니다 .

귀하의 <head>:
```
@Styles.Render("~/Content/css")
```
닫기 전 마지막 줄 </body>:
```
@Scripts.Render("~/bundles/bootstrap")
```
지금 프로젝트를 실행 해보십시오. 이제 테마를 사용하여 새로 만든 응용 프로그램을 볼 수 있습니다.

자원

ASP.NET MVC 5에서 Twitter Bootstrap을 사용하는 방법에 대한 자세한 정보, 자습서, 팁 및 트릭은 James Chambers의 멋진 30 일 워크 스루 가이드 를 확인하세요 .

Question 3

약간 늦을 수 있습니다. 그러나 누군가가 유용하다고 생각할 것입니다.

인기있는 Bootstrap 템플릿 인 AdminLTE를 MVC5에 통합하기위한 Nuget 패키지가 있습니다.

Visual Studio 패키지 관리자 콘솔에서이 명령을 실행하기 만하면됩니다.

Install-Package AdminLteMvc

주의 : 필요한 모든 파일을 다운로드하고 개발 과정을 안내 할 수있는 샘플 전체 및 부분보기 (.cshtml 파일)를 생성하므로 설치하는 데 시간이 걸릴 수 있습니다. 샘플 레이아웃 파일 _AdminLteLayout.cshtml도 제공됩니다.

~/Views/Shared/폴더 에서 파일을 찾을 수 있습니다.

Question 4

첫째, 당신이 당신의 위치를 찾을 수 있다면

bootstrap.css 파일

과

bootstrap.min.js 파일

당신의 컴퓨터에서 당신이하는 일은

먼저 http://bootswatch.com/ 에서 좋아하는 테마를 다운로드하십시오.

다운로드 한 bootstrap.css 및 bootstrap.min.js 파일을 복사하십시오.

그런 다음 컴퓨터에서 기존 파일을 찾아 새로 다운로드 한 파일로 바꿉니다.

참고 : 다운로드 한 파일의 이름 이 폴더에있는 이름 으로 변경 되었는지 확인하십시오 .

즉

그럼 당신은 갈 수 있습니다.

때로는 결과가 즉시 표시되지 않을 수 있습니다. 새로 고침 방법으로 브라우저에서 CSS를 실행해야 할 수도 있습니다.

Question 5

MSDN에 대한 기사가 있습니다-VS 2012, VS 2013 및 VS 2015를 사용하여 사용자 정의 부트 스트랩 테마 / 레이아웃으로 ASP.NET MVC 만들기, 데모 코드 샘플도 첨부되어 있습니다. 아래 링크를 참조하십시오. https://code.msdn.microsoft.com/ASPNET-MVC-application-62ffc106

Question 6

해야 할 일은 Bootswatch 웹 사이트에서 bootstrap.css 및 bootstrap.js 파일을 선택하고 다운로드 한 다음 원본 파일을이 파일로 바꾸는 것입니다.

물론 jQuery 경로 다음에 레이아웃 페이지에 경로를 추가해야합니다.

Question 7

Bootswatch는 좋은 대안이지만 MDBootstrap (Bootstrap 위에 구축 된 프런트 엔드 프레임 워크)을 사용하는 ASP.NET MVC 용으로 만들어진 여러 유형의 무료 템플릿을 여기서 찾을 수도 있습니다.

ASP.NET MVC MDB 템플릿