다운로드

컴파일된 CSS와 JS

바로 사용할 수 있는 컴파일된 Bootstrap v5.3.3 코드를 다운로드해서 프로젝트에 포함시킬 수 있습니다. 다음이 포함되어 있습니다:

• 컴파일 및 경량화 된 CSS 번들 (CSS 파일 비교 보기)
• 컴파일 및 경량화 된 JavaScript 플러그인 (JS 파일 비교 보기)

여기에는 문서, 소스 파일, 그리고 Popper같은 선택적 JavaScript 의존성이 포함되어 있지 않습니다.

다운로드

소스 파일

Sass, JavaScript, 그리고 문서 소스를 다운로드해서 고유 자산 파이프라인을 통해서 BootStrap를 컴파일할 수 있습니다. 이를 위해서는 다음 도구들이 필요합니다:

• CSS 컴파일을 위한 Sass 컴파일러 (Libsass 또는 Ruby Sass도 지원함).

• CSS 벤더 접두어를 위한 Autoprefixer

• Sass 소스 파일을 CSS 파일로 컴파일하기 위한 Sass 컴파일러

• CSS 벤더 접두어를 위한 Autoprefixer

필요한 경우 빌드 도구를 사용할 수도 있습니다. Bootstrap 및 문서 개발을 위해 포함되어 있긴 하지만, 목적에 적합하지 않을 수도 있습니다.

소스 다운로드

예시

예시를 다운로드하고 확인하고 싶다면 이미 만들어진 예시를 사용해 볼 수도 있습니다:

예시 다운로드

jsDelivr를 통한 CDN

jsDelivr를 사용해서 다운로드하지 않고 Bootstrap의 컴파일된 CSS와 JS의 캐시 버전을 프로젝트에 전달하세요.

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>

이미 컴파일된 JavaScript를 사용하고 있고 Popper를 개별적으로 포함하는 것을 선호한다면 Bootstrap의 JS 이전에 CDN을 통해서 Popper를 추가하세요.

<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js" integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy" crossorigin="anonymous"></script>

Alternative CDNs

We recommend jsDelivr and use it ourselves in our documentation. However, in some cases—like in some specific countries or environments—you may need to use other CDN providers like cdnjs or unpkg.

You’ll find the same files on these CDN providers, albeit with different URLs. With cdnjs, you can use this direct Bootstrap package link to copy and paste ready-to-use HTML snippets for each dist file from any version of Bootstrap.

Note that you should compare same length hashes, e.g. sha384 with sha384, otherwise it’s expected for them to be different. As such, you can use an online tool like SRI Hash Generator to make sure that the hashes are the same for a given file. Alternatively, assuming you have OpenSSL installed, you can achieve the same from the CLI, for example:

openssl dgst -sha384 -binary bootstrap.min.js | openssl base64 -A

패키지 관리자

Bootstrap의 소스 파일을 유명한 패키지 관리자들을 사용해서 거의 모든 프로젝트에 Bootstrap을 사용할 수 있습니다. 패키지 관리자와 상관없이 Bootstrap은 공식 컴파일된 버전과 일치하는 구성을 위해 Sass 컴파일러와 Autoprefixer를 필요로 합니다.

npm

npm 패키지를 사용해서 Node.js로 만들어진 앱에 Bootstrap를 설치하세요:

npm install bootstrap@5.3.3

const bootstrap = require('bootstrap') 또는 import bootstrap from 'bootstrap'는 bootstrap 객체에 모든 Bootstrap의 플러그인을 불러옵니다. bootstrap 모듈은 자체에서 모든 플러그인을 내보냅니다. 패키지 최부모 디렉토리 아래에 있는 /js/dist/*.js 파일을 불러옴으로서 Bootstrap의 플러그인을 직접 독립적으로 불러올 수 있습니다.

Bootstrap의 package.json에는 다음 키에 몇몇 메타데이터가 포함되어 있습니다:

• sass - Bootstrap의 메인 Sass 소스 파일로 향하는 경로
• style - Bootstrap의 경량화되지 않았지만 (추가 설정 없이) 기본 설정으로만 컴파일된 CSS로 향하는 경로

yarn

yarn 패키지를 사용해서 Node.js로 만들어진 앱에 Bootstrap를 설치하세요:

yarn add bootstrap@5.3.3

RubyGems

Bundler (권장)와 RubyGems by adding the following line to your Gemfile에 다음 줄을 추가해 Bundler (권장)와 RubyGems를 사용해서 Ruby 앱에 Bootstrap을 설치할 수 있습니다:

gem 'bootstrap', '~> 5.3.3'

Bundler를 사용하고 있지 않다면 다음 명령어를 실행해서 gem을 설치할 수 있습니다:

gem install bootstrap -v 5.3.3

자세한 사항은 gem의 README를 확인해주세요.

Composer

Composer로도 Bootstrap의 Sass와 JavaScript를 설치 및 관리할 수 있습니다:

composer require twbs/bootstrap:5.3.3

NuGet

.NET 프레임워크으로 개발하고 있다면, NuGet을 사용해서 Bootstrap의 CSS 또는 Sass 및 JavaScript를 설치 및 관리할 수 있습니다. Newer projects should use libman or another method as NuGet is designed for compiled code, not frontend assets.

Install-Package bootstrap

Install-Package bootstrap.sass