새 ASP.Net MVC5 웹 응용 프로그램을 만들려고합니다. 응용 프로그램에서 bootswatch 또는 wrapbootstrap의 테마를 사용하고 싶지만이를 수행하는 방법에 대한 지침을 찾을 수 없습니다.
답변
테마를 적용하는 단계는 매우 간단합니다. 모든 것이 함께 작동하는 방식을 제대로 이해하려면 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 일 워크 스루 가이드 를 확인하세요 .
답변
약간 늦을 수 있습니다. 그러나 누군가가 유용하다고 생각할 것입니다.
인기있는 Bootstrap 템플릿 인 AdminLTE를 MVC5에 통합하기위한 Nuget 패키지가 있습니다.
Visual Studio 패키지 관리자 콘솔에서이 명령을 실행하기 만하면됩니다.
Install-Package AdminLteMvc
주의 : 필요한 모든 파일을 다운로드하고 개발 과정을 안내 할 수있는 샘플 전체 및 부분보기 (.cshtml 파일)를 생성하므로 설치하는 데 시간이 걸릴 수 있습니다. 샘플 레이아웃 파일 _AdminLteLayout.cshtml도 제공됩니다.
~/Views/Shared/폴더 에서 파일을 찾을 수 있습니다.
답변
첫째, 당신이 당신의 위치를 찾을 수 있다면
bootstrap.css 파일
과
bootstrap.min.js 파일
당신의 컴퓨터에서 당신이하는 일은
먼저 http://bootswatch.com/ 에서 좋아하는 테마를 다운로드하십시오.
다운로드 한 bootstrap.css 및 bootstrap.min.js 파일을 복사하십시오.
그런 다음 컴퓨터에서 기존 파일을 찾아 새로 다운로드 한 파일로 바꿉니다.
참고 : 다운로드 한 파일의 이름 이 폴더에있는 이름 으로 변경 되었는지 확인하십시오 .
즉
그럼 당신은 갈 수 있습니다.
때로는 결과가 즉시 표시되지 않을 수 있습니다. 새로 고침 방법으로 브라우저에서 CSS를 실행해야 할 수도 있습니다.
답변
MSDN에 대한 기사가 있습니다-VS 2012, VS 2013 및 VS 2015를 사용하여 사용자 정의 부트 스트랩 테마 / 레이아웃으로 ASP.NET MVC 만들기, 데모 코드 샘플도 첨부되어 있습니다. 아래 링크를 참조하십시오.
https://code.msdn.microsoft.com/ASPNET-MVC-application-62ffc106
답변
해야 할 일은 Bootswatch 웹 사이트에서 bootstrap.css 및 bootstrap.js 파일을 선택하고 다운로드 한 다음 원본 파일을이 파일로 바꾸는 것입니다.
물론 jQuery 경로 다음에 레이아웃 페이지에 경로를 추가해야합니다.
답변
Bootswatch는 좋은 대안이지만 MDBootstrap (Bootstrap 위에 구축 된 프런트 엔드 프레임 워크)을 사용하는 ASP.NET MVC 용으로 만들어진 여러 유형의 무료 템플릿을 여기서 찾을 수도 있습니다.
답변
