부트 스트랩 프레임 워크에 대해 얼마나 알고 있습니까?
Bootstrap은 많은 플랫폼에서 채택 할 수있는 프론트 엔드 기술 프레임 워크입니다. Java/PHP/.NET는 프론트 엔드 인터페이스로 사용할 수 있습니다. jQuery를 통합하면 매우 풍부한 인터페이스 효과를 얻을 수 있습니다. 현재 모든 사람이 사용할 수있는 부트 스트랩 플러그인이 많이 있습니다. 그러나 많은 국내 부트 스트랩 기반 소개는 여전히 다양한 기본 지식과 부트 스트랩의 간단한 사용을 소개하는 데 중점을 둡니다. 이 기사는 C#을 기반으로 한 실제 MVC 프로젝트를 기반으로 부트 스트랩 개발 프레임 워크에 대한 포괄적 인 사례 소개를 제공하고 실제 프로젝트 코드 및 효과의 스크린 샷 으로이 영역에서의 경험과 경험을 자세하고 직관적으로 소개하기 위해 설명합니다.
1. 메트로닉을 기반으로 한 부트 스트랩 개발 프레임 워크의 개요
Metronic은 HTML, JS 및 기타 기술을 기반으로 한 외국 부트 스트랩 개발 프레임 워크로 많은 부트 스트랩 프론트 엔드 기술 및 플러그인을 통합합니다. 매우 좋은 기술 프레임 워크입니다. 이 기사를 기반으로 MVC의 웹 프레임 워크에 대한 연구와 결합 된이 기사는 MVC를 기반으로 부트 스트랩 개발 프레임 워크를 통합하여 실제 프로젝트의 구조적 요구를 충족시킬 수 있습니다.
다음은 전체 프로젝트의 전반적인 렌더링입니다.
메뉴 영역의 내용은 데이터베이스에서 동적으로 얻어지며 일부 정보는 시스템의 상단 열에 배치되며 사용자에게 개인 정보보기, 로그 아웃, 화면 잠금 등과 같은 개인 데이터를 빠르게 처리 할 수 있습니다. 컨텐츠 영역은 주로 시각적으로 표시되며, 이는 트리 목록 컨트롤 및 테이블 컨트롤을 통해 표시 될 수 있습니다. 일반적으로 데이터를 추가, 삭제, 수정 및 페이징해야하므로 다양한 기능을 통합해야합니다. 쿼리 및 사용자 데이터를 표시하는 것 외에도 일상적인 데이터 처리 기능 인 가져 오기 및 내보내기 관련 작업이 필요합니다. 이러한 규칙 및 인터페이스 효과를 결정한 후 코드 생성 도구를 통해이를 생성하여 이러한 웹 프로젝트의 인터페이스 효과를 신속하게 생성 할 수 있습니다.
2. 부트 스트랩 개발 프레임 워크 메뉴 디스플레이
전체 프레임 워크에는 일반 부트 스트랩의 다양한 CSS 기능 사용 및 메뉴 표시 줄, 부트 스트랩 아이콘 관리, 시스템 상단 막대, 트리 컨트롤 jstree, 포틀릿 컨테이너, 모달 대화 상자, 탭 제어, 드롭 다운 목록 Select2, Checkbox Icheck, Multi-Text 컨트롤 및 사진 업로드 컨트롤, 컨트롤 컨트롤, 신속한 Boottr, Wotttr, Forast, Forast, Forast and and and asttr and and and and and and and and and and and and and and and and and and and and and and swithoplater contral, checkbox iceck iCheck, multi-text 컨트롤 및 사진 업로드 컨트롤을 포함한 많은 컨텐츠가 포함됩니다. 터치 스핀, 비디오 재생 디스플레이 컨트롤 비디오 플레이어 등이 기능은 전체 론적 솔루션으로 설계되었습니다. 이러한 우수한 플러그인을 수집하면 프레임 워크가보다 강력한 기능과 풍부한 인터페이스 경험을 제공 할 수 있습니다.
이 섹션은 프레임 워크의 시작, 메뉴의 처리 및 프리젠 테이션으로 계속 돌아갑니다. 일반적으로 관리의 편의를 위해 메뉴는 세 가지 수준으로 나뉩니다. 선택된 메뉴는 다른 메뉴 스타일과 다릅니다. 메뉴를 접고 최소화 할 수 있습니다. 효과는 다음과 같습니다.
부트 스트랩에서 빌드 메뉴는 비교적 쉬운 작업입니다. 주로 UL과 Li를 사용합니다. 스타일 처리를 통해 메뉴 레이아웃을 설정할 수 있습니다. 코드는 다음과 같습니다.
<ul data-keep-expanded = "false"data-auto-scroll = "true"data-slide-speed = "200"> <li id = "1"> <a href = "/home/index"> </i> <span> home </span> <span> </span> <span> </span> </li> <li id = "2"> <a href = "> <i> </i> <span> 업계 동향 </span> <pan> </span> <span> </span> </a> <ul> <li style = "font-size : 14px; 컬러 : 옐로우"> <i> </i> 업계 트렌드 </li> <li> <a href = "#"> </i> <li> 4 </</li> 4 </>>>> href = "#"> <i> </i> <span> 4 </span> elouces </a> </li> <li> <a href = "#"> <i> </i> <span> 4 </span> 동적 정보 </a> </li> </li> </li> </li> </li> </ul> </ul> </ul> </ul> </ul>
그러나 일반적인 메뉴는 동적으로 변경되었습니다. 즉, 데이터베이스에서 얻어 프론트 엔드 디스플레이로 설정해야합니다. 이러한 방식으로 MVC 컨트롤러의 메뉴 컨텐츠를 출력 한 다음 메뉴 데이터의 역학을 실현하기 위해 프론트 엔드 인터페이스에 바인딩해야합니다. 동시에, 이것은 또한 권한 제어의 기본 처리이기도합니다.
기본 클래스에서는 메뉴 데이터를 가져 와서 사용자가 로그인 한 후 뷰백 객체에 넣을 수 있습니다.
특정 코드는 다음과 같습니다. 먼저 사용자가 로그인되는지 여부를 결정하십시오. 로그인 한 경우 사용자의 메뉴 데이터를 얻고 Viewbag에서 사용할 수 있습니다.
/// <summary> /// 작업이 실행되기 전에 기본 클래스의 처리를 다시 작성하십시오 /// </summary> /// <param name = "FilterContext"> 메소드의 매개 변수 void void void onactionExecuting (actionExecutingContext FilterContext) {filtercontexting (filtercontext); // 사용자 로그인에 대한 정보를 가져옵니다. currentUser = session [ "userInfo"]] userInfo; if (currentUser == null) {response.redirect ( "/login/index"); // 사용자가 비어있는 경우 로그인 인터페이스로 점프} else {// 인증 속성을 설정 한 다음 viewbag에 viewbag에 할당하여 convertauthorizedInfo ()를 저장합니다. Viewbag.authorizekey = Authorizekey; // 로그인 정보 세트 viewbag.fullName = currentUser.fullName; viewbag.name = currentuser.name; viewbag.menustring = getMenustring (); //viewbag.menustring = getMenustringCache (); // 캐시를 사용하고 가끔씩 업데이트}}그 중에서도 getmenustring 함수는 메뉴의 어셈블리 및 처리입니다. 데이터베이스의 메뉴 정보는 아래와 같이 트리 구조입니다.
데이터베이스 메뉴 정보를 기반으로 인터페이스에 사용되는 일부 HTML 코드를 빌드 할 수 있습니다.
#영역 정의 형식 템플릿 // javaScript :; // {0}? tid = {1} var firstTemplate = @"<li id = '{3}'> <a href = '{0}'> <i class = '{1}'> </i> <스팬 클래스 = '제목'> {2} </span> <span class = 'selected'> <span open '>]. var secondTemplate = @"<li class = 'heading'style = 'font-size : 14px; color : 옐로우'> <i class = '{0}'> </i> {1} </li>"; var ThirdTemplate = @"<li id = '{3}'> <a href = '{0}'> <i class = '{1}'> </i> {2} </a> </li>"; var firstTemPlateEnd = "</li>"; var SecondTemplatestart = "<ul class = 'sub-menu'>"; var SecondTemPlateEnd = "</ul>"; #endregion예를 들어, 세 번째 레벨 메뉴는 코드를 통해 생성 될 수 있습니다.
// 레벨 3 아이콘 = subnodeinfo.webicon; // TID는 최상위 분류 ID이며, SID는 세 번째 레벨 메뉴 ID TMPURL = String.Format ( "{0} {1} tid = {2} & sid = {3}", subnodeinfo.url, geturljoiner (subnodeinfo.url), info.id, subnodeinfo.id); url = (! string.isnullorempty (subnodeinfo.url) && subnodeinfo.url.trim ()! = "#")? tmpurl : "JavaScript :;"; sb = sb.appendformat (ThirdTemplate, URL, 아이콘, subnodeinfo.name, subnodeinfo.id);물론 동시성을 늘리려면 메뉴의 빈번한 검색을 줄이고이 데이터의 일부를 다음과 같이 MemeryCache에 넣을 수 있습니다.
public String getMenustringCache () {String itemValue = MemoryCacheHelper.getCacheItem <string> ( "getMenustringCache", Delegate () {return getMenustring ();}, null, datetime.now.addminutes (5) // 료화); 반환 ItemValue; }3. 레이아웃 페이지 사용
동시에, 페이지 재사용을 개선하기 위해 일반적으로 각 페이지의 동일한 부분의 내용을 추출하여 전체 레이아웃 페이지에 배치합니다. 이러한 방식으로 다른 부분은 모두 레이아웃보기 페이지에서 상속됩니다. 동적 메뉴 부분은 또한 레이아웃보기에서 콘텐츠의 일부입니다.
위 그림의 _layout.cshtml은 C#을 기반으로 한 MVC 전체 레이아웃보기 페이지입니다. 이러한 방식 으로이 페이지에서 메뉴 표시 컨텐츠와 메인 페이지 컨텐츠의 일부 및 스크립트 디스플레이의 일부를 설정하면 충분합니다.
메뉴의 디스플레이 코드는 다음과 같습니다.
레이아웃 페이지에 남은 페이지 표시 섹션은 다음과 같습니다.
Bootstrap은 일반적으로 레이아웃 페이지에 필요한 jQuery 및 기타 스크립트를 유지하는 것 외에도 JS 파일을 마지막에 넣으므로로드를 위해 스크립트 내용 중 일부를 페이지 하단에 넣어야하며 스크립트로드를 MVC의 번들 기술을 사용하여 압축 및 통합 할 수 있습니다. 이 기술의 경우 이전 기사를 참조하여 "MVC4+ EasyUI (11)를 기반으로 한 웹 개발 프레임 워크의 경험 요약 - 번들을 사용하여 단순화 된 페이지 코드를 처리하십시오.
이러한 방식으로, 각 하위 페이지의 뷰에 레이아웃보기 페이지를 소개 한 후에는 개인화 된 디스플레이 컨텐츠의 일부만 작성하면 특정 코드는 다음과 같습니다.
그런 다음 페이지 하단에 필요한 부분에 대한 스크립트 코드 만 포함하십시오. 페이지가 생성되면 레이아웃 페이지에서 설정 한 순서 블록에 따라 합리적으로 표시되며 컨텐츠의 모든 부분이 통합됩니다.
4. 페이지 편집 도구 숭고한 텍스트 사용
이전의 스크린 샷은 VS 환경에서 나온 많은 스크린 샷이지만 일반적으로보기 페이지를 편집 할 때 숭고한 텍스트, 강력한 편집 도구, 풍부한 플러그인, 지능형 구문 프롬프트 등을 사용하여 사용 후 좋아할 것입니다. 보기 페이지를 편집하기위한 매우 빠른 도구이며 적극 권장됩니다.
VS는 일반적으로 파일 관리, 컴파일 및 기타 처리를 수행하는 데 사용됩니다.
위의 내용은 귀하에게 소개 된 부트 스트랩 메트로닉을 기반으로 한 개발 프레임 워크의 경험 요약입니다 [I] 프레임 워크 개요 및 메뉴 모듈 처리. 모든 사람에게 도움이되기를 바랍니다. 더 많은 정보를 알고 싶다면 Wulin.com 웹 사이트에주의를 기울이십시오!