Bootstrap은 반응 형 레이아웃, 모바일 우선 웹 프로젝트를 개발하기위한 가장 인기있는 HTML, CSS 및 JS 프레임 워크입니다. - 중국어 문서 부트 스트랩
Bootstrap은 반응 형 레이아웃, 모바일 장치 우선 순위 및 사용하기 쉬우 며 배우기 쉽기 때문에 가장 인기있는 프론트 엔드 개발 프레임 워크가되었습니다.
Bootstrap의 반응 형 디자인, 구성 요소 개발 및 JavaScript 플러그인 개발 및 전처리 스크립트 개발 방법도 학습 할 가치가 있습니다.
소스 코드
소스 코드 다운로드 및 컴파일
GitHub에서 최신 및 가장 완전한 부트 스트랩 소스 코드를 다운로드하는 것이 좋습니다.
GitHub는 소스 코드뿐만 아니라 부트 스트랩 문서의 소스 파일도 포함하는 부트 스트랩 소스 코드 호스팅 저장소입니다. 따라서 네트워크없이 문서 소스 코드를 컴파일하고 실행하여 로컬 컴퓨터에서 문서를 찾아 볼 수 있습니다.
소스 코드 디렉토리
부트 스트랩 소스 코드 디렉토리에는 다음이 포함됩니다.
• 문서 배포 코드 subdirectory_gh_pages/
• 문서 소스 코드 서브 디렉토리 문서/
• 부트 스트랩 배포 코드 서브 디렉토리 디스크/
• 부트 스트랩 스크립트 서브 디렉토리 JS/
• 부트 스트랩 스타일 하위 디렉토리 덜/
• 부트 스트랩 글꼴 하위 디렉토리 글꼴/
• Grunt 빌드 도구 스크립트 하위 디렉토리 grunt/
• 패키지 관리자 Nuget Subdirectory Nuget/
• 많은 구성 파일
진입 지점
부트 스트랩 프레임 워크의 소스 코드는 매우 복잡하며 저자의 개발 프레임 워크의 관점에서 분석하기가 의심 할 여지가 없습니다. 프레임 워크가 구축 또는 배포되는 방식에주의를 기울이지 않고 문제를 단순화 할 수 있지만 프레임 워크 작동 방식, 즉 HTML, CSS/Less 및 JS 부품에만 초점을 맞추고 있습니다.
분열과 거버넌스라는 아이디어를 통해 복잡한 문제는 많은 간단한 문제로 분류되어 해결됩니다. 모든 작은 문제가 해결되면 복잡한 문제가 쉽게 해결됩니다.
전체 부트 스트랩 프레임 워크를 구성 요소로 나누고, 구성 요소를 진입 점으로 취하고, 작업 원칙을 이해 한 다음 전체 프레임 워크를 점차 분석합니다.
구성 요소 분석
드롭 다운 메뉴 드롭 다운
HTML 코드
<!-드롭 다운 메뉴-> <div> <!-트리거 버튼-> <버튼 유형 = "버튼"데이터-토글 = "드롭 다운"> 드롭 다운 <span> </span> </button> <!-드롭 다운 메뉴-> <ul> <li> <a href = "#"> Action </a> </li> <li> <a href = "#"</li>>>>>>>>>>>>>>>>>>>>>>>>>> </li> href = "#"> 여기 다른 것 </a> </li> </ul> </div>
참고 : 소스 코드의 액세스 가능한 속성 ARIA-*는 코드에서 쉬운 분석을 위해 제거됩니다. 실제 응용 분야에서는 생략 할 수 없습니다. 버튼 스타일은 여기에서 분석을 위해 확장되지 않습니다
CSS 코드
// 드롭 다운 화살표/caret.caret {디스플레이 : 인라인-블록; 너비 : 0; 높이 : 0; 마진 왼쪽 : 2px; 수직 정상 : 중간; 테두리 : @Caret-Width-Base가 점선; 테두리 : @Caret-Width-Base Solid ~ "/9"; // IE8 Border-Right : @Caret-Width-Base Solid Transparent; 경계-왼쪽 : @Caret-Width-Base Solid Transparent;} // 드롭 다운 래퍼 (div) .Dropup, .dropdown {위치 : 상대; // 상위 요소의 상대적 위치} // 드롭 다운을 닫을 때 드롭 다운 토글의 초점을 방지합니다. DROPDOWN-TOGGLE : FOCUT {개요 : 0;} // 드롭 다운 메뉴 (ul) .Dropdown-menu {위치 : 절대; // 아동 요소의 절대 포지셔닝 상단 : 100%; // 드롭 다운 메뉴는 상위 요소의 하단 가장자리에 가깝습니다. 왼쪽 : 0; z-index : @zindex-dropdown; 디스플레이 : 없음; // 트리거 버튼이 표시되면 기본적으로 숨기기 (디스플레이 : 블록) float : 왼쪽; 최소값 : 160px; 패딩 : 5px 0; 여백 : 2px 0 0; // 기본 UL 목록 스타일 재정의 : 없음; 글꼴 크기 : @font-size-base; 텍스트 정렬 : 왼쪽; 배경색 : @Dropdown-Bg; 국경 : 1px solid @dropdown-fallback border; // IE8 폴백 테두리 : 1px solid @dropdown-border; Border-Radius : @Border-Radius-Base; .Box-Shadow (0 6px 12px rgba (0,0,0, .175)); 배경 클립 : 패딩-박스; // 드롭 다운 메뉴를 오른쪽으로 정렬합니다. 왼쪽 : 자동; } // 높이가 1px.divider {.nav-divider (@dropdown-divider-bg)의 수평 분배기; } // 드롭 다운 메뉴의 링크> li> a {display : block; 패딩 : 3px 20px; Clear : 둘 다; 글꼴 중량 : 정상; Line-Height : @Line-Height-Base; 색상 : @Dropdown-Link-Color; 흰색 공간 : Nowrap; // 링크가 래핑하는 방지}}} // 호버/포커스 상태 .Dropdown-menu> a {& : hover, & : focus {text-decoration : none; 색상 : @Dropdown-Link-Hover-Color; 배경색 : @Dropdown-Link-Hover-BG; }} // active state.dropdown-menu> .active> a {&, & : hover, & : focus {color : @dropdown-link-active-color; 텍스트 결정 : 없음; 개요 : 0; 배경색 : @Dropdown-Link-Active-BG; }} // 드롭 다운 메뉴를 표시합니다. OPEN {> .DROPDOWN-MENU {display : block; // show} // 윤곽선 제거시기 : 초점이 트리거됩니다> a {개요 : 0; }} // 메뉴 포지셔닝 .Dropdown-menu-right {왼쪽 : 자동; //`.dropdown-menu`에서 기본값을 재설정합니다. 오른쪽 : auto;} // 드롭 다운 섹션 헤더 .Dropdown-Header {display : block; 패딩 : 3px 20px; 글꼴 크기 : @font-size-small; Line-Height : @Line-Height-Base; 색상 : @Dropdown-Header-Color; 흰색 공간 : Nowrap; //와 같이> li> a} // 비 드로 다운 메뉴 영역 .Dropdown-backdrop {위치 : 고정; 왼쪽 : 0; 오른쪽 : 0; 하단 : 0; 상단 : 0; z-index : (@zindex-dropdown-10); // 드롭 다운 메뉴를 클릭 할 때 드롭 다운 메뉴가 닫히지 않도록하십시오} // 오른쪽 정렬 된 드롭 다운. 왼쪽 : auto;} // 드롭 다운이 상향식으로 올라가도록 허용합니다 (일명, 드롭 up-menu) //// 표준. 드롭 다운 클래스 후. 드롭 up을 추가하고 설정, bro.// todo : abstrop-with this가 여기에 배치되지 않도록 설정하십시오. 국경-버전 : @Caret-Width-Base가 점선; Border-Bottom : @Caret-Width-Base Solid ~ "/9"; // IE8 내용 : ""; } // 바닥 업 메뉴에 대한 다른 위치. 하단 : 100%; 마진 바닥 : 2px; }} // 컴포넌트 정렬 /// navbar.less 및 수정 된 구성 요소 정렬이 있습니다. @media (min-width : @grid-float-breakpoint) {.navbar-right {.Dropdown-menu {.Dropdown-menu-right (); } // 기본 오른쪽 정렬 된 메뉴의 재정의에 필요합니다. // 모든 가능성으로 v4를 제거합니다. .Dropdown-menu-left {.Dropdown-menu-left (); }}}이 드롭 다운 메뉴 구성 요소의 동작은 다음과 같습니다. 트리거 버튼을 클릭하면 드롭 다운 메뉴가 아래에 표시되며, 드롭 다운 메뉴 영역을 클릭하면 드롭 다운 메뉴가 숨겨져 있습니다.
구현 원칙 :
1. 처음에는 트리거 버튼 만 표시되고. 드롭 다운 래퍼 기본 드롭 다운 메뉴가 닫히고 .Dropdown-Menu Hides 표시 : 없음 기본적으로 없음
2. 트리거 버튼을 클릭하면 .Dropdown 후 클래스를 추가하십시오. .open에서 .dropdown-menu의 디스플레이 값은 블록입니다. 따라서 클래스를 추가/제거한다는 것은 드롭 다운 메뉴를 표시/숨기는 것을 의미합니다.
3. 드롭 다운 메뉴 영역을 클릭하면. 드롭 다운은 클래스를 삭제합니다. 즉, 드롭 다운 메뉴를 숨 깁니다. 드롭 다운 메뉴 영역을 구현하는 원리는 고정 포지셔닝, 타일링 및 Z- 인덱스가 드롭 다운 메뉴보다 작으므로 드롭 다운 메뉴를 클릭 할 때 드롭 다운 메뉴가 숨겨지지 않도록합니다.
자바 스크립트 코드
/* ======================================================================== =========================================================================== ======================================================================== =========================================================================== ======================================================================== =========================================================================== =========================================================================== =========================================================================== MIT (https://github.com/twbs/bootstrap/blob/master/license)에 따라 라이센스 =========================================================================== =========================================================================== var backdrop = '.Dropdown-backdrop'var toggle = '[data-toggle = "dropdown"]'var dropdown = function (요소) {$ (element) .on ( 'click.bs.dropdown', this.toggle)} dropdown.version = '3.3.6'function getParent ($ this) {var selector = $ thisttr (!) $ this.attr ( 'href') selector = selector &////////셀렉터. && selector.replace (/. $ parent : $ this.parent ()} 함수 clearmenus (e) {if (e && e.hith == 3) return $ (backdrop) .remove () $ (toggle) .Each (function () {var $ this = $ (this) var $ parent = getparent ($ this) var relationtarget = this} if (hasclass))). && e.type == 'click'&& /& /inputoutextarea/i.test(e.target.tagname) && $ .Contains ($ parent [0], e.target)) return $ parent.trigger (e = $ .event ( 'hide.bs.bs.bs.dropdown', relatedtarget)) if (e.isdefaultprevented ()) return ()). 'false') $ parent.removeClass ( 'open'). 트리거 ($. 이벤트 ( 'hidden.bs.dropdown', relattarget)})}} dropdown.prototyp.toggle = function (e) {var $ this = $ (this) if ($ this.is ( '. disabled, : disabled))). $ parent.hasclass ( 'open') clearmenus () if (! isactive) {if (document.documentElement &&! in in a navbar-nav '). .inSertAfter ($ (this)) .on ( 'click', clearmenus)} var relateTarget = {relatedTarget : this} $ parent.trigger (e = $ .event ( 'show.bs.dropdown', relateTarget))) if (e.isdefaultPrevented ())이 $ this ( 'focus') .at ( 'aria-exped') .at '). .TogGleClass ( 'Open') .Trigger ($. event ( 'ship.Bs.DropDown', relateTarget))} return false} dropdown.keydown.keydown = function (e) {if (!/(38 | 40 | 27 | 32)/. test (e.which) | e.preventDefault () e.StopPropagation () if ($ this.is ( '. disabled, : disabled')) return var $ parent = getparent ($ this) var isactive = $ parent.hasclass ( 'open') if (! isactive && e. $ parent.find (토글) .Trigger ( 'Focus') Return $ $ thisthist. this.trigger ( 'click')} var desc = 'li : not (.Disabled) : visible a'var $ items = $ parent.find ( '. dropdown-menu' + desc) if (! $ items.length) return var index = $ items.index (e. (E.Which == 40 && index <$ items.length.length.length.length.length.length. 1) INDEX ++ // down if (! ~ index) index = 0 $ item.eq (index) .Trigger ( 'focc') // 드롭 다운 플러그인 정의 // ====================================================================== 플러그인 (옵션) {return this.each (function () {var $ this = $ (this) var data = $ this.data ( 'bs.dropdown') if (! data) $ this.data ( 'bs.dropdown', ( 'bs.dropdown', (data = new dropdown (this))))) if (typeof 옵션 == 'string') data [옵션] .call ($ this)}} varn.dropfon. = 플러그인 $ .fn.dropdown.constructor = 드롭 다운 // 드롭 다운 없음 충돌 없음 // ================================ $ .fn.dropdown.noconflict = function () {$ .fn.dropdown = Old Return} // 표준 DROPDOWN // =========================================================================================== =========================================================================================== $ (document) .on ( 'click.bs.dropdown.data-api', clearmenus) .on ( 'click.bs.dropdown.data-api', '.dropdown form', function (e) {e.stopPropagation ()}) .on ( 'keydown.bs.dropdown.data-api', 토글, dropdown.prototype.keydown) .on ( 'keydown.bs.dropdown.data-api', '.dropdown.-prototyp.keydown)} (jquery);JavaScript 코드 구조는 세 부분으로 나눌 수 있습니다.
1. 클래스 정의 라인 1-125
2. 플러그인 정의 라인 126-144
3. 충돌 라인 148-153을 해결하십시오
4. 표준 드롭 다운 메뉴 요소 라인 155-166에 적용하십시오
위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.