주요 콘텐츠로 건너뛰기
Bootstrap 4의 최신 버전이 있습니다!

프레임워크의 일부를 사용하는 것부터 사용자 지정 구성 요소 및 레이아웃에 이르기까지 다양한 예제를 사용하여 프로젝트를 빠르게 시작하십시오.

소스 코드 다운로드

사용자 정의 구성 요소

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

앨범 스크린샷
앨범

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

가격 스크린샷
가격

카드로 구축되고 맞춤 머리글과 바닥글이 있는 가격 책정 페이지의 예.

결제 스크린샷
점검

양식 구성 요소와 해당 유효성 검사 기능을 보여주는 사용자 정의 체크아웃 양식.

제품 스크린샷
제품

광범위한 그리드 및 이미지 작업이 포함된 린 제품 중심 마케팅 페이지입니다.

표지 스크린샷
씌우다

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

캐러셀 스크린샷
회전 목마

탐색 모음과 캐러셀을 맞춤설정한 다음 몇 가지 새로운 구성요소를 추가합니다.

블로그 스크린샷
블로그

헤더, 탐색, 추천 콘텐츠가 있는 블로그 템플릿과 같은 잡지.

대시보드 스크린샷
계기반

고정 사이드바 및 탐색 모음이 있는 기본 관리자 대시보드 셸입니다.

로그인 스크린샷
로그인

간단한 로그인 양식을 위한 사용자 정의 양식 레이아웃 및 디자인.

고정 바닥글 스크린샷
고정 바닥글

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

고정 바닥글 탐색 모음 스크린샷
고정 바닥글 탐색 모음

고정된 상단 탐색 모음을 사용하여 뷰포트 하단에 바닥글을 연결합니다.

뼈대

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

스타터 템플릿 스크린샷
스타터 템플릿

기본 사항 외에는 아무것도 없습니다: 컴파일된 CSS 및 JavaScript.

그리드 스크린샷
그리드

4개 계층, 중첩 등이 모두 포함된 그리드 레이아웃의 여러 예.

점보트론 스크린샷
점보트론

탐색 모음과 몇 가지 기본 그리드 열을 사용하여 점보트론 주위에 구축합니다.

기본 navbar 구성 요소를 사용하여 이동, 배치 및 확장하는 방법을 보여줍니다.

Navbars 스크린샷
내비바

탐색 모음에 대한 모든 반응형 및 컨테이너 옵션의 데모.

Navbar 정적 스크린샷
Navbar 정적

일부 추가 콘텐츠와 함께 정적 상단 탐색 모음의 단일 탐색 모음 예.

Navbar 고정 스크린샷
Navbar 고정

일부 추가 콘텐츠와 함께 고정된 상단 탐색 모음이 있는 단일 탐색 모음 예.

Navbar 하단 스크린샷
Navbar 하단

일부 추가 콘텐츠와 함께 하단 탐색 모음이 있는 단일 탐색 모음 예제.

실험

미래 친화적 기능 또는 기술에 중점을 둔 예입니다.

플로팅 라벨 스크린샷
플로팅 라벨

입력 위에 플로팅 레이블이 있는 아름답고 단순한 양식.

오프캔버스 스크린샷
오프캔버스

확장 가능한 탐색 모음을 슬라이딩 오프 캔버스 메뉴로 바꾸십시오.