주요 콘텐츠로 건너뛰기
Check
v5.2의 새로운 기능 CSS 변수, 반응형 오프캔버스, 새로운 유틸리티 등! 부트스트랩

Bootstrap으로 빠르고 반응이 빠른 사이트 구축

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

npm i [email protected]
문서 읽기

현재 v5.2.1 · 다운로드 · v4.6.x 문서 · 모든 릴리스

원하는 방식으로 시작하세요

Bootstrap을 사용하여 바로 빌드하세요. CDN을 사용하거나 패키지 관리자를 통해 설치하거나 소스 코드를 다운로드하세요.

설치 문서 읽기

패키지 관리자를 통해 설치

npm, RubyGems, Composer 또는 Meteor를 통해 Bootstrap의 소스 Sass 및 JavaScript 파일을 설치합니다. 패키지 관리 설치에는 설명서나 전체 빌드 스크립트가 포함되어 있지 않습니다. npm 템플릿 리포지토리를 사용 하여 npm을 통해 부트스트랩 프로젝트를 빠르게 생성 할 수도 있습니다.

npm install [email protected]
gem install bootstrap -v 5.2.1

자세한 정보와 추가 패키지 관리자는 설치 문서를 읽어보세요 .

CDN을 통해 포함

Bootstrap의 컴파일된 CSS 또는 JS만 포함해야 하는 경우 jsDelivr 을 사용할 수 있습니다 . 간단한 빠른 시작 을 통해 작동 방식을 확인하거나 예제 를 찾아 다음 프로젝트를 시작하세요. Popper와 JS를 별도로 포함하도록 선택할 수도 있습니다 .

<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">

<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>

시작하기 가이드 읽기

공식 가이드를 통해 새 프로젝트에 Bootstrap의 소스 파일을 포함하는 방법을 알아보세요.

웹팩 소포 비테

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 옵션 에 대해 자세히 알아보십시오 .

필요한 항목 포함

Bootstrap을 사용자 정의하는 가장 쉬운 방법은 필요한 CSS만 포함합니다.

// 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/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";

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 맵으로 구축했습니다. 유틸리티 클래스를 추가, 제거 또는 수정하는 것이 그 어느 때보다 쉬워졌습니다. 유틸리티를 반응형으로 만들고 의사 클래스 변형을 추가하고 사용자 지정 이름을 지정합니다.

유틸리티에 대해 자세히 알아보기 맞춤형 구성 요소 살펴보기

구성 요소를 빠르게 사용자 정의
// Create and extend utilities with the Utility API

@import "bootstrap/scss/bootstrap";

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

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

토글 가능한 숨겨진 요소, 모달 및 캔버스 외 메뉴, 팝오버 및 도구 설명 등을 jQuery 없이 쉽게 추가할 수 있습니다. dataBootstrap의 JavaScript는 HTML 우선이므로 플러그인을 추가하는 것이 속성 을 추가하는 것만큼 쉽습니다 . 더 많은 제어가 필요하십니까? 프로그래밍 방식으로 개별 플러그인을 포함합니다.

부트스트랩 자바스크립트에 대해 자세히 알아보기

데이터 속성 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><a class="dropdown-item" href="#">Dropdown item</a></li>
    <li><a class="dropdown-item" href="#">Dropdown item</a></li>
    <li><a class="dropdown-item" href="#">Dropdown item</a></li>
  </ul>
</div>

JavaScript를 모듈 로 사용하고 프로그래밍 방식 API를 사용하는 방법에 대해 자세히 알아보세요 .

포괄적인 플러그인 세트

부트스트랩은 모든 프로젝트에 놓을 수 있는 12가지 플러그인을 제공합니다. 한 번에 모두 넣거나 필요한 것만 선택하십시오.

알리다

사용자에게 경고 메시지를 표시하거나 숨깁니다.

단추

버튼의 활성 상태를 프로그래밍 방식으로 제어합니다.

회전 목마

크로스페이드 지원을 포함하여 모든 페이지에 슬라이드쇼를 추가합니다.

무너지다

콘텐츠 영역을 확장 및 축소하거나 아코디언을 만듭니다.

쓰러지 다

링크, 작업, 양식 등의 메뉴를 만듭니다.

모달

프로젝트에 유연하고 반응이 빠른 대화 상자를 추가합니다.

오프캔버스

숨겨진 사이드바를 만들고 모든 페이지로 전환합니다.

팝오버

사용자 지정 오버레이를 만듭니다. Popper를 기반으로 합니다.

스크롤스파이

페이지 스크롤을 기반으로 활성 탐색 링크를 자동으로 업데이트합니다.

탭

Bootstrap 탐색 구성 요소가 콘텐츠를 토글하도록 허용합니다.

토스트

방문자에게 알림을 표시하거나 숨깁니다.

툴팁

브라우저 툴팁을 사용자 정의 툴팁으로 교체합니다. Popper를 기반으로 합니다.

부트스트랩 아이콘으로 개인화

Bootstrap Icons 는 1,500개 이상의 글리프가 있는 오픈 소스 SVG 아이콘 라이브러리이며 릴리스마다 더 추가됩니다. Bootstrap 자체를 사용하든 사용하지 않든 모든 프로젝트에서 작동하도록 설계되었습니다. SVG 또는 아이콘 글꼴로 사용하십시오. 두 옵션 모두 CSS를 통해 벡터 크기 조정 및 손쉬운 사용자 정의를 제공합니다.

부트스트랩 아이콘 가져오기

부트스트랩 아이콘

공식 부트스트랩 테마로 나만의 것으로 만드세요

공식 부트스트랩 테마 마켓플레이스 에서 제공하는 프리미엄 테마로 부트스트랩을 한 단계 업그레이드하십시오 . 테마는 새로운 구성 요소와 플러그인, 문서 및 강력한 빌드 도구가 풍부한 자체 확장 프레임워크로 Bootstrap에 구축됩니다.

부트스트랩 테마 찾아보기

부트스트랩 테마