Program Tip

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

programtip 2020. 10. 13. 19:03
반응형

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

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

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

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

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

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

  1. 새 프로젝트를 만듭니다. 템플릿에서 웹 > ASP.NET 웹 응용 프로그램을 선택합니다 . 프로젝트 이름을 입력하고을 클릭 OK합니다.

  2. 다음 마법사에서 MVC를 선택 하고을 클릭 OK합니다. 그러면 MVC 5 템플릿이 적용됩니다.

    MVC 템플릿 선택 예

  3. MVC 5 템플릿은 Bootstrap을 사용하여 반응 형 디자인 및 테마 기능을 제공하는 MVC 응용 프로그램을 만듭니다. 후드, 템플릿이 포함 부트 스트랩 3 * nuget 패키지 4 개 파일을 설치합니다 : bootstrap.css, bootstrap.min.css, bootstrap.js,와 bootstrap.min.js.

    설치된 css 및 js의 예

  4. 부트 스트랩은 웹 최적화 기능을 사용하여 애플리케이션에 번들로 제공됩니다. 검사 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"));

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

    기본 애플리케이션 실행

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

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

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

  2. 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"));

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

    In your <head>:

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

    Last line before closing </body>:

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

  4. Try running your project now. You should see your newly created application now using your theme.

    단순 테마를 사용하는 기본 템플릿

Resources

Check out this awesome 30 day walk-through guide by James Chambers for more information, tutorials, tips and tricks on how to use Twitter Bootstrap with ASP.NET MVC 5.

This may be a little late; but someone will find it useful.

There's a Nuget Package for integrating AdminLTE - a popular Bootstrap template - to MVC5

Simply run this command in your Visual Studio Package Manager console

Install-Package AdminLteMvc

NB: It may take a while to install because it downloads all necessary files as well as create sample full and partial views (.cshtml files) that can guide you as you develop. A sample layout file _AdminLteLayout.cshtml is also provided.

You'll find the files in ~/Views/Shared/ folder

First, if you are able to locate your

bootstrap.css file

and

bootstrap.min.js file

in your computer, then what you just do is

First download your favorite theme i.e. from http://bootswatch.com/

Copy the downloaded bootstrap.css and bootstrap.min.js files

Then in your computer locate the existing files and replace them with the new downloaded files.

NOTE: ensure your downloaded files are renamed to what is in your folder

i.e.

여기에 이미지 설명 입력

Then you are good to go.

sometimes result may not display immediately. your may need to run the css on your browser as a way of refreshing

I do have an article on MSDN - Creating ASP.NET MVC with custom bootstrap theme / layout using VS 2012, VS 2013 and VS 2015, also have a demo code sample attached.. Please refer below link. https://code.msdn.microsoft.com/ASPNET-MVC-application-62ffc106

All what you have to do is to select and download the bootstrap.css and bootstrap.js files from Bootswatch website, and then replace the original files with them.

Of course you have to add the paths to your layout page after the jQuery path that is all.

참고 URL : https://stackoverflow.com/questions/21839351/how-can-i-implement-a-theme-from-bootswatch-or-wrapbootstrap-in-an-mvc-5-project

반응형

'Program Tip' 카테고리의 다른 글

Statement.RETURN_GENERATED_KEYS가있는 PreparedStatement  (0) 2020.10.13
Core Data에 BOOL 술어를 작성하는 방법은 무엇입니까?  (0) 2020.10.13
Rails 5 : 터보 링크와 함께 $ (document) .ready ()를 사용하는 방법  (0) 2020.10.13
Scikit-learn 데이터 세트를 Pandas 데이터 세트로 변환하는 방법은 무엇입니까?  (0) 2020.10.13
두 개의 NSNumber 객체를 추가하는 방법은 무엇입니까?  (0) 2020.10.13

'Program Tip'의 다른글

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

관련글

댓글

티스토리툴바