부트스트랩 그리드의 이해

1.부트 스트랩은 화면을 총 12개컬럼을 나눠서  그리드 클래스로 구성

스팬 1

스팬 1

스팬 1

스팬 1

스팬 1

스팬 1

스팬 1

스팬 1

스팬 1

스팬 1

스팬 1

스팬 1

2.그리드를 구성할때 기기에 따라  클래스 바꿔쓴다

xs (전화 용)

sm (태블릿 용)

md (데스크톱 용)

lg (대형 데스크탑의 경우)

3. 예시

row로 분리한후    칼럼을      - >          [  col-기기에따른 클래스-그리드갯수 ]

<div class="row">
  <div class="col-sm-4">.col-sm-4</div>
  <div class="col-sm-4">.col-sm-4</div>
  <div class="col-sm-4">.col-sm-4</div>
</div>

그리드 옵션

	매우 작은 기기 모바일폰 (<768px)	작은 기기 태블릿 (≥768px)	중간 기기 데스크탑 (≥992px)	큰 기기 데스크탑 (≥1200px)
그리드 적용	항상	분기점보다 크면 적용
콘테이너 너비	없음 (auto)	750px	970px	1170px
클래스 접두사	.col-xs-	.col-sm-	.col-md-	.col-lg-
컬럼 수	12
컬럼 너비	Auto	~62px	~81px	~97px
사이 너비	30px (컬럼의 양쪽에 15px 씩)
중첩	예
오프셋	예
컬럼 순서정하기	예