<bootstrap> bootstrap CSS grid System
1. overview
1) HTML5 doctype
<!DOCTYPE html>
<html lang="ko">
...
</html>
2) Mobile fist : 부트스트랩은 mobile first 프레임 워크이다. 따라서 다음의 viewport meta태그 사용 추천
<meta name="viewport" content="width=device-width, initial-scale=1">
* 이 메타태그로 zoom과 rendering 가능하게 함.
* user-scalable=no 추가시 유저가 zoom 못하고 스크롤만 할 수 있음
*viewport 속성
width: device-width : 기기의 너비에 너비를 맞추겠다
initial-scale : 1 : 처음의 크기는 100%
maximum-scale. minimum-scale : 가장큰 사이즈, 작은사이즈
user-scalable=no : 유저가 크기 바꾸지 못하게 한다.
ex) <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
3) 타이포그래피와 링크의 기본적 스타일
4) 크로스 브라우징은 nomalize.css 사용
5) .container
.container 클래스에 width : 1200px; 저장되어 있음
.container-fluid : 전체너비
★ 2. grid system ★
-bootstrap에는 반응형에 맞는 12컬럼까지 나눌 수 있는 fluid grid system이 있다.
-이것은 미리 정의된 class와 더욱더 semantic한 layout을 위한 mixin을 통해 이루어진다.
1) introduction
- row는적절한 배열과 padding을 위해 .container나 .container-fluid 안에 들어가야 한다.
- column의 수평을 위해 row를 사용한다
- content는 column안에 들어가야 하며, column만이 row의 직계자식이 될 수 있다
- 미리 정의된 .row 나 col-xs-4같은 class는 빠른 레이아웃을 만드는 것을 도와준다. Less mixin은 더욱 semantic한 layout을 만드는 것을 도와준다
- columns은 다른 column과의 사이에 간격 (padding)을 만든다. 첫번째 colum과 마지막 colum은 row의 nagative marign에 의해 상쇄된다.
- negative margin 은 내어쓰기가 되는 이유이다. 이것은 grid column내의 content가 grid가 아닌 콘텐트와 정렬되기 위함이다
- grid column은 12개까지 명시하는 만큼 만들어 진다. ex) 세 개의 column만들기 : .col-md-4
- column이 12가 넘는다면 새로운 행으로 내려가 감싸진다
- grid class는 분기점 크기 보다 크거나 같은 어비의 화면을 가진 기기에 적용된다.
2) media query
768보다 작은기기 (스마트폰)
768보다 큰 기기 (타블렛)
992보다 큰 기기 (보통 테스크탑)
1200px보다 큰 기기( 큰 데스크탑)
3) grid options
ex)
790px 이상의 화면에서
970 미만의 화면에서
ex) container-fluid 로 했을 때
화면 전체 차지
ex) col-md-n 이외의 사이즈를 넣으면 각 사이즈에서 내가 내가 설정한 레이아웃을 볼수 있다.
(col-sm-n을 넣어 768이상의 너비에서의 레이아웃을 설정했다 )
ex) column 수의 합이 12 이상일 때
줄이 바뀌고 row 에 의해 감싸진다
4) Responsive column resets
- 한 column만 내용이 길 경우 : clearfix class와 utility class(해당하는 사이즈의)
↓ clearfix와 utility class 추가 후
5) offsetting column
offset class : left margin을 줘서 오른쪽으로 옮길 수 있다
ex ) col-md-offset-4 는 col-md-4를 오른쪽으로 4 column 옮긴다.
6) Nesting colums (중첩)
: row 안에 새로운 row를 만들어서 사용할 수 있다. 안의 row는 다시 12column을 기본으로 한다.
( level1이 총 9이고 level2는 6+6 = 12임에도 불구하고 길이가 같다.
7) column ordering
.col-md-push-* 과 col-md-pull-*을 이용하여 순서를 바꿀 수 있다.
8) Less mixins and variables ...