[Bootstrap] 부트스트랩 정리

부트스트랩 기본 원리

부트 스트랩 사용 예시

• div class="d-inline p-2 bg-primary text-white"
• div class="box bg-warning d-sm-none d-md-block"
• div class="box bg-success d-md-non d-xl-block"

 

- Layout

d-{value}

 

• 'd-'는 display를 의미

values

none

inline

inline-block

block

grid

table

table-cell

tabel-row

flex

inline-flex

 

- Breakpoint

중단점	클래스	너비
X-Small		< 576 px
Small	sm	>= 576 px
Medium	md	>= 768 px
Large	lg	>= 992 px
X-Large	xl	>= 1200 px
XX-Large	xxl	>= 1400 px

 

- Spacing

class="{property}{sides}-{size}"

 

property

m	margin
p	padding

 

sides

단축어	설명
t	top
b	bottom
s	start, 왼쪽 정렬에서 left, 오른쪽 정렬에서 right
e	end, 왼쪽 정렬에서 right, 오른쪽 정렬에서 left
x	x축 방향, left, right 양 쪽
y	y축 방향, top, bottom 양 쪽
공백	top, bottom, left, right 모두, 4면

 

size

0	0 px	0 rem
1	4 px	0.25 rem
2	8 px	0.5 rem
3	16 px	1 rem
4	24 px	1.5 rem
5	48 px	3 rem
auto	자동설정

• .mx-auto : 수평 중앙 정렬 = 가운데 정렬 

 

- Color

primary	파랑
secondary	회색
success	초록
info	하늘
warning	노랑
danger	빨강
light	흰색
dark	어두운 색