Bootstrap All Functions #3

Bootstrap All Functions #3

Grid System Introduction.

기본은 940px 에 12columns.

responsive 로 724px ~ 1170px 사이로 조정된다.

percent 로 계산하는 fluid grid system 도 있다.

grid 에 관련된 css 는 row 와 spanx (x = 1~12) 가 있다.

css 에서 아래와 같은 문법은 span 으로 시작하는 모든 class 에 css 적용

[class*="span"]{

   ...

}

기본 grid 에 responsiveness 주기

<meta name="viewport" conent="width=device-width, initial-scale=1.0">

<link href="bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet">

2가지 환경에서 reponsiveness 가 발동한다.

1200px 이상일 때,

768px~979px 일때.

Offsetting Columns : default grid

offsetx ( x = 1~12 ) 로 x column 만큼 여백을 줄 수 있다.

Nesting Columns : default grid

column 안에 새롭게 row 가 들어갈 수 있다.

이 때 새로운 row 안의 column 들의 합은 outer column 의 span 값을 넘어서면 안된다.

Conclusion

- twitter bootstap 의 기본 grid system 은 940px, 12column 이다.

- gird에서 row 는 class=row 로 생성할 수 있고, column 은 class=spanx 로 지정할 수 있다. x 의 sum 은 12를 넘어서면 안된다.

- responsive css 를 더하면 default grid 에 반응성을 줄 수 있다.

- class=offsetx 를 이용하여 특정 column 에 대한 여백을 줄 수 있다. offsetx 와 spany 의 x + y 값이 11을 넘어서면 안된다.

- colums 은 nested 될 수 있다. nested 된 column 들의 합은 outer column 의 값을 넘어서면 안된다.

- offset 은 netsted column 에서도 작동한다.

12 column, 12columns, 940, 940px, Bootstrap All Functions #3, bootstrap-responsive.min.css, class*=, class=row, class=span, column, Conclusion, css, fluid grid system, GRID, Grid System Introduction., nest, nested, Nesting Columns : default grid, offset, Offsetting Columns : default grid, offsetx, responsive, responsiveness, Row, span, SPANX, 기본 grid 에 responsiveness 주기