그리드시스템_bootstrap

- 부트스트랩으로 반응형 웹을 구현해야 할 경우 그리드 시스템을 활용하여 구현한다. 
- .container 혹은 .container-fulid 클래스가 필요 (적절한 정렬과 패딩) 
- 그리드시스템에서 1행을 표현할때 row라는 클래스를 쓴다. 
- 그리드시스템에서 디바이스의 크기를 지정할때 lg, md, sm, xs로 지정이 가능하다. 
  (예 : col-lg-*, col-md-*, col-sm-*, col-xs-*)
- 그리드를 표현 하고자 할때 col-크기-값 형태로 표현 해야한다. 
- 1행 당 12열이다.

- 예) 기입된 그리드 클래스가 md만 적힐 경우 lg 포함 적용

- 예) 기입된 그리드 클래스가 md만 적힐 경우 md 사이즈 이하 일 경우 12열로 자동 맞춤

- 1행을 표현하기위해 row 클래스를 선언한다.

디바이스크기 별로 정의된 그리드시스템의 값

- .col-lg-* : 1200px 이상시 반응하는 클래스 
- .col-md-* : 992px 이상시 반응하는 클래스 
- .col-sm-* : 768px 이상시 반응하는 클래스 
- .col-xs-* : 768px 미만 반응하는 클래스 
- 그리드시스템의 클래스들은 중첩 적용이 가능하며 각 클래스들의 크기에 맞을때 반응을 하게 된다. 

 

컨테이너 요소

<div class="container">
	<div class="alert alert-danger">alert</div>
</div>
<div class="container-fluid">
	<div class="alert alert-danger">alert</div>
</div>

 

그리드 시스템 적용

<div class="container-fluid">
	<div class="row">
		<div class="col-md-4">
			<div class="alert alert-danger">alert</div>			
		</div>
		<div class="col-md-4">
			<div class="alert alert-danger">alert</div>
		</div>
		<div class="col-md-4">
			<div class="alert alert-danger">alert</div>
		</div>
	</div>
</div>

<div class="container-fluid">
	<div class="row">
		<div class="col-md-3 col-sm-6">
			<div class="alert alert-danger">alert</div>			
		</div>
		<div class="col-md-3 col-sm-6">
			<div class="alert alert-danger">alert</div>
		</div>
		<div class="col-md-3 col-sm-6">
			<div class="alert alert-danger">alert</div>
		</div>
		<div class="col-md-3 col-sm-6">
			<div class="alert alert-danger">alert</div>
		</div>
	</div>
</div>

 

offset

- 적용된 대상 왼쪽에 기입된 숫자만큼 빈 공간 할당

<div class="row">
  <div class="col-sm-8 col-sm-offset-11">
    <div class="alert alert-danger">alert</div>
  </div>
</div>

 

반응형 유틸

- 디바이스 크기에 따라 보이기, 감추기를 할 수 있다.
- visible-*-* (보이기), hidden-*(감추기)
- 예) visible-sm-block visible xs-block -> sm, xs에서만 보인다.

- 예) hidden-xs, hidden-sm -> lg, md 사이즈에서만 보인다.

<div class="container-fluid">
	<div class="row">
		<div class="col-md-3 col-sm-6">
			<div class="alert alert-danger">alert</div>
		</div>
		<div class="col-md-3 col-sm-6">
			<div class="alert alert-danger">alert</div>
		</div>
		<div class="col-md-3 hidden-xs hidden-sm">
			<div class="alert alert-danger">alert</div>
		</div>
		<div class="col-md-3 hidden-xs hidden-sm">
			<div class="alert alert-danger">alert</div>
		</div>
	</div>
</div>