내용으로 건너뛰기 문서 내비게이션으로 건너뛰기
// Download

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

컴파일된 CSS와 JS

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

여기에는 문서, 소스 파일, 그리고 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를 개별적으로 포함하는 것을 선호한다면 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