접근하다
부트스트랩을 구축하고 유지 관리하는 데 사용되는 기본 원칙, 전략 및 기술에 대해 알아보십시오. 그러면 부트스트랩을 더 쉽게 사용자 정의하고 직접 확장할 수 있습니다.
시작하기 페이지에서 프로젝트와 프로젝트가 제공하는 내용에 대한 소개를 제공하지만 이 문서는 부트스트랩에서 수행하는 작업을 수행하는 이유 에 중점을 둡니다. 다른 사람들이 우리에게서 배우고, 우리와 함께 기여하고, 개선할 수 있도록 웹을 구축하는 우리의 철학을 설명합니다.
제대로 들리지 않거나 더 잘할 수 있는 것이 있습니까? 문제 열기 — 귀하와 논의하고 싶습니다.
우리는 이들 각각에 대해 더 자세히 알아볼 것이지만 높은 수준에서 우리의 접근 방식을 안내하는 것은 다음과 같습니다.
- 구성 요소는 반응형이어야 하고 모바일 우선이어야 합니다.
- 구성 요소는 기본 클래스로 빌드하고 수정자 클래스를 통해 확장해야 합니다.
- 구성 요소 상태는 일반적인 z-색인 척도를 따라야 합니다.
- 가능하면 JavaScript보다 HTML 및 CSS 구현을 선호하십시오.
- 가능하면 사용자 정의 스타일보다 유틸리티를 사용하십시오.
- 가능하면 엄격한 HTML 요구 사항(하위 선택자)을 시행하지 마십시오.
Bootstrap의 반응형 스타일은 반응형으로 제작되었으며, 이는 종종 모바일 우선 이라고 하는 접근 방식입니다 . 우리는 문서에서 이 용어를 사용하고 대체로 동의하지만 때로는 너무 광범위할 수 있습니다. 모든 구성 요소 가 Bootstrap에서 완전히 반응 해야 하는 것은 아니지만 이 반응 방식은 뷰포트가 커질 때 스타일을 추가하도록 밀어붙임으로써 CSS 재정의를 줄이는 것입니다.
부트스트랩 전체에서 미디어 쿼리에서 이를 가장 명확하게 볼 수 있습니다. 대부분의 경우 min-width특정 중단점에서 적용되기 시작하여 더 높은 중단점까지 이어지는 쿼리를 사용합니다. 예를 들어, 무한대 에 .d-none적용됩니다 . min-width: 0반면에 .d-md-none중간 중단점 이상부터 적용됩니다.
때때로 우리는 max-width구성 요소의 고유한 복잡성이 그것을 요구할 때 사용할 것입니다. 때때로 이러한 재정의는 구성 요소에서 핵심 기능을 다시 작성하는 것보다 구현하고 지원하는 것이 기능적으로나 정신적으로 더 명확합니다. 우리는 이 접근 방식을 제한하기 위해 노력하지만 때때로 사용할 것입니다.
브라우저 간 정규화 스타일시트인 Reboot를 제외하고 모든 스타일은 클래스를 선택자로 사용하는 것을 목표로 합니다. 이것은 스타일을 너무 구체적으로 만들어 쉽게 재정의할 수 없도록 만드는 유형 선택기(예: input[type="text"]) 및 관련 없는 상위 클래스(예: )를 피해야 함을 의미합니다..parent .child
따라서 구성 요소는 재정의되지 않는 공통 속성-값 쌍을 포함하는 기본 클래스로 빌드해야 합니다. 예를 들어 .btn, .btn-primary. , 및 와 .btn같은 모든 일반적인 스타일에 사용 합니다 . 그런 다음 색상, 배경 색상, 테두리 색상 등을 추가하는 것과 같은 수정자를 사용 합니다.displaypaddingborder-width.btn-primary
수정자 클래스는 여러 변형에서 변경할 속성이나 값이 여러 개인 경우에만 사용해야 합니다. 수정자가 항상 필요한 것은 아니므로 실제로 코드 줄을 저장하고 생성할 때 불필요한 재정의를 방지해야 합니다. 수정자의 좋은 예는 테마 색상 클래스와 크기 변형입니다.
z-indexBootstrap에는 구성 요소 내의 요소와 오버레이 구성 요소의 두 가지 척도가 있습니다.
borderBootstrap의 일부 구성 요소는 속성 을 수정하지 않고 이중 테두리를 방지하기 위해 겹치는 요소로 빌드됩니다 . 예를 들어 버튼 그룹, 입력 그룹 및 페이지 매김이 있습니다.- 이러한 구성 요소는 ~까지 의 표준
z-index스케일을 공유합니다 .03 0은(는) 기본값(초기)이고 는1/ 이고 , 는 입니다 .:hover2:active.active3:focus- 이 접근 방식은 가장 높은 사용자 우선 순위에 대한 우리의 기대와 일치합니다. 요소에 초점이 맞춰져 있으면 표시되고 사용자의 주의를 끌 수 있습니다. 활성 요소는 상태를 나타내기 때문에 두 번째로 높습니다. 호버는 사용자 의도를 나타내기 때문에 세 번째로 높지만 거의 모든 것을 호버링할 수 있습니다.
부트스트랩에는 일종의 오버레이로 작동하는 여러 구성 요소가 포함되어 있습니다. 여기에는 가장 높은 순서대로 z-index드롭다운, 고정 및 고정 탐색 모음, 모달, 도구 설명 및 팝오버가 포함됩니다. 이러한 구성 요소에는 에서 시작하는 자체 z-index축척이 1000있습니다. 이 시작 번호는 무작위이며 우리 스타일과 프로젝트의 사용자 정의 스타일 사이의 작은 버퍼 역할을 합니다.
각 오버레이 구성 요소 z-index는 일반적인 UI 원칙에 따라 사용자가 초점을 맞추거나 호버링한 요소가 항상 보기에 남아 있도록 하는 방식으로 값을 약간 높입니다. 예를 들어, 모달은 문서 차단이므로(예: 모달의 작업을 제외하고 다른 작업을 수행할 수 없음) 이를 탐색 모음 위에 둡니다.
z-index레이아웃 페이지 에서 이에 대해 자세히 알아보세요 .
가능하면 JavaScript보다 HTML과 CSS를 작성하는 것을 선호합니다. 일반적으로 HTML과 CSS는 다양한 경험 수준의 더 많은 사람들이 더 많이 사용하고 액세스할 수 있습니다. HTML과 CSS는 브라우저에서 JavaScript보다 빠르며 일반적으로 브라우저는 많은 기능을 제공합니다.
이 원칙은 우리의 일급 JavaScript API가 data속성입니다. JavaScript 플러그인을 사용하기 위해 거의 모든 JavaScript를 작성할 필요가 없습니다. 대신 HTML을 작성하십시오. 이에 대한 자세한 내용은 JavaScript 개요 페이지 를 참조하십시오 .
마지막으로, 우리의 스타일은 일반적인 웹 요소의 기본 동작을 기반으로 합니다. 가능하면 브라우저에서 제공하는 것을 사용하는 것을 선호합니다. 예를 들어 .btn거의 모든 요소에 클래스를 배치할 수 있지만 대부분의 요소는 의미론적 값이나 브라우저 기능을 제공하지 않습니다. 그래서 대신에 <button>s와 <a>s를 사용합니다.
더 복잡한 구성 요소도 마찬가지입니다. 입력 상태를 기반으로 상위 요소에 클래스를 추가하는 자체 양식 유효성 검사 플러그인을 작성하여 텍스트 스타일을 빨간색으로 지정할 수 있지만 모든 브라우저에서 제공하는 의사 요소를 사용하는 것을 선호:valid 합니다 :invalid.
이전에 Bootstrap 3의 도우미였던 유틸리티 클래스는 CSS 팽창 및 열악한 페이지 성능을 퇴치하는 강력한 동맹입니다. 유틸리티 클래스는 일반적으로 클래스로 표현되는 불변의 단일 속성-값 쌍입니다(예: .d-block) display: block;. 주요 매력은 HTML을 작성하는 동안 사용 속도와 작성해야 하는 사용자 정의 CSS의 양을 제한하는 것입니다.
특히 사용자 정의 CSS와 관련하여 유틸리티는 가장 일반적으로 반복되는 속성-값 쌍을 단일 클래스로 줄여 파일 크기 증가를 방지하는 데 도움이 될 수 있습니다. 이것은 프로젝트의 규모에 따라 극적인 효과를 줄 수 있습니다.
항상 가능한 것은 아니지만 구성 요소에 대한 HTML 요구 사항에서 지나치게 독단적이지 않도록 노력합니다. 따라서 CSS 선택기의 단일 클래스에 중점을 두고 즉각적인 자식 선택기( >)를 피하려고 합니다. 이를 통해 구현에 더 많은 유연성을 제공하고 CSS를 더 단순하고 덜 구체적으로 유지하는 데 도움이 됩니다.