bootstrap은 클래스 이름을 통해 css를 적용 한다.
기본적인 레이아웃을 나누는 방법을 소개한다.
가로 길이 (width)를 기준으로 나눠 지며
가로 길이 100%는 12이다.
또한 해상도에 따른 레이아웃을 디자인 할 수 있는데
col-xs-*, col-sm-*, col-lg-* 등의 클래스 명으로 각기 다른 device에 맞는 레이아웃을 설정 할 수 있다.
클래스명을 col-lg-*로 줄 경우 가로길이1200px 이상일 경우의 레이아웃을 의미하며 desktop용 레이아웃을 나눌때 주로 사용된다.
col-xs-*의 경우 가로길이 768px 이하의 경우의 레이아웃을 의미하며 mobile 화면에 최적화된 레이아웃을 나눌때 주고 사용된다.
col-xs-*
|
col-sm-*
| col-md-*
| col-lg-*
|
width: 768px 이하 | 768px 이상 992px 이하 | 992px 이상 1200px 이하 | 1200px 이상 |
*부분은 1부터 12까지의 정수로 줄 수 있으며 12 = width:100% 를 의미하고 4일 경우 width:25%를 의미한다.
col-*-12 |
col-*-6 |
col-*-6 |
col-*-2 |
col-*-2
|
col-*-2
|
col-*-2
|
col-*-2
|
col-*-2
|
위와 같이 레이아웃이 나눠진다.
화면에 꽉차는 레이아웃을 사용하고 싶은 경우
클래스명을 container-fluid로 주게 되면 브라우저에 꽉차는 레이아웃을 설정할 수 있다.
그냥 container를 줄 경우 가로 길이에 따라 최대 1170, 970, 750, 100% 순서로 4가지 길이의 가운데 정렬된 레이아웃을 사용 할 수 있다.
ex)
|
class="container" (1170px ~ 750px , 모바일의 경우 100% 가변) |
|
mobile과 desktop 동시에 레이아웃 설정
클래스명으로 여러이름을 줘서 모바일과 데스크탑의 레아아웃을 다르게 구현 할 수 있다.
<div class="col-xs-12 col-lg-8"></div>
<div class="col-xs-12 col-lg-4"></div>
위와 같이 입력하면
<desktop 화면>
col-xs-12 col-lg-8 |
col-xs-12 col-lg-4 |
<mobile 화면>
col-xs-12 col-lg-8
|
col-xs-12 col-lg-4
|
빨간색 클래스가 적용되어 레이아웃이 동적으로 변하게 된다.
col-*-* 클래스는 주는 경우
뒤의 숫자의 합이 12보다 작은 경우 float:left를 준것과 같이
옆으로 붙게 되며
12가 넘어갈 경우 아래로 붙게 된다.
col-lg-9와 col-lg-5를 주게 되면 14이므로
| col-lg-9 | col-lg-5 |
의 레이아웃 형태가 아닌
| (width:100%) |
|col-lg-9 |
|col-lg-5 |
의 형태의 레이아웃이 된다.
Offset이라는 것을 줄 수도 있는데
<div class="col-md=2"></div>
<div class="col-md-4 col-md-offset-4"></div> 와 같은
형식으로 주게 되면
| col-md-2 | col-md-offset-4 | col-md-4 |
위와같이 두 div 사이를 col-offset에서 준 만큼 사이를 벌려 레이아웃을 설정 할 수 있다.
div 안에 div를 선언 하면서 레이아웃을 나눌 수도 있다.
<div class="col-md-12">
<div class="col-md-6">
</div>
<div class="col-md-6">
</div>
</div>
위와같이 하면
col-md-12
| col-md-6 | col-md-6 |
|
위 그림과 같은 레이아웃이 가능하다
단 col 안에 col로 들어가면서 레이아웃을 나눌경우 자동으로 양쪽에 15px의 padding이 들어가서 꽉차지 않고 여유공간이 생김
