ASP.NET MVC 에서 Bootstrap 을 사용 하 는 방법

웹 개발 자로 서 어떠한 전단 프레임 워 크 도 빌 리 지 않 으 면 0 부터 HTML 과 CSS 를 사용 하여 우호 적 인 페이지 를 구축 하 는 것 은 매우 어렵다.특히 윈도 폼 개발 자 들 에 게 는 더욱 어렵다.
바로 이런 이유 로 Bootstrap 이 탄생 했다.트 위 터 Bootstrap 은 개발 자 에 게 다양한 CSS 스타일,구성 요소,플러그 인,응답 식 레이아웃 등 을 제공 합 니 다.동시에 마이크로소프트 는 이미 ASP.NET MVC 템 플 릿 에 완전히 통합 되 었 다.
Bootstrap 구조 소개
최신 버 전의 Bootstrap 을 다운로드 할 수 있 습 니 다.
압축 해제 폴 더 를 보면 Bootstrap 의 파일 분포 구 조 는 다음 과 같 습 니 다.3 개의 폴 더 를 포함 합 니 다.

css

fonts

js    

css 폴 더 에는 4 개의.css 파일 과 2 개의.map 파일 이 포함 되 어 있 습 니 다.우 리 는 boottstrap.css 파일 을 프로젝트 에 포함 시 키 기만 하면 Bootstrap 을 우리 페이지 에 적용 할 수 있 습 니 다.boottstrap.min.css 는 상기 css 의 압축 버 전 입 니 다.
.map 파일 은 항목 에 포함 되 지 않 아 도 됩 니 다.무시 할 수 있 습 니 다.이 파일 들 은 디 버 깅 기호(Visual Studio 의.pdb 파일 과 유사)로 사용 되 며,최종 적 으로 개발 자 들 이 온라인 으로 예비 처리 파일 을 편집 할 수 있 습 니 다.
Bootstrap 은 Font Awesome(하나의 글꼴 파일 은 모든 글꼴 아이콘 을 포함 하고 Bootstrap 만 을 위 한 디자인)을 사용 하여 서로 다른 아이콘 과 기 호 를 표시 합 니 다.fonts 폴 더 는 4 가지 서로 다른 형식의 글꼴 파일 을 포함 합 니 다.

Embedded OpenType (glyphicons-halflings-regular.eot)

Scalable Vector Graphics (glyphicons-halflings-regular.svg)

TrueType font (glyphicons-halflings-regular.ttf)

Web Open Font Format (glyphicons-halflings-regular.woff)

웹 프로그램 에 모든 글꼴 파일 을 포함 시 키 는 것 을 권장 합 니 다.사이트 가 다른 브 라 우 저 에 올 바른 글꼴 을 표시 할 수 있 기 때 문 입 니 다.
EOT 글꼴 형식 파일 은 IE9 이상 의 브 라 우 저 지원 이 필요 합 니 다.TTF 는 전통 적 인 오래된 글꼴 형식 파일 이 고 WOFF 는 TTF 에서 압축 된 글꼴 형식 파일 입 니 다.IE8 이후 브 라 우 저,iOS 4 이상 버 전,Android 만 지원 한다 면 WOFF 글꼴 만 포함 하면 됩 니 다.
js 폴 더 에는 3 개의 파일 이 포함 되 어 있 습 니 다.모든 Bootstrap 플러그 인 은 boostrap.js 파일 에 포함 되 어 있 습 니 다.bootstrap.min.js 는 상기 js 의 압축 버 전 입 니 다.npm.js 는 프로젝트 구축 도구 Grunt 를 통 해 자동 으로 생 성 됩 니 다.
boostrap.js 파일 을 인용 하기 전에 JQuery 라 이브 러 리 를 인 용 했 는 지 확인 하 십시오.모든 Bootstrap 플러그 인 에 JQuery 가 필요 하기 때 문 입 니 다.
ASP.NET MVC 항목 에 Bootstrap 파일 추가
Visual Studio 2013 을 열 고 표준 ASP.NET MVC 프로젝트 를 만 듭 니 다.기본 값 으로 Bootstrap 의 모든 파일 이 자동 으로 추가 되 었 습 니 다.다음 과 같 습 니 다.

마이크로소프트 가 Bootstrap 에 대해 매우 인정 하고 Visual Studio 에 고도 로 통합 되 었 음 을 나타 낸다.
주의해 야 할 것 은 Scripts 파일 에 라 는 이름 을 추가 하 였 습 니 다.references.js 파일 입 니 다.이것 은 매우 유용 한 기능 입 니 다.Bootstrap 등 일부 전단 라 이브 러 리 를 사용 할 때 Visual Studio 가 스마트 알림 을 사용 하 는 데 도움 을 줄 수 있 습 니 다.
물론 이 의존 파일 을 수 동 으로 추가 할 수 있 는 빈 ASP.NET MVC 프로젝트 를 만 들 수 있 습 니 다.아래 그림 에서 보 듯 이 빈 템 플 릿 을 선택 하 십시오.

새로 만 든 공백 ASP.NET MVC 프로젝트 에 있어 Content,Fonts,Scripts 폴 더 를 사용 하지 않 습 니 다.우 리 는 수 동 으로 그들 을 만들어 야 합 니 다.다음 과 같 습 니 다.

물론 Nuget 으로 Bootstrap 자원 파일 을 자동 으로 추가 할 수도 있 습 니 다.그래 픽 인터페이스 로 Bootstrap Nuget Package 를 추가 하면 Bootstrap 을 직접 검색 하면 됩 니 다.Package Manager Console 을 사용 하여 Bootstrap Nuget Package 를 추가 하려 면 Install-Package bootstrap 을 입력 하 십시오.
사이트 에 Layout 레이아웃 페이지 만 들 기
저희 사이트 가 일치 하 는 스타일 을 유지 하기 위해 서 저 는 Bootstrap 을 사용 하여 Layout 레이아웃 페이지 를 구축 할 것 입 니 다.다음 그림 과 같이 Views 폴 더 에 MVC Layout Page(Razor)레이아웃 파일 을 만 듭 니 다.

새로 만 든 Layout 레이아웃 페이지 에서 다음 코드 를 사용 하여 Bootstrap 자원 파일 을 참조 합 니 다.

<link href="@Url.Content(" rel="external nofollow" rel="external nofollow" ~/css/bootstrap.css")" rel="stylesheet">

<script src="@Url.Content("~/js/bootstrap.js")"></script> 

이 중@Url.Content 를 사용 하면 가상 또는 상대 경 로 를 절대 경로 로 변환 하여 Bootstrap 자원 파일 이 인용 되 는 지 확인 합 니 다.
홈 이라는 Controller 를 새로 만 들 고 기본 Index 보 기 를 추가 하여 상기 Layout 레이아웃 페이지 를 사용 하도록 합 니 다.다음 과 같 습 니 다.

묶음 포장 과 압축 을 사용 하여 사이트 성능 을 향상시키다
묶음 패키지(bundling)와 압축(minification)은 ASP.NET 의 새로운 기능 으로 사이트 로 딩 속 도 를 높 일 수 있 습 니 다.이것 은 CSS 와 자바 스 크 립 트 파일 을 요청 하 는 횟수 를 제한 함으로써 이 루어 집 니 다.본질 적 으로 이러한 파일 을 큰 파일 에 결합 시 키 고 불필요 한 모든 문 자 를 삭제 하 는 것 이다(예 를 들 어 주석,빈 칸,줄 바 꾸 기).
대부분의 현대 브 라 우 저 는 호스트 이름 에 6 개의 동시 접속 한계 가 있 습 니 다.이 는 한 페이지 에 6 개 이상 의 CSS,자바 스 크 립 트 파일 을 인용 하면 브 라 우 저 는 한 번 에 6 개의 파일 만 다운로드 한 다 는 뜻 입 니 다.그래서 자원 파일 의 개 수 를 제한 하 는 것 은 좋 은 방법 입 니 다.진정한 의미 의 사명 은 반드시 달성 해 야 합 니 다.자원 을 불 러 오 는 데 낭비 하 는 것 이 아 닙 니 다.
Bootstrap 프로젝트 에서 묶음 패키지 사용 하기
빈 ASP.NET MVC 프로젝트 를 만 들 었 기 때문에 패키지 와 관련 된 프로그램 집합 을 자동 으로 참조 하지 않 았 습 니 다.Nuget Package Manager Console 을 열 어 Package 설 치 를 완료 하려 면 다음 PowerShell 명령 을 사용 하 십시오.
install-package Microsoft.AspNet.Web.Optimization 은 Microsoft.AspNet.Web.Optimization NuGet 패키지 와 의존 하 는 Package 를 설치 합 니 다.다음 과 같 습 니 다.

설치 완료 후 앱Start 에 BundleConfig 클래스 추가:

public static void RegisterBundles(BundleCollection bundles)
{
  bundles.Add(new ScriptBundle("~/bootstrap/js").Include(
  "~/js/bootstrap.js",
  "~/js/site.js"));
  bundles.Add(new StyleBundle("~/bootstrap/css").Include(
  "~/css/bootstrap.css",
  "~/css/site.css"));
}

ScriptBundle 과 StyleBundle 대상 을 예화 할 때 파일 을 포장 하 는 가상 경 로 를 나타 내 는 인 자 를 받 아들 입 니 다.Include 는 말 그대로 필요 한 파일 을 포함 합 니 다.
그리고 ApplicationStart 방법 에 등록 하기:

protected void Application_Start()
{
  AreaRegistration.RegisterAllAreas();
  RouteConfig.RegisterRoutes(RouteTable.Routes);
  BundleConfig.RegisterBundles(BundleTable.Bundles);
  BundleTable.EnableOptimizations = true;
}

.min 형식의 파일 을 포장 파일 에 포함 하지 마 십시오.예 를 들 어 bootstrap.min.css,bootstrap.min.js,컴 파일 러 는 압축 되 었 기 때문에 이 파일 들 을 무시 합 니 다.
ASP.NET MVC 레이아웃 페이지 에 서 는@Styles.Render("~/bootstrap/css"),@Scripts.Render("~/bootstrap/js")를 사용 하여 압축 파일 에 대한 인용 을 추가 합 니 다.
Visual Studio HTML 편집기 가 Styles 와 Scripts 대상 을 찾 을 수 없다 고 표시 하면 네 임 스페이스 참조 가 부족 하 다 는 뜻 입 니 다.레이아웃 페이지 상단 에 System.Web.Optimization 네 임 스페이스 를 수 동 으로 추가 할 수 있 습 니 다.다음 코드 는 다음 과 같 습 니 다.

@using System.Web.Optimization
<!DOCTYPE html>
<html>
 <head>
 <meta name="viewport" content="width=device-width" />
 <title>@ViewBag.Title</title>
 @*<link href="@Url.Content(" rel="external nofollow" rel="external nofollow" ~/css/bootstrap.css")" rel="stylesheet">
 <script src="@Url.Content("~/js/bootstrap.js")"></script>*@
 @Scripts.Render("~/bootstrap/js")
 @Styles.Render("~/bootstrap/css")
 </head>
 <body>
 <div>
  @*@RenderBody()*@
 </div>
</body>
</html>

물론 유 니 버 설 을 위해 서 가장 좋 은 실천 은 Views 폴 더 의 웹.config 에 System.Web.Optimization 이름 공간 을 추가 하 는 것 입 니 다.다음 과 같 습 니 다.

<namespaces>
 <add namespace="System.Web.Mvc" />
 <add namespace="System.Web.Mvc.Ajax" />
 <add namespace="System.Web.Mvc.Html" />
 <add namespace="System.Web.Routing" />
 <add namespace="Bootstrap.Web" />
 <add namespace="System.Web.Optimization" />
</namespaces>

테스트 패키지 와 압축
패키지 와 압축 을 사용 하기 위해 사이트 루트 디 렉 터 리 에 있 는 웹.config 파일 을 열 고 컴 파일 요소 의 dubug 속성 을 false 로 변경 합 니 다.즉,release 입 니 다.

<system.web>

 <compilation debug="false" targetFramework="4.5" />

 <httpRuntime targetFramework="4.5" />

</system.web>

물론 ApplicationStart 방법 에 BundleTable.EnableOptimizations=true 를 설정 하면 상기 효 과 를 얻 을 수 있 습 니 다.(debug 속성 이 true 라 하 더 라 도 override web.config 의 설정 을 합 니 다.)
마지막 으로 웹 페이지 를 탐색 하고 소스 코드 를 보면 압축 파일 의 경로 가 이전에 정 의 된 상대 적 인 경로 임 을 알 수 있 습 니 다.이 링크 를 클릭 하면 브 라 우 저 는 압축 처 리 를 거 친 압축 파일 을 열 어 줍 니 다.아래 그림 과 같 습 니 다.

작은 매듭
이 장 에서 Bootstrap 의 시스템 구 조 를 간단하게 정리 한 다음 에 ASP.NET MVC 프로젝트 에 Bootstrap 을 어떻게 추가 하 는 지,마지막 으로 포장 과 압축 기술 을 사용 하여 자원 파일 에 대한 포장 을 실현 하여 사이트 의 성능 을 향상 시 켰 다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.