다운로드
다운로드 (Download)
Bootstrap을 프로젝트에 가져오는 다양한 방법을 정리한 문서예요. 컴파일된 파일, 소스 코드, CDN, 패키지 매니저별 설치 방법을 알 수 있어요.
출처: 문서
본문
컴파일된 CSS와 JS (Compiled CSS and JS)
쉽게 프로젝트에 가져다 쓸 수 있도록 바로 사용 가능한 Bootstrap v5.3.8 컴파일 코드를 다운로드하세요. 여기에는 다음이 포함돼요.
문서, 소스 파일, Popper 같은 선택적인 JavaScript 의존성은 포함되지 않아요.
소스 파일 (Source files)
소스 Sass, JavaScript, 문서 파일을 다운로드해서 자체 에셋 파이프라인으로 Bootstrap을 컴파일할 수 있어요. 이 옵션은 몇 가지 추가 도구가 필요해요.
만약 우리의 빌드 도구 전체가 필요하다면 Bootstrap과 그 문서를 개발하기 위한 용도로 포함되어 있지만, 여러분의 용도에는 적합하지 않을 수 있어요.
예시 (Examples)
우리의 예시를 다운로드해서 살펴보고 싶다면, 이미 빌드된 예시를 받을 수 있어요.
jsDelivr를 통한 CDN (CDN via jsDelivr)
다운로드를 건너뛰고 jsDelivr로 Bootstrap 컴파일된 CSS와 JS의 캐시 버전을 프로젝트에 전달해 보세요.
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
컴파일된 JavaScript를 사용하면서 Popper를 별도로 포함하는 걸 선호한다면, 가능하면 CDN으로 우리 JS 앞에 Popper를 추가하세요.
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-G/EV+4j2dNv+tEPo3++6LCgdCROaejBqfUeNjuKAiuXbjrxilcCdDz6ZAVfHWe1Y" crossorigin="anonymous"></script>
대체 CDN (Alternative CDNs)
우리는 jsDelivr를 권장하고 우리 문서에서도 직접 사용해요. 하지만 일부 특정 국가나 환경과 같은 경우에는 cdnjs나 unpkg 같은 다른 CDN 제공자를 사용해야 할 수도 있어요.
이 CDN 제공자에서도 같은 파일을 찾을 수 있는데, URL만 다를 뿐이에요. cdnjs에서는 이 Bootstrap 패키지 링크를 사용해서 어떤 버전의 Bootstrap이든 각 dist 파일에 대한 바로 사용 가능한 HTML 스니펫을 복사·붙여넣기할 수 있어요.
특정 파일의 SRI 해시가 다르다면 그 CDN의 파일을 사용하면 안 돼요. 그 파일이 다른 사람에 의해 수정됐다는 뜻이기 때문이에요.
참고로 같은 길이의 해시끼리 비교해야 해요. 예를 들어 sha384는 sha384와 비교하세요. 그렇지 않으면 서로 다를 수밖에 없어요.
이런 경우 SRI Hash Generator 같은 온라인 도구를 사용해서 특정 파일의 해시가 같은지 확인할 수 있어요.
혹은 OpenSSL이 설치되어 있다면 CLI에서도 같은 작업을 할 수 있어요. 예를 들면:
openssl dgst -sha384 -binary bootstrap.min.js | openssl base64 -A
패키지 매니저 (Package managers)
가장 널리 쓰이는 패키지 매니저로 거의 모든 프로젝트에 Bootstrap 소스 파일을 가져올 수 있어요. 어떤 패키지 매니저를 쓰든 Bootstrap은 공식 컴파일 버전과 일치하는 설정을 위해 Sass 컴파일러와 Autoprefixer가 필요해요.
npm
the npm package로 Node.js 기반 앱에 Bootstrap을 설치하세요.
npm install [email protected]
const bootstrap = require('bootstrap') 또는 import bootstrap from 'bootstrap'은 모든 Bootstrap 플러그인을 bootstrap 객체에 로드해요.
bootstrap 모듈 자체가 우리의 모든 플러그인을 export해요. 패키지 최상위 디렉터리의 /js/dist/*.js 파일을 로드해서 Bootstrap 플러그인을 개별적으로 수동 로드할 수도 있어요.
Bootstrap의 package.json은 다음 키 아래에 추가 메타데이터를 포함하고 있어요.
sass- Bootstrap의 메인 Sass 소스 파일 경로style- 기본 설정(커스터마이즈 없음)으로 컴파일된 Bootstrap의 minify되지 않은 CSS 경로
스타터 프로젝트로 npm을 통해 Bootstrap을 시작해 보세요! Sass & JS 예시 템플릿 저장소에서 자신의 npm 프로젝트에 Bootstrap을 빌드하고 커스터마이즈하는 방법을 볼 수 있어요. Sass 컴파일러, Autoprefixer, Stylelint, PurgeCSS, Bootstrap Icons가 포함되어 있어요.
yarn
the yarn package로 Node.js 기반 앱에 Bootstrap을 설치하세요.
yarn add [email protected]
Yarn 2+(일명 Yarn Berry)는 기본적으로 node_modules 디렉터리를 지원하지 않아요. 우리의 Sass & JS 예시를 사용하려면 몇 가지 조정이 필요해요.
yarn config set nodeLinker node-modules # Use the node_modules linker
touch yarn.lock # Create an empty yarn.lock file
yarn install # Install the dependencies
yarn start # Start the project
Bun
the Bun CLI로 Bun 또는 Node.js 기반 앱에 Bootstrap을 설치하세요.
bun add [email protected]
RubyGems
Bundler(권장)와 RubyGems를 사용해 Ruby 앱에 Bootstrap을 설치하세요. Gemfile에 다음 줄을 추가하면 돼요.
gem 'bootstrap', '~> 5.3.8'
혹은 Bundler를 사용하지 않는다면 다음 명령으로 gem을 설치할 수 있어요.
gem install bootstrap -v 5.3.8
자세한 내용은 gem의 README를 참고하세요.
Composer
Composer로 Bootstrap의 Sass와 JavaScript를 설치하고 관리할 수도 있어요.
composer require twbs/bootstrap:5.3.8
NuGet
.NET Framework에서 개발한다면 NuGet으로 Bootstrap의 CSS 또는 Sass와 JavaScript를 설치하고 관리할 수 있어요. 다만 NuGet은 컴파일된 코드용으로 설계된 것이지 프런트엔드 자산용이 아니므로, 새 프로젝트에서는 libman이나 다른 방법을 사용하는 것이 좋아요.
Install-Package bootstrap
Install-Package bootstrap.sass
IntelliSense 확장 (IntelliSense extension)
Visual Studio Code용 커뮤니티 유지 IntelliSense 확장을 설치하면 Bootstrap 클래스에 대한 IntelliSense 자동 완성을 사용할 수 있어요.