구성요소

컴파일된 및 소스 코드를 포함하여 Bootstrap에 무엇이 포함되어 있는지 알아봅시다. Bootstrap의 JavaScript 플러그인은 jQuery를 필요로 하는 것을 알아두세요.

컴파일된 Bootstrap

다운로드 한 후 압축 폴더를 해제하면 다음과 같습니다.

bootstrap/
├── css/
│   ├── bootstrap-grid.css
│   ├── bootstrap-grid.css.map
│   ├── bootstrap-grid.min.css
│   ├── bootstrap-grid.min.css.map
│   ├── bootstrap-reboot.css
│   ├── bootstrap-reboot.css.map
│   ├── bootstrap-reboot.min.css
│   ├── bootstrap-reboot.min.css.map
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   └── bootstrap.min.css.map
└── js/
    ├── bootstrap.bundle.js
    ├── bootstrap.bundle.js.map
    ├── bootstrap.bundle.min.js
    ├── bootstrap.bundle.min.js.map
    ├── bootstrap.js
    ├── bootstrap.js.map
    ├── bootstrap.min.js
    └── bootstrap.min.js.map

이것은 거의 모든 웹 프로젝트에서 빠른 사용을 위해 컴파일된 Bootstrap 파일의 가장 기본적인 형태입니다. 우리는 컴파일된 CSS 및 JS (bootstrap.*)를 제공하며, 컴파일 및 경량화된 CSS 및 JS (bootstrap.min.*)도 제공합니다. 소스 맵 (bootstrap.*.map)은 몇몇 브라우저의 개발자 도구에서 사용할 수 있습니다. 번들 처리된 JS 파일 (bootstrap.bundle.js 및 경량화된 bootstrap.bundle.min.js)에는 Popper가 포함되어 있지만, jQuery는 없습니다.

CSS 파일

Bootstrap에는 컴파일된 CSS의 일부 또는 전체를 포함할 수 있는 몇 가지 옵션이 있습니다.

CSS 파일 레이아웃 구성 요소 컴포넌트 유틸리티
bootstrap.css
bootstrap.min.css
포함됨 포함됨 포함됨 포함됨
bootstrap-grid.css
bootstrap-grid.min.css
그리드 시스템만 포함되지 않음 포함되지 않음 Flex 유틸리티만
bootstrap-reboot.css
bootstrap-reboot.min.css
포함되지 않음 Reboot만 포함되지 않음 포함되지 않음

JS 파일

마찬가지로 컴파일된 JS의 일부 또는 전체를 포함할 수 있는 옵션이 있습니다.

JS 파일 Popper jQuery
bootstrap.bundle.js
bootstrap.bundle.min.js
포함됨 포함되지 않음
bootstrap.js
bootstrap.min.js
포함되지 않음 포함되지 않음

Bootstrap 소스 코드

Bootstrap 소스 코드 다운로드에는 컴파일된 CSS 및 JavaScript 에셋과 함께 Sass 소스, JavaScript, 그리고 문서를 포함하고 있습니다. 구체적으로는 다음과 같습니다.

bootstrap/
├── dist/
│   ├── css/
│   └── js/
├── site/
│   └──docs/
│      └── 4.4/
│          └── examples/
├── js/
└── scss/

scss/js/는 CSS 및 JavaScript의 소스 코드입니다. dist/ 폴더에는 위에 있는 컴파일된 다운로드 섹션에 있는 모든 것을 포함합니다. site/docs/ 폴더에는 문서 소스 코드가 있고, examples/에는 Bootstrap 예제가 있습니다. 그 외에도 패키지 지원을 위한 파일, 라이선스 정보, 그리고 개발에 관련된 파일이 포함되어 있습니다.