[bootstrap] Bootstrap 이용하기 01 (170404)

Bootstrap 이용하기 

• bootstrap 이용하기

- CDN 사용하기

1. 홈페이지에 접속한다. (http://getbootstrap.com/)

2. http://getbootstrap.com/getting-started/ 에서 CDN을 복사한다.

3. head영역에 링크를 붙인다.

4. 사용한다!

** 출력 결과 **

- 다운로드 받아 사용하기

- 다운받은 css, fonts, js를 폴더 안에 넣는다.

- 로딩한다.

- 사용한다!

• Bootstrap GridSystem 이용하기

- 12칸으로 나눈 것을 기준으로 하여 일정하게 배열할 수 있도록 하는 시스템

- col-xs, col-sm, col-md, col-lg를 이용한다.

＃grid system을 유용하게 사용하기 위해 768px, 992px, 1200px은 외워두면 편하다.

• GridSystem 적용해보기

** 출력 결과 **

• container-fluid 와 container의 차이점

** 출력 결과 **

 - 768px보다 클 때

 : 유동형 컨테이너는 전체를 꽉 채운 모습이다.

 : 특정 영역에서는 크기가  768px이상 커지지 않는다.

- 768px보다 작을 때

• offset 이용하기

- offset은 col-xs-offset-1 의 형식으로 사용한다.

- xs크기로 1만큼 왼쪽에 공백을 준다.

** 출력 결과 **

• push / pull 이용하기
  

- push는 col-sm-push-3 형태로 사용한다.

- sm의 크기로 3칸을 오른쪽으로 민다.

- pull은 col-sm-pull-9 형태로 사용한다.

- sm의 크기로 9칸을 왼쪽으로 당긴다.

** 출력 결과 **