Bootstrap으로 빠르게 반응형 사이트 빌드하기

강력하고 확장 가능하며 기능이 풍부한 프론트엔드 툴킷. Sass로 빌드 및 커스터마이징하고, 사전 빌드된 그리드 시스템 및 구성 요소를 활용하고, 강력한 JavaScript 플러그인으로 프로젝트에 생기를 불어넣습니다.

npm i bootstrap@5.3.3

문서 읽어보기

현재 v5.3.3 · 다운로드 · 모든 버전

내가 원하는 방법으로 시작하기

바로 Bootstrap으로 빌드해보세요. CDN을 사용하거나, 패키지 관리자를 통해 설치하거나, 소스 코드를 다운로드할 수도 있습니다.

설치 문서 읽어보기

패키지 관리자로 설치하기

npm, RubyGems, Composer, 또는 Meteor를 통해서 Bootstrap의 Sass 소스와 JavaScript를 설치하세요. 패키지 관리자를 통한 설치하는 문서나 전체 빌드 스크립트가 포함되어 있지 않습니다. 우리의 npm 템플릿 저장소를 사용해서 빠르게 npm으로 Bootstrap 프로젝트를 생성할 수 있습니다.

npm install bootstrap@5.3.3

gem install bootstrap -v 5.3.3

추가적인 정보와 다른 패키지 관리자에 대한 부분은 설치 문서를 읽어보세요.

CDN으로 포함시키기

Bootstrap의 컴파일된 CSS 또는 JS만 필요하다면, jsDelivr를 사용할 수 있습니다. 단순한 빠른 시작으로 어떻게 작동하는지 직접 보거나, 예시를 참고해서 바로 다음 프로젝트를 시작해보세요. Popper와 Bootstrap의 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>

시작하기 가이드 읽어보기

공식 가이드에서 Bootstrap의 소스 파일을 포함시키는 방법에 대해 알아보세요.

Webpack

Parcel

Vite

Sass로 뭐든지 사용자 지정하기

Bootstrap은 모듈러 및 사용자 지정 가능한 아키텍처를 위해서 Sass를 사용합니다. 원하는 컴포넌트만 포함시키거나, 그라디언트나 그림자와 같은 전역 옵션을 활성화하거나, 우리의 변수, 맵, 함수, 믹스인을 사용해서 직접 CSS를 작성할 수 있습니다.

사용자 지정하는 방법에 대해서 알아보기

Bootstrap의 모든 Sass 포함시키기

하나의 스타일시트를 가져오기만 하면 CSS의 모든 기능을 사용할 수 있습니다.

// Variable overrides first
$primary: #900;
$enable-shadows: true;
$prefix: "mo-";

// Then import Bootstrap
@import "../node_modules/bootstrap/scss/bootstrap";

전역 Sass 옵션에 대해서 자세히 알아보세요.

필요한 것만 포함시키기

필요한 CSS만 포함시키는 것은 Bootstrap을 사용자 지정하기 가장 쉬운 방법입니다.

// Functions first
@import "../node_modules/bootstrap/scss/functions";

// Variable overrides second
$primary: #900;
$enable-shadows: true;
$prefix: "mo-";

// Required Bootstrap imports
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/variables-dark";
@import "../node_modules/bootstrap/scss/maps";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/root";

// Optional components
@import "../node_modules/bootstrap/scss/utilities";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/containers";
@import "../node_modules/bootstrap/scss/grid";
@import "../node_modules/bootstrap/scss/helpers";
@import "../node_modules/bootstrap/scss/utilities/api";

Bootstrap을 Sass와 사용하는 방법에 대해서 자세히 알아보세요.

CSS 변수로 실시간으로 빌드 및 확장하기

Bootstrap 5는 전역 테마 스타일, 개별 컴포넌트 및 유틸리티에 대한 CSS 변수를 더 잘 활용하기 위해 버전을 거듭할수록 발전하고 있습니다. 어디에서나 사용할 수 있도록 :root 수준에서 색상, 글꼴 스타일 등에 대한 수십 가지 변수를 제공합니다. 컴포넌트 및 유틸리티에서 CSS 변수는 관련 클래스로 범위가 지정되며 쉽게 수정할 수 있습니다.

CSS 변수에 대해서 알아보기

CSS 변수 사용하기

전역 :root 변수를 사용해서 새로운 스타일을 작성해보세요. CSS 변수는 var(--bs-variableName)구문을 사용하며 하위 요소에 상속할 수 있습니다.

.component {
  color: var(--bs-gray-800);
  background-color: var(--bs-gray-100);
  border: 1px solid var(--bs-gray-200);
  border-radius: .25rem;
}

.component-header {
  color: var(--bs-purple);
}

CSS 변수를 통해서 사용자 지정하기

전역, 컴포넌트 또는 유틸리티 클래스 변수를 재정의하여 원하는 대로 Bootstrap을 사용자 지정합니다. 각 규칙을 다시 선언할 필요가 없으며 새로운 변수 값만 있으면 됩니다.

body {
  --bs-body-font-family: var(--bs-font-monospace);
  --bs-body-line-height: 1.4;
  --bs-body-bg: var(--bs-gray-100);
}

.table {
  --bs-table-color: var(--bs-gray-600);
  --bs-table-bg: var(--bs-gray-100);
  --bs-table-border-color: transparent;
}

컴포넌트, 유틸리티 API를 만나다

Bootstrap 5부터 유틸리티는 유틸리티 API로 생성됩니다. 빠르고 쉽게 사용자 정의할 수 있는 기능으로 가득찬 Sass 맵으로 만들어졌습니다. 유틸리티 클래스를 추가, 제거 또는 수정하는 것이 그 어느 때보다 쉬워졌습니다. 유틸리티를 반응형으로 만들고 의사 클래스(pseudo-class) 변형을 추가하고 별도의 이름을 지정할 수 있습니다.

구성 요소를 빠르게 사용자 지정하기

포함된 유틸리티 클래스를 구성 요소에 적용하여 아래 탐색 예제와 같이 모양을 사용자 지정해보세요. 위치 지정, 크기 조절, 색상, 효과까지 수백 개의 클래스가 있습니다. 더 많은 제어를 위해 CSS 변수 재정의와 혼합할 수도 있습니다.

<ul class="nav nav-pills nav-fill gap-2 p-1 small bg-primary rounded-5 shadow-sm" id="pillNav2" role="tablist" style="--bs-nav-link-color: var(--bs-white); --bs-nav-pills-link-active-color: var(--bs-primary); --bs-nav-pills-link-active-bg: var(--bs-white);">
  <li class="nav-item" role="presentation">
    <button class="nav-link active rounded-5" id="home-tab2" data-bs-toggle="tab" type="button" role="tab" aria-selected="true">Home</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link rounded-5" id="profile-tab2" data-bs-toggle="tab" type="button" role="tab" aria-selected="false">Profile</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link rounded-5" id="contact-tab2" data-bs-toggle="tab" type="button" role="tab" aria-selected="false">Contact</button>
  </li>
</ul>

사용자 지정 컴포넌트에 대해서 알아보기

유틸리티의 생성과 확장

Bootstrap의 유틸리티 API를 사용하여 포함된 유틸리티를 수정하거나 모든 프로젝트에 대한 고유한 사용자 정의 유틸리티를 만들어보세요. Bootstrap을 먼저 가져온 다음 Sass 맵 기능을 사용하여 유틸리티를 수정, 추가 또는 제거하면 됩니다.

@import "bootstrap/scss/bootstrap";

$utilities: map-merge(
  $utilities,
  (
    "cursor": (
      property: cursor,
      class: cursor,
      responsive: true,
      values: auto pointer grab,
    )
  )
);

유틸리티 API에 대해서 알아보기

jQuery가 필요 없는
강력한 JavaScript 플러그인

토글 가능한 숨겨진 요소, 모달 및 캔버스 외 메뉴, 팝오버 및 툴팁 등의 쉬운 추가 등. 이 많은 것들은 jQuery를 필요로 하지 않습니다. Bootstrap의 JavaScript는 HTML 우선이며, 이것은 플러그인을 추가하는 것이 data 속성을 추가하는 것만큼 쉽다는 것을 의미합니다. 더 많은 제어가 필요하신가요? 프로그래밍 방식으로 개별 플러그인을 포함시킬 수 있습니다.

Bootstrap JavaScript에 대해서 알아보기

데이터 속성 API

HTML을 작성할 수 있는데 왜 JavaScript를 더 많이 작성해야하나요? Bootstrap의 거의 모든 JavaScript 플러그인은 최고급 데이터 API를 제공하므로 data 속성을 추가하는 것만으로 JavaScript를 사용할 수 있습니다.

<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown
  </button>
  <ul class="dropdown-menu">
    <li><button class="dropdown-item" type="button">Dropdown item</button></li>
    <li><button class="dropdown-item" type="button">Dropdown item</button></li>
    <li><button class="dropdown-item" type="button">Dropdown item</button></li>
  </ul>
</div>

JavaScript를 모듈로 사용하는 것과 프로그래밍 가능한 API에 대해서 자세히 알아보세요.

포괄적인 플러그인 세트

Bootstrap은 어떤 프로젝트에서도 사용 가능한 12가지 플러그인을 제공합니다. 한 번에 모두 넣거나 필요한 것만 선택해보세요.

Bootstrap Icons로 개인화하기

Bootstrap Icons는 1,800개 이상의 글리프를 가지고 있는 오픈소스 SVG 아이콘 라이브러리이며, 아이콘은 매 버전마다 계속 추가되고 있습니다. 꼭 Bootstrap을 사용하는 프로젝트가 아니더라도 작동하도록 디자인되었습니다. SVG 또는 아이콘 폰트로 사용 가능하며, 두 옵션 모두 벡터 스케일링과 CSS를 통한 쉬운 사용자 지정이 가능합니다.

Bootstrap Icons 사용해보기

공식 Bootstrap Themes을 사용해서 나만의 것으로 만들기

Bootstrap 공식 테마 마켓플레이스의 프리미엄 테마를 통해서 Bootstrap를 다음 단계로 올려놓으세요. 테마는 Bootstrap을 기반으로 확장된 고유의 프레임워크, 풍부한 새로운 컴포넌트 및 플러그인, 문서, 강력한 빌드 도구로 만들어졌습니다.

Bootstrap Themes에 대해서 알아보기