콘텐츠 구성
콘텐츠 구성 (Contents)
다운로드한 Bootstrap 압축 폴더 안에 어떤 파일들이 들어 있는지, 그리고 소스 코드 버전의 구조를 정리한 문서예요.
출처: 문서
본문
컴파일된 Bootstrap (Compiled Bootstrap)
다운로드가 끝나면 압축 폴더를 풀어 보세요. 그러면 아래와 같은 구조를 볼 수 있어요.
bootstrap/
├── css/
│ ├── bootstrap-grid.css
│ ├── bootstrap-grid.css.map
│ ├── bootstrap-grid.min.css
│ ├── bootstrap-grid.min.css.map
│ ├── bootstrap-grid.rtl.css
│ ├── bootstrap-grid.rtl.css.map
│ ├── bootstrap-grid.rtl.min.css
│ ├── bootstrap-grid.rtl.min.css.map
│ ├── bootstrap-reboot.css
│ ├── bootstrap-reboot.css.map
│ ├── bootstrap-reboot.min.css
│ ├── bootstrap-reboot.min.css.map
│ ├── bootstrap-reboot.rtl.css
│ ├── bootstrap-reboot.rtl.css.map
│ ├── bootstrap-reboot.rtl.min.css
│ ├── bootstrap-reboot.rtl.min.css.map
│ ├── bootstrap-utilities.css
│ ├── bootstrap-utilities.css.map
│ ├── bootstrap-utilities.min.css
│ ├── bootstrap-utilities.min.css.map
│ ├── bootstrap-utilities.rtl.css
│ ├── bootstrap-utilities.rtl.css.map
│ ├── bootstrap-utilities.rtl.min.css
│ ├── bootstrap-utilities.rtl.min.css.map
│ ├── bootstrap.css
│ ├── bootstrap.css.map
│ ├── bootstrap.min.css
│ ├── bootstrap.min.css.map
│ ├── bootstrap.rtl.css
│ ├── bootstrap.rtl.css.map
│ ├── bootstrap.rtl.min.css
│ └── bootstrap.rtl.min.css.map
└── js/
├── bootstrap.bundle.js
├── bootstrap.bundle.js.map
├── bootstrap.bundle.min.js
├── bootstrap.bundle.min.js.map
├── bootstrap.esm.js
├── bootstrap.esm.js.map
├── bootstrap.esm.min.js
├── bootstrap.esm.min.js.map
├── bootstrap.js
├── bootstrap.js.map
├── bootstrap.min.js
└── bootstrap.min.js.map
이것이 Bootstrap의 가장 기본적인 형태예요. 거의 모든 웹 프로젝트에 빠르게 가져다 쓸 수 있는 컴파일된 파일들이죠. 컴파일된 CSS와 JS(bootstrap.*)는 물론, 컴파일되고 minify된 CSS와 JS(bootstrap.min.*)도 제공해요. 소스 맵(Source map)(bootstrap.*.map)은 특정 브라우저의 개발자 도구에서 사용할 수 있어요. 번들된 JS 파일(bootstrap.bundle.js와 minify된 bootstrap.bundle.min.js)에는 Popper가 포함되어 있어요.
CSS 파일 (CSS files)
Bootstrap은 컴파일된 CSS 전체 또는 일부를 포함할 수 있는 몇 가지 옵션을 제공해요.
| CSS 파일 | Layout | Content | Components | Utilities |
|---|---|---|---|---|
bootstrap.css bootstrap.min.css bootstrap.rtl.css bootstrap.rtl.min.css |
포함 | 포함 | 포함 | 포함 |
bootstrap-grid.css bootstrap-grid.rtl.css bootstrap-grid.min.css bootstrap-grid.rtl.min.css |
그리드 시스템만 | — | — | flex 유틸리티만 |
bootstrap-utilities.css bootstrap-utilities.rtl.css bootstrap-utilities.min.css bootstrap-utilities.rtl.min.css |
— | — | — | 포함 |
bootstrap-reboot.css bootstrap-reboot.rtl.css bootstrap-reboot.min.css bootstrap-reboot.rtl.min.css |
— | Reboot만 | — | — |
JS 파일 (JS files)
마찬가지로 컴파일된 JavaScript 전체 또는 일부를 포함할 수 있는 옵션도 제공해요.
| JS 파일 | Popper |
|---|---|
bootstrap.bundle.js bootstrap.bundle.min.js |
포함 |
bootstrap.js bootstrap.min.js |
– |
Bootstrap 소스 코드 (Bootstrap source code)
Bootstrap 소스 코드 다운로드에는 컴파일된 CSS와 JavaScript 자산, 그리고 소스 Sass, JavaScript, 문서가 함께 포함되어 있어요. 더 구체적으로는 다음과 같은 내용이 포함돼요.
bootstrap/
├── dist/
│ ├── css/
│ └── js/
├── site/
│ └──content/
│ └── docs/
│ └── 5.3/
│ └── examples/
├── js/
└── scss/
scss/와 js/는 CSS와 JavaScript의 소스 코드예요. dist/ 폴더에는 위 컴파일된 다운로드 섹션에 나열된 모든 것이 들어 있어요. site/content/docs/ 폴더에는 Bootstrap 사용 예시를 포함한 호스팅 문서의 소스 코드가 담겨 있어요.
그 외에 포함된 다른 파일들은 패키지 지원, 라이선스 정보, 개발을 위한 것들이에요.