부트스트랩 Grid 이해하기….2

앞서 말씀드린 xs,sm.md,lg 와 같은 클래스 옵션은

적절한 정렬과 패딩을 위해서 fixed-width(.container)와 full-width(.container-fluid) 안에 행이 위치 해야 하며,

.container = 고정 폭 그리드 레이아웃,.container-fluid = 유동 폭 그리드 레이아웃 을 사용 합니다.
.col-xs- 는 주로 너비가 크지 않는 모바일폰에 적용되며,최대너비는 정의되지 않은 auto로 설정되어 있고 최대 컬럼너비 또한 auto 입니다.
.col-sm- 는 테블릿 에 적용되며 최대너비는 750px 이며, 최대 컬럼 너비는 60px 입니다.
.col-md- 는 주로 중간기기(데스크탑)에 사용되며 최대너비는 970px이며, 최대 컬럼 너비는 78px 입니다.
.col-lg- 는 큰 기기 (화면이 큰 데스크탑)에 사용되며 최대너비는 1170px 이며, 최대 컬럼 너비는 95px 입니다.

그리드 클래스는 여러장치에 따라 포괄적으로 제공되며, .col-lg-는 넓은 화면에 사용되는 레이아웃에 적용하고 되도록이면  .col-md-*를 이용해서 평균적인 데스크탑의 레이아웃에 맞추어 사용하는것이 바람직 합니다.

그럼 예제 사이트를 통해서 고정 폭 그리드 레이아웃 과 유동 폭 그리드 레이아웃이 어떻게 틀린지 알아 보도록 하겠습니다.

아래 링크는 고정 폭 그리드를 이용한 레이아웃 예제 입니다.
http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_gs_container&stacked=h

container
아래 링크는 유동 폭 그리드를 이용한 레이아웃 예제 입니다.
http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_gs_container-fluid&stacked=h

container-fluid
위의 두링크를 비교하시면 클래스에 따라 최대너비 크기에 다르게 반응 하는것을 확인 할 수 있을겁니다.

.container 는 min-width:992px 이하에서 .container-fluid 는 min-width:1200px 이하에서 각기 달리 반응 합니다.

또한, 그리드 시스템에서는 주요 분기점을 만들기 위해 아래와 같은 미디어 쿼리를 사용 하며, max-width 를 포함하여 사용 하기도 합니다.
미디어 쿼리 사용의 예 :

/* 매우 작은 기기들 (모바일폰, 768px 보다 작은) */
/* 부트스트랩에서 이것은 기본이므로 미디어쿼리가 없습니다. */

/* 작은 기기들 (태블릿, 768px 이상) */
@media (min-width: @screen-sm-min) { … }

/* 중간 기기들 (데스크탑, 992px 이상) */
@media (min-width: @screen-md-min) { … }

/* 큰 기기들 (큰 데스크탑, 1200px 이상) */
@media (min-width: @screen-lg-min) { … }

max-width를 포함하여 사용한 예 :

@media (max-width: @screen-xs-max) { … }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { … }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { … }
@media (min-width: @screen-lg-min) { … }

다음 시간에는 Typography(타이포 그라피)에 대해서 살펴 보겠습니다.​

참고 사이트 : http://www.w3schools.com/bootstrap

nanoomi / 2015년 6월 24일 / 미분류

답글 남기기

Your email address will not be published / Required fields are marked *