부트스트랩 개요
부트스트랩은 탐색, 양식 및 버튼과 같은 공통 요소에 대해 미리 만들어진 CSS 및 JavaScript 구성 요소를 사용하여 웹 인터페이스를 디자인하는 데 도움이 되는 프런트 엔드 프레임워크입니다. 또한 휴대폰, 태블릿 등 화면 크기가 다양한 장치에 맞게 사이트를 조정하는 반응형 그리드 레이아웃 시스템도 갖추고 있습니다. 부트스트랩 레이아웃 시스템을 사용하면 고객이 사용할 수 있는 모든 장치에서 보기 편한 단일 사이트를 만들 수 있습니다.
Power Pages 템플릿은 최소한의 사용자 정의 스타일로 표준 부트스트랩 구성 요소를 사용합니다. 이러한 템플릿을 사용하면 테마(글꼴, 색상 등)를 쉽게 변경하여 전체 사이트에서 일관되게 브랜드 및 선호도에 맞출 수 있습니다.
Power Pages는 부트스트랩 버전 3.3.6 및 부트스트랩 버전 5를 지원합니다. 부트스트랩 버전 5는 향상된 사용자 경험(UX) 기능과 아코디언, 오프캔버스, RTL 지원과 같은 새로운 구성 요소를 제공합니다.
새로운 Power Pages 사이트의 경우 환경에 부트스트랩 버전 5를 설정해야 합니다. 버전 5로 기존 부트스트랩 버전 3 웹 사이트를 마이그레이션할 수도 있습니다.
부트스트랩 사용자 지정
부트스트랩을 사용자 지정하려면 변수 값을 변경한 다음 사용자 지정 값으로 컴파일된 부트스트랩 버전을 다운로드합니다.
부트스트랩 변수의 장점은 단지 하나의 요소가 아닌 프레임워크의 모든 스타일을 정의한다는 것입니다. 예를 들어 @font-size-base 변수는 사이트 텍스트(본문 텍스트, 제목 및 기타 모든 텍스트 요소)의 기본 크기를 지정합니다. H1 제목은 @font-size-base의 300%로 정의될 수 있습니다. 이 변수 한 개를 설정함으로써 웹 사이트의 전체 서식 척도를 지속적으로 제어할 수 있습니다.
공식 부트스트랩 사이트를 통해 부트스트랩의 사용자 지정 버전을 만들거나 더 쉬운 인터페이스나 미리 디자인된 테마를 제공할 수 있는 타사 사이트를 사용할 수 있습니다. 공식 부트스트랩 사용자 지정자 사이트에는 부트스트랩 사용자 지정에 대한 자세한 정보가 나와 있습니다.
다운로드한 사용자 지정 버전의 부트스트랩은 다음과 같은 디렉터리 구조를 포함합니다.
css/
|-- bootstrap.min.css
img/
|-- glyphicons-halflings-white.png
|-- glyphicons-halflings.png
js/
|-- bootstrap.min.js
사용된 사용자 지정자 애플리케이션에 따라 디렉터리 구조에는 bootstrap.min.css만 포함될 수 있습니다. 사용자 지정 내용이 포함된 파일입니다. 다른 파일들은 부트스트랩의 모든 사용자 지정 버전에 대해 동일하며 이미 귀하의 웹 사이트에 포함되어 있습니다.