내용으로 건너뛰기

예시

프레임워크의 일부를 사용하는 것부터 사용자 지정 컴포넌트 및 레이아웃에 이르기까지 다양한 예시를 통해 프로젝트를 빠르게 시작하세요.

Starters

Functional examples of using Bootstrap in common JS frameworks like Webpack, Parcel, Vite, and more you can edit in StackBlitz.

CDN starter

Instantly include Bootstrap's compiled CSS and JavaScript via the jsDelivr CDN.

Edit in StackBlitz

Sass & JS

Use npm to import and compile Bootstrap's Sass with Autoprefixer and Stylelint, plus our bundled JavaScript.

Edit in StackBlitz

Sass & ESM JS

Import and compile Bootstrap's Sass with Autoprefixer and Stylelint, and compile our source JavaScript with an ESM shim.

Edit in StackBlitz

Bootstrap color modes

Import and compile Bootstrap's Sass with Stylelint, and the Bootstrap color modes.

Edit in StackBlitz

Bootstrap Icons

Import and compile Bootstrap's Sass with Stylelint, PurgeCSS, and the Bootstrap Icons web font.

Edit in StackBlitz

Parcel

Import and bundle Bootstrap's source Sass and JavaScript via Parcel.

Edit in StackBlitz

React

Import and bundle Bootstrap's source Sass and JavaScript with React, Next.js, and React Bootstrap.

Edit in StackBlitz

Vite

Import and bundle Bootstrap's source Sass and JavaScript with Vite.

Edit in StackBlitz

Vue

Import and bundle Bootstrap's source Sass and JavaScript with Vue and Vite.

Edit in StackBlitz

Webpack

Import and bundle Bootstrap's source Sass and JavaScript with Webpack.

Edit in StackBlitz

스니펫

사용자 지정 CSS 등을 사용하여 기존 컴포넌트 및 유틸리티를 기반으로 하는 사이트 및 앱 구축을 위한 일반적인 패턴입니다.

Headers

브랜드, 내비게이션, 검색 등을 헤더 컴포넌트로 표시합니다.

Heroes

명확한 클릭 유도 버튼 (CTA)을 특징으로 하는 히어로로 홈페이지의 무대를 장식합니다.

Features

마케팅 콘텐츠의 기능, 이점 또는 다른 세부 정보를 설명합니다.

Sidebars

오프캔버스 또는 다중 열 레이아웃에 이상적인 일반적인 내비게이션 패턴입니다.

Footers

크든 작든 멋진 푸터로 모든 페이지를 강력하게 마무리합니다.

Dropdowns

필터, 아이콘, 사용자 정의 스타일 등으로 드롭다운 경험을 향상시킵니다.

List groups

모든 콘텐츠에 대한 유틸리티 및 사용자 정의 스타일로 목록 그룹을 확장합니다.

Modals

기능 둘러보기에서 대화 상자까지 모든 목적에 맞게 모달을 변환합니다.

Badges

Make badges work with custom inner HTML and new looks.

Breadcrumbs

Integrate custom icons and create stepper components.

Buttons

Create custom buttons for just about any use case with utilities.

Jumbotrons

Create modernized versions of the classic Bootstrap component.

사용자 지정 컴포넌트

사람들이 Bootstrap을 빠르게 시작하고 프레임워크에 추가하기 위한 모범 사례를 시연하는 데에 도움이 되는 새로운 컴포넌트 및 템플릿입니다.

Album

사진 갤러리, 포트폴리오 등을 위한 단순한 단일 페이지 템플릿입니다.

Pricing

카드로 만들어지고 맞춤 헤더와 푸터가 있는 가격 페이지 예시입니다.

Checkout

폼 컴포넌트 및 유효성 검사 기능을 보여주는 사용자 정의 결제 페이지 양식입니다.

Product

확장 그리드 및 이미지 작업이 포함된 제품 중심의 깔끔한 마케팅 페이지입니다.

Cover

심플하고 아름다운 홈페이지 제작을 위한 단일 페이지 템플릿입니다.

Carousel

내비바와 캐러셀을 사용자 지정한 다음 몇 가지 새로운 컴포넌트를 추가했습니다.

Blog

헤더, 내비게이션, 추천 콘텐츠가 있는 매거진 형식의 블로그 템플릿입니다.

Dashboard

고정 사이드바 및 내비바가 있는 기본적인 관리자 대시보드 셸입니다.

Sign-in

간단한 로그인 폼을 위한 사용자 정의 폼 레이아웃 및 디자인입니다.

Sticky footer

페이지 내용이 짧은 경우 표시 영역 하단에 바닥글을 첨부합니다.

Sticky footer navbar

고정된 상단 내비바를 사용하여 뷰포트 하단에 바닥글을 첨부합니다.

Jumbotron

유틸리티를 사용하여 Bootstrap 4의 점보트론을 다시 만들고 향상시켰습니다.

프레임워크

Bootstrap에서 제공하는 내장 구성 요소의 사용 구현에 중점을 둔 예시입니다.

Starter template

컴파일된 CSS와 JavaScript가 있는 기본적인 템플릿입니다.

Grid

4단계 계층, 중첩 등이 모두 포함된 다수의 그리드 레이아웃 예시입니다.

Cheatsheet

거의 모든 Bootstrap 컴포넌트가 포함되어 있습니다.

Cheatsheet RTL

거의 모든 Bootstrap 컴포넌트가 포함되어 있습니다. (RTL)

네비바

기본 내비바 컴포넌트를 사용하여 이동, 배치 및 확장하는 방법을 보여줍니다.

Navbars

네비바에 대한 모든 반응형 및 컨테이너 옵션 예시입니다.

Navbars offcanvas

Same as the Navbars example, but with our offcanvas component.

Navbar static

추가 콘텐츠가 있는 정적인 상단 내비바의 단일 내비바 예시입니다.

Navbar fixed

추가 콘텐츠가 있는 상단에 고정된 내비바의 단일 내비바 예시입니다.

Navbar bottom

추가 콘텐츠가 있는 하단에 고정된 내비바의 단일 내비바 예시입니다.

Offcanvas navbar

펼칠 수 있는 내비바를 슬라이딩 오프캔버스 메뉴로 전환합니다 (오프캔버스 컴포넌트를 사용하지 않음).

RTL

수정된 사용자 지정 컴포넌드 예시와 함께 작동하는 Bootstrap의 RTL 버전을 확인해보세요.

RTL 기능은 아직 실험적이며 피드백으로 발전할 것입니다. 무언가를 발견했거나 개선할 점이 있나요?

이슈를 열어주세요.

Album RTL

사진 갤러리, 포트폴리오 등을 위한 단순한 단일 페이지 템플릿입니다.

Checkout RTL

폼 컴포넌트 및 유효성 검사 기능을 보여주는 사용자 정의 결제 페이지 양식입니다.

Carousel RTL

내비바와 캐러셀을 사용자 지정한 다음 몇 가지 새로운 컴포넌트를 추가했습니다.

Blog RTL

헤더, 내비게이션, 추천 콘텐츠가 있는 매거진 형식의 블로그 템플릿입니다.

Dashboard RTL

고정 사이드바 및 내비바가 있는 기본적인 관리자 대시보드 셸입니다.

통합

외부 라이브러리와의 통합 예시입니다.

Masonry

Bootstrap 그리드와 메이슨리 (Masonry) 레이아웃의 기능을 결합합니다.


Bootstrap Themes로 더 나아가기

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

테마 탐색하기
Bootstrap Themes