GitHub에서 보기

다운로드

// Download

Bootstrap을 다운로드하여 컴파일된 CSS 및 JavaScript, 소스 코드를 얻거나 npm, RubyGems 등과 같은 즐겨쓰는 패키지 관리자를 사용해서 포함시키세요.

컴파일된 CSS와 JS

바로 사용할 수 있는 컴파일된 Bootstrap v5.1.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.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

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

<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>

패키지 관리자

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

npm

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

npm install bootstrap

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

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

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

스타터 프로젝트로 npm을 통해 Bootstrap을 시작하세요! twbs/bootstrap-npm-starter 템플릿 저장소에서 자신의 npm 프로젝트에서 Bootstrap을 빌드하고 사용자 정의하는 방법을 확인해보세요. Sass 컴파일러, Autoprefixer, Stylelint, PurgeCSS,Bootstrap 아이콘이 포함되어 있습니다.

yarn

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

yarn add bootstrap

RubyGems

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

gem 'bootstrap', '~> 5.1.3'

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

gem install bootstrap -v 5.1.3

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

Composer

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

composer require twbs/bootstrap:5.1.3

NuGet

.NET으로 개발하고 있다면, NuGet을 사용해서 Bootstrap의 CSS 또는 Sass 및 JavaScript를 설치 및 관리할 수 있습니다:

Install-Package bootstrap

Install-Package bootstrap.sass