bootstrap3버전 px단위, float
bootstrap4버전 rem단위, display:flex
Grid Classes , 규격(크기) => 모두 12칸으로 구성됨
거터 폭 30px (col 양쪽에 15px씩 padding 포함)
| 클래스명 | 기기종류 | |
|---|---|---|
| .col | 매우 작은 기기 모바일폰 (576미만) | width: auto |
| .col-sm | 작은 기기 모바일폰 | width: 540px |
| .col-md | 중간 기기 태블릿 (min-width: 768px) | width: 720px |
| .col-lg | 큰 기기 데스크탑 (min-width: 992px) | width: 960px |
| .col-xl | 아주 큰 기기 데스크탑 (min-width: 1200px) | width: 1140px |
가로 크기
- 고정폭 .container (최대 1140픽셀)
- 100%크기 .container-fluid(수평 15px씩 padding)
body 기본설정
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 16px;
line-height: 1.5;
color: #333;
background-color: #fff;
}
h태그의 크기
h1 Bootstrap heading (2.5rem = 40px)
h2 Bootstrap heading (2rem = 32px)
h3 Bootstrap heading (1.75rem = 28px)
h4 Bootstrap heading (1.5rem = 24px)
h5 Bootstrap heading (1.25rem = 20px)
h6 Bootstrap heading (1rem = 16px)
p태그
margin-top: 0;margin-bottom: 1rem(기본적으로 16px);로 기본적으로 초기화되어있다.
텍스트 정렬
.text-left <==> text-align:left
.text-center <==> text-align:center
.text-right <==> text-align:right
.text-justify <==> text-align:justify
여백(size 0~5 까지 가능함)
m- margin
p- padding
t- top
b- bottom
l- left
r- right
x- left / right
y- top / bottom
mx-auto <==> margin-left: auto;margin-right: auto;
0:0rem
1:0.25rem
2:0.5rem
3:1rem
4:1.5rem
5:3rem
