반응형
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칸을 왼쪽으로 당긴다.
** 출력 결과 **
반응형
'WEB기초 > Bootstrap' 카테고리의 다른 글
[bootstrap] Bootstrap 이용하기 06 (170407) (0) | 2017.04.07 |
---|---|
[bootstrap] Bootstrap 이용하기 05 (170406) (0) | 2017.04.06 |
[bootstrap] Bootstrap 이용하기 04 (170406) (0) | 2017.04.06 |
[bootstrap] Bootstrap 이용하기 03 (170405) (0) | 2017.04.05 |
[bootstrap] Bootstrap 이용하기 02 (170405) (0) | 2017.04.05 |
댓글