사용자 정의

Sass, 다양한 글로벌 옵션, 광범위한 색상 시스템 등을 사용하여 Bootstrap을 테마, 사용자 지정 및 확장하는 방법을 알아보세요.

사스 소스 Sass 파일을 활용하여 변수, 맵, 믹스인 및 함수를 활용하십시오.

옵션 내장 변수로 부트스트랩을 사용자 정의하여 전역 CSS 기본 설정을 쉽게 토글할 수 있습니다.

색깔 전체 툴킷을 지원하는 색상 시스템에 대해 배우고 사용자 정의하십시오.

구성품 기본 및 수정자 클래스를 사용하여 거의 모든 구성 요소를 반응형으로 구축하는 방법을 알아보세요.

CSS 변수 빠르고 미래 지향적인 디자인 및 개발을 위해 Bootstrap의 CSS 사용자 정의 속성을 사용하십시오.

최적화 최고의 경험을 제공할 수 있도록 프로젝트를 간결하고 응답성이 높으며 유지 관리가 용이하도록 유지하세요.

개요

부트스트랩을 사용자 정의하는 방법에는 여러 가지가 있습니다. 최상의 경로는 프로젝트, 빌드 도구의 복잡성, 사용 중인 부트스트랩 버전, 브라우저 지원 등에 따라 달라질 수 있습니다.

우리가 선호하는 두 가지 방법은 다음과 같습니다.

패키지 관리자를 통해 부트스트랩을 사용하여 소스 파일을 사용하고 확장할 수 있습니다.
Bootstrap의 컴파일된 배포 파일 또는 jsDelivr 을 사용하여 Bootstrap의 스타일을 추가하거나 재정의할 수 있습니다.

여기에서 모든 패키지 관리자를 사용하는 방법에 대해 자세히 설명할 수는 없지만 고유한 Sass 컴파일러와 함께 부트스트랩을 사용 하는 방법에 대한 지침을 제공할 수 있습니다 .

배포 파일을 사용하려는 사람들은 시작하기 페이지 에서 해당 파일을 포함하는 방법과 예제 HTML 페이지를 검토하세요. 거기에서 사용하려는 레이아웃, 구성 요소 및 동작에 대한 문서를 참조하십시오.

부트스트랩에 익숙해지면 이 섹션을 계속 탐색하여 글로벌 옵션을 활용하는 방법, 색상 시스템을 사용 및 변경하는 방법, 구성 요소를 구축하는 방법, 늘어나는 CSS 사용자 정의 속성 목록을 사용하는 방법 및 방법에 대해 자세히 알아보세요. 부트스트랩으로 빌드할 때 코드를 최적화합니다.

CSP 및 임베디드 SVG

여러 Bootstrap 구성 요소에는 CSS에 포함된 SVG가 포함되어 있어 브라우저와 장치 전반에 걸쳐 구성 요소의 스타일을 일관되고 쉽게 할 수 있습니다. 보다 엄격한 CSP 구성 을 사용하는 조직을 위해 포함된 SVG의 모든 인스턴스(모두 를 통해 적용됨 background-image)를 문서화하여 옵션을 보다 철저하게 검토할 수 있습니다.

커뮤니티 대화 를 기반으로 고유한 코드베이스에서 이 문제를 해결하기 위한 몇 가지 옵션에는 URL을 로컬에서 호스팅되는 자산으로 교체하고, 이미지를 제거하고 인라인 이미지를 사용하고(일부 구성 요소에서 가능하지 않음) CSP를 수정하는 방법이 있습니다. 자체 보안 정책을 신중하게 검토하고 필요한 경우 최선의 경로를 결정하는 것이 좋습니다.