# Bootstrap — 디자인 스타일 가이드
## 기본 정보
- **ID**: bootstrap
- **카테고리**: design-language
- **연도**: 2011
- **제작자**: Twitter
## 설명
세계에서 가장 인기있는 프론트엔드 프레임워크로, 빠르고 반응형인 웹사이트 구축을 위한 도구입니다.
## 역사·배경
2011년 Twitter 내부 도구로 시작. Mark Otto와 Jacob Thornton이 개발. 현재 Bootstrap 5까지 출시되며 꾸준히 진화 중.
## 핵심 원칙
- 모바일 우선
- 일관성
- 접근성
## 주요 특징
- 강력한 그리드 시스템
- 사전 정의된 컴포넌트
- 모바일 우선 설계
- 유틸리티 클래스
- 광범위한 커뮤니티
## 색상 팔레트
- Primary (#0D6EFD): Primary — 기본 버튼·링크
- Secondary (#6C757D): Secondary — 보조 요소
- Success (#198754): 성공 상태
- Danger (#DC3545): 오류·위험 상태
- Warning (#FFC107): 경고 상태
- Info (#0DCAF0): 정보 표시
## 사용 사례
- 빠른 프로토타입 개발
- 관리자 패널
- 정보 중심 웹사이트
- 중소규모 웹 프로젝트
## 추천 프로젝트 유형
- 빠른 프로토타입
- 관리자 패널
- 정보 중심 사이트
- 중소규모 프로젝트
## 장점
- 가장 많은 레퍼런스·커뮤니티
- 12컬럼 그리드로 레이아웃 빠르게 구성
- 사전 정의된 컴포넌트로 개발 속도 향상
- 광범위한 테마 생태계
## 단점·한계
- "Bootstrap 같은 느낌"으로 차별화 어려움
- 커스터마이징이 많을수록 오히려 복잡
- 번들 사이즈가 큰 편
## 실제 사용 제품·서비스
- 수많은 중소기업 웹사이트
- GitHub Pages 사이트
## 접근성
기본 컴포넌트에 aria 속성 내장. 단, 직접 구현 시 별도 접근성 처리 필요.
## 관련 스타일
- [material-design](https://ui.buildersgate.com/styles/material-design)
- [flat-design](https://ui.buildersgate.com/styles/flat-design)
- [card-design](https://ui.buildersgate.com/styles/card-design)
## 디자인 토큰
### 색상
- primary: #7952B3
- secondary: #6C757D
- accent: #0D6EFD
- background: #FFFFFF
- surface: #F8F9FA
- text: #212529
- textSecondary: #6C757D
- border: #DEE2E6
### 헤더
- background: #7952B3
- textColor: #FFFFFF
- accentColor: #0D6EFD
### 타이포그래피
- fontFamily: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Noto Sans KR', sans-serif
- headingWeight: 500
- bodyWeight: 400
- letterSpacing: 0em
### 스페이싱
- unit: 4px
- scale: 1
### 그림자 (Shadows)
- sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075)
- md: 0 0.5rem 1rem rgba(0, 0, 0, 0.15)
- lg: 0 1rem 3rem rgba(0, 0, 0, 0.175)
- xl: 0 2rem 4rem rgba(0, 0, 0, 0.2)
### Border Radius
- none: 0
- sm: 0.2rem
- md: 0.25rem
- lg: 0.3rem
- full: 50rem
### 테두리 (Borders)
- width: 1px
- style: solid
- color: #DEE2E6
### 이펙트
- blur: 0px
- opacity: 1
- transition: all 0.15s ease-in-out
### 애니메이션
- duration: 150ms
- easing: ease-in-out
### 컴포넌트 토큰
- 버튼: shape=rounded / hoverEffect=darken / textTransform=none
- 카드: style=elevated / hoverEffect=lift
- 인풋: style=outlined / focusEffect=ring
- 배지: shape=pill / style=solid
- 아이콘: package=lucide / strokeWidth=2 / defaultSize=20
### 레이아웃
- containerStyle: boxed
- sectionSpacing: normal
### 특수 효과
- glassmorphism: false
- gradientText: false
- animatedBackground: false
- scanlines: false
- noise: false
## API 엔드포인트
- 스타일 상세: https://ui.buildersgate.com/api/styles?id=bootstrap
- 디자인 토큰: https://ui.buildersgate.com/api/themes?id=bootstrap&merged=true
Bootstrap
세계에서 가장 인기있는 프론트엔드 프레임워크로, 빠르고 반응형인 웹사이트 구축을 위한 도구입니다.
2011년 Twitter 내부 도구로 시작. Mark Otto와 Jacob Thornton이 개발. 현재 Bootstrap 5까지 출시되며 꾸준히 진화 중.
색상 팔레트
Primary
#0D6EFD
Primary — 기본 버튼·링크
Secondary
#6C757D
Secondary — 보조 요소
주요 특징
- 강력한 그리드 시스템
- 사전 정의된 컴포넌트
- 모바일 우선 설계
- 유틸리티 클래스
- 광범위한 커뮤니티
장단점
장점
- +가장 많은 레퍼런스·커뮤니티
- +12컬럼 그리드로 레이아웃 빠르게 구성
- +사전 정의된 컴포넌트로 개발 속도 향상
- +광범위한 테마 생태계
단점 / 한계
- −"Bootstrap 같은 느낌"으로 차별화 어려움
- −커스터마이징이 많을수록 오히려 복잡
- −번들 사이즈가 큰 편
적합한 사용처
사용 사례
- 빠른 프로토타입 개발
- 관리자 패널
- 정보 중심 웹사이트
- 중소규모 웹 프로젝트
이런 프로젝트에 추천
빠른 프로토타입관리자 패널정보 중심 사이트중소규모 프로젝트
접근성기본 컴포넌트에 aria 속성 내장. 단, 직접 구현 시 별도 접근성 처리 필요.
실제 사용 예시
수많은 중소기업 웹사이트GitHub Pages 사이트
UI 컴포넌트 예제
이 디자인 스타일의 특징을 반영한 실제 UI 컴포넌트들입니다.
12-Column Grid System
Bootstrap의 강력한 12컬럼 그리드 시스템
.col-1
.col-1
.col-1
.col-1
.col-1
.col-1
.col-1
.col-1
.col-1
.col-1
.col-1
.col-1
Button Styles
다양한 Bootstrap 버튼 스타일
Outline Buttons
테두리만 있는 버튼 스타일
Bootstrap Cards
재사용 가능한 카드 컴포넌트
Card Title
Some quick example text to build on the card title.
Another Card
Card content with a link and action button.
Third Card
Bootstrap cards are flexible containers.
Alert Components
다양한 상태를 나타내는 알림 컴포넌트
Info: This is an informational alert
Success: Operation completed successfully!
Warning: Please review your input
Danger: Something went wrong
Notifications 4DefaultPrimarySuccessDangerWarning