그리드 시스템(bootstrap)
부트스트랩에서는 12칼럽을 기본으로 하기 때문에 12칼럼에만 맞춘다면 1칼럼씩 세로로 또는 가로로 나열할 수 있습니다. 그리드시스템을 이용한 레이아웃을 만들 때 .col-이라는 키워드 다음에 화면종류를 나타내는 키워드 그리고 하나의 영역으로 묶을 칼럼개수를 숫자로 표시하여 하나의 클래스 스타일을 만듭니다.
.col- 화면종류- 한영역으로 묶을 칼럼 개수
| 스마트 폰 | 태블릿 | 데스크탑 | 큰화면 |
|---|---|---|---|
| .col-xs- 768px 미만 (x-small) | .col-sm- 768px 이상 ( small ) | .col-md-992px 이상 ( medium ) | .col-lg- 768px 1200px 이상 ( large ) |
< 부트스트랩 사용시 >
위와 같이 바깥부분을 <div class="row">로 묶어주어야 하고, 가장 바깥 부분은 <div class="container">로 묶어주어야 합니다.
- <div class="container">
- <div class="row">
- <div class="col-md-3">col-md-3</div>
</div>
- </div>
- </div>
container의 너비가 특정값으로 고정되어있지 않고 화면너비가 resize되더라도 화면에 가득차도록 하고 싶다면
-container 클래스 스타일 대신 .container-fluid 클래스 스타일을 사용하면 됩니다.