[BS] Grid System

부트스트랩은 기기와 뷰 포트 크키가 증가하면서 12개의 열이 적절하게 확대되는 반응형, 모바일 우선 그리드 시스템입니다.

 

규칙들이 있는데

1. 행은 반드시 적절한 정렬과 패딩을 위해서  .container 나 .container-fluid 안에 위치해야 합니다.

2. 열들의 수평 그룹을 만드는데 행을 이용

3. 컨탠츠는 열 안에 위치해야 한다 그래야 열들이 행의 바로 아래에 올 수 있습니다.

4.  열은 padding으로 사이 간격을 둡니다. 행 내에서 첫 열과 마지막열을 위해 .row내에 음수 마진으로 offset이 되어있습니다.

5. 만약에 한 행에 12열 보다 많이 배치된다면 남은 열들은 하나의 유닛으로 새로운 라인 속으로 감싸집니다.

 

<그리드 옵션>

	매우 작은 기기(모바일폰)	작은 기기(테블릿)	중간 기기(데스크탑)	큰 기기
그리드 적용	항상	분기점보다 크면 적용
콘테이너 너비	없음(auto)	750px	970px	1170px
클래스 접두사	.col-xs	.col-sm	.col-md	.col-lg
컬럼 수	12
컬럼 너비	Auto	~62px	~81px	~97px
중첩, offset, 순서	YES

 

 

<예제 1>

그리드 클래스인 .col-md-* 싱글 세트를 사용하여 모바일 기기와 태블릿 기기에서 쌓이기 시작하는 기본 그리드 시스템을 만들 수 있다. 

.row 안에 그리드 컬럼을 놓았다.

<div class="row">
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
  <div class="col-md-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</div>
</div>

 

<예제 2>

가장 바깥 쪽에 .container을 .container-fluid 으로 바꿈으로서, 고정폭 그리드 레이아웃을 최대폭 레이아웃으로 전환해라

<div class="container-fluid">
  <div class="row">
    ...
  </div>
</div>

 

 

 

<예제 3>

작은 기기들에서 컬럼들이 간단히 쌓이려면 .col-xs-*와 .col-md-* 을 추가하여 작은 기기와 중간기기 그리드 클래스를 사용해라

 

<!-- 모바일에서 컬럼들이 하나는 꽉찬너비로, 다른 하나는 절반너비로 쌓이게 합니다 -->
<div class="row">
  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- 컬럼들은 모바일에서 50% 너비로 시작하고 데스크탑에서는 33.3% 너비가 됩니다 -->
<div class="row">
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- 컬럼들은 모바일과 데스크탑에서 항상 50% 너비가 됩니다 -->
<div class="row">
  <div class="col-xs-6">.col-xs-6</div>
  <div class="col-xs-6">.col-xs-6</div>
</div>

 

<예제 4>

열 감싸기

만약에 한 행에 12열 보다 많이 배치된다면, 남은 열은 하나의 유닛처럼 새로운 라인에 감싸지게 된다.

<div class="row">
  <div class="col-xs-9">.col-xs-9</div>
  <div class="col-xs-4">.col-xs-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
  <div class="col-xs-6">.col-xs-6<br>Subsequent columns continue along the new line.</div>
</div>

 

 

 

 

 

<예제 5> 

반응형 컬럼 초기화

사용가능한 그리드 들과 특정 본기점에서, 컬럼들이 하나가 다른 컬럼보다 긴 경우 명확하게 클리어 되지 않을 수 있습니다. 그걸 고치기 위해서는 .clearfix와 responsive utillity classes의 조합을 사용하면 됩니다.

<div class="row">
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>

  <!-- 필요한 뷰포트에만 clearfix 를 추가하세요 -->
  <div class="clearfix visible-xs-block"></div>

  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
</div>

반응형 분기점에서 컬럼초기화와 더불어 offset, push, pull 초기화가 필요할 수 있다.

 

<div class="row">
  <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
  <div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div>
</div>

<div class="row">
  <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
  <div class="col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lg-offset-0">.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0</div>
</div>

 

 

 

 

<예제 6>

컬럼 offset 하기

.col-md-offset-* 을 사용하여 컬럼을 우측으로 옮긴다. 그러면 * 컬럼만큼 한 컬럼의 좌측 마진을 증가하게 한다. 

예를 들어 .col-md-offset-4는 .col-md-4을 4컬럼만큼 이동시킵니다.

<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row">
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div>
<div class="row">
  <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>

 

 

 

 

 

 

 

<예제 7>

컬럼 중첩하기

기본 그리드로 존재하는 .col-md-* 컬럼 내에 새로운 .row와 .col-md-* 컬럼 세트를 추가

중첩된 행은 합쳐서 12가 되는 하나의 컬럼세트를 포함해야 한다.

 

<div class="row">
  <div class="col-sm-9">
    Level 1: .col-sm-9
    <div class="row">
      <div class="col-xs-8 col-sm-6">
        Level 2: .col-xs-8 .col-sm-6
      </div>
      <div class="col-xs-4 col-sm-6">
        Level 2: .col-xs-4 .col-sm-6
      </div>
    </div>
  </div>
</div>

 

 

<예제 7>

컬럼의 순서 정하기

 

.col-md-push-* 와 .col-md-pull-* 수식클래스들로 우리의 그리드 컬럼들의 순서를 쉽게 변경하자

<div class="row">
  <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
  <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>

 

 

 

 

 

 

 

 

 

 

 

 

 

<예제 8> LESS 믹스인과 변수

빠른 레이아웃을 위한 미리 만들어진 그리드 클래스들과 더불어 나만의 간단한 레이아웃 생서을 위하여 LESS 변수와 믹스인을 포함하고 있다.

 

 

변수

변수들은 컬럼들의 갯수, 간격의 너비, 미디어 쿼리 분기점을 결정한다.

@grid-columns:              12;
@grid-gutter-width:         30px;
@grid-float-breakpoint:     768px;

 

 

 

믹스인

믹스인은 그리드 변수와 함께 개개의 그리드 컬럼들을 위한 시맨틱 CSS를 생성하는데 사용된다.

// 일련의 컬럼을 위해 wrapper 를 생성합니다.
.make-row(@gutter: @grid-gutter-width) {
  // Then clear the floated columns
  .clearfix();

  @media (min-width: @screen-sm-min) {
    margin-left:  (@gutter / -2);
    margin-right: (@gutter / -2);
  }

  // 컬럼들의 콘텐츠를 정렬하기 위해 중첩된 행들에 음수 마진을 줍니다
  .row {
    margin-left:  (@gutter / -2);
    margin-right: (@gutter / -2);
  }
}

// 매우 작은 기기용 컬럼을 생성합니다
.make-xs-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // 컬럼이 비어있을때 없어지는걸 방지합니다
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // 컬럼수를 기반으로 가능한 너비를 계산합니다
  @media (min-width: @grid-float-breakpoint) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// 작은 기기용 컬럼을 생성합니다
.make-sm-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // 컬럼수를 기반으로 가능한 너비를 계산합니다
  @media (min-width: @screen-sm-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// 작은 기기용 컬럼 오프셋을 생성합니다
.make-sm-column-offset(@columns) {
  @media (min-width: @screen-sm-min) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-sm-column-push(@columns) {
  @media (min-width: @screen-sm-min) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-sm-column-pull(@columns) {
  @media (min-width: @screen-sm-min) {
    right: percentage((@columns / @grid-columns));
  }
}

// 중간 기기용 컬럼을 생성합니다
.make-md-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @screen-md-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// 중간 기기용 컬럼 오프셋을 생성합니다
.make-md-column-offset(@columns) {
  @media (min-width: @screen-md-min) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-md-column-push(@columns) {
  @media (min-width: @screen-md-min) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-md-column-pull(@columns) {
  @media (min-width: @screen-md-min) {
    right: percentage((@columns / @grid-columns));
  }
}

// 큰 기기용 컬럼을 생성합니다
.make-lg-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @screen-lg-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// 큰 기기용 컬럼 오프셋을 생성합니다
.make-lg-column-offset(@columns) {
  @media (min-width: @screen-lg-min) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-lg-column-push(@columns) {
  @media (min-width: @screen-lg-min) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-lg-column-pull(@columns) {
  @media (min-width: @screen-lg-min) {
    right: percentage((@columns / @grid-columns));
  }
}

 

 

사용법 예제

사이간격이 있는 두 컬럼 레이아웃을 만드는 기본 설정의 사용 예

.wrapper {
  .make-row();
}
.content-main {
  .make-lg-column(8);
}
.content-secondary {
  .make-lg-column(3);
  .make-lg-column-offset(1);
}

<div class="wrapper">
  <div class="content-main">...</div>
  <div class="content-secondary">...</div>
</div>