부트스트랩 : 그리드 시스템

라이브러리/Bootstrap

부트스트랩 : 그리드 시스템

THREE™ 2014. 3. 23. 14:50

bootstrap : Page 1-2 Grid system 부트스트랩 1-2번째 그리드 시스템

부트스트랩은 웹디자인을 쉽게하기 위해 미리 몇가지의 CSS의 클래스 선택자와 정의된 스타일시트, 자바스크립트 플러그인을 모은 강력한 프론트엔드 프레임워크입니다. <부트스트랩 소개와 다운로드 중 참조...>

참고로 이블로그 게시물은 한글부트스트랩3을 참고로 만들어 졌으며 제 블로그 공부용으로 작성한 것입니다.

그리드 시스템 Grid system

부트스트랩은 기기나 뷰포트 크기가 증가함에 따라 12 열이 적절하게 확대되는 반응형, 모바일 우선 유동 그리드 시스템입니다. 그것은 쉬운 레이아웃을 위해 미리 정해진 클래스들 뿐만 아니라 강력한 더 시멘틱한 레이아웃을 생성하기 위한 믹스인 을 포함하고 있습니다.

소개 Introduction

부트 스트랩 그리드 시스템의 작동 방법은 다음과 같습니다. 영어는 당최 무슨 이야기인지 몰라서 제가 알고 있는 또는 생각하는것을 나열하겠습니다.

행(row)는 .container(고정폭), .container-fluid(전체폭) 안에 있어야 합니다.
.row안데 그리드 시스탬이 존재하고 수평이여야 합니다.
.col-xs-4같은 미리 정의된 그리드 클래스를 사용할수 있으며 이하 Less안에 정의할 수도 있습니다.
그냥 정의된 그리드 클래스에서는 padding으로 여백을 줄수도 있습니다.

여기까지 제가 이해한 설명입니다. 나머지는 저도 잘 몰라 여기까지 적었습니다. 나버지는 소스를 보시면 이해가 빠르실것입니다.

미디어 쿼리들 Media queries

부트스트랩은 기본적인 미디어쿼리를 사용하여 사이즈별로 대응을 합니다.

/* 매우 작은 기기들 (모바일폰, 768px 보다 작은) */
/* 부트스트랩에서 이것은 기본이므로 미디어쿼리가 없습니다. */
 
/* 작은 기기들 (태블릿, 768px 이상) */
@media (min-width: @screen-sm-min) { ... }
 
/* 중간 기기들 (데스크탑, 992px 이상) */
@media (min-width: @screen-md-min) { ... }
 
/* 큰 기기들 (큰 데스크탑, 1200px 이상) */
@media (min-width: @screen-lg-min) { ... }

각 기기별로 최소폭과 최대폭을 지정해서 설정할 수 있어서 더 많은 기기들에 대응할수 있습니다.

@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) { ... }

그리드 옵션들 Grid options

부트스트랩은 미리 정의해 놓은 그리드 시스템 예제를 간단한 테이블로 볼수있습니다.

	매우 작은 기기 모바일폰 (<768px)	작은 기기 태블릿 (≥768px)	중간 기기 데스크탑 (≥992px)	큰 기기 데스크탑 (≥1200px)
그리드 적용	항상	분기점보다 크면 적용
container 클래스 최대너비	None (auto)	750px	970px	1170px
클래스 접두사	`.col-xs-`	`.col-sm-`	`.col-md-`	`.col-lg-`
컬럼 수	12
컬럼 최대 너비	Auto	60px	78px	95px
사이 너비	30px (컬럼의 양쪽에 15px 씩)
중첩	예
오프셋	없음	예
컬럼 순서	없음	예

그리드 클래스는 보다 큰장치 또는 작은 장치에 포관적으로 제공 되는것 같습니다. .col-md-*를 사용하면 평균적으로 데스크탑등의 화면에 맞게 구성할수 있습니다. 가급적이면 .col-lg-*은 넓은 화면에 사용하는 것으로 특정 디자인에서 사용할 것을 추천합니다.

예제 Example

예제 : 수평 또는 기본 horizontal

.col-md-1

.col-md-8

.col-md-4

.col-md-6

<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>

예제 : 유동(full-width) Fluid container

.container고정 폭 그리드 레이아웃,.container-fluid유동 폭 그리드 레이아웃

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

예제 : 모바일과 데스크탑 Mobile and desktop

컬럼에 .col-xs-* .col-md-*를 추가하여 매우 작은 기기와 중간 기기 그리드 클래스들을 사용하세요.

.col-xs-12 col-md-8

.col-xs-6 .col-md-4

.col-xs-6

<!-- 모바일에서 컬럼들이 하나는 꽉찬너비로, 다른 하나는 절반너비로 쌓이게 합니다. -->
<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>

예제: 모바일, 태블릿, 데스크탑 Mobile, tablet, desktops

이전 예제를 태블릿 .col-sm-* 클래스들과 함께 좀더 역동적이고 힘찬 레이아웃들로 만들어보자.

.col-xs-12 .col-sm-6 .col-md-8

.col-xs-6 .col-sm-6 .col-md-4

.col-xs-6 .col-sm-4 .col-md-4

<div class="row">
  <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <!-- 부가적으로: 높이가 맞지 않는다면, XS 컬럼을 클리어합니다 -->
  <div class="clearfix visible-xs"></div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>

반응형 컬럼 초기화 Responsive column resets

사용가능한 4등급의 그리드들과 특정 분기점에서, 컬럼들이 하나가 다른 컬럼보다 긴 경우 명확하게 클리어 되지 않을 수 있다. 그걸 고치기 위해서는, .clearfix 와 우리의 반응형 유틸리티 클래스들의 조합을 사용하면 됩니다.

.col-xs-6 .col-sm-3
뷰포트의 크기를 조정하거나, 휴대폰으로 확인하세요.

.col-xs-6 .col-sm-3

<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"></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>

반응형 분기점에서 컬럼을 클리어하는 것과 더불어, 당신은 오프셋을 초기화 할 필요가 있습니다. 오프셋은 (두번째로)작은 그리드 등급에서부터 사용가능하므로, 이러한 초기화는 중간이나 큰 그리드 등급에서만 사용할 수 있습니다.

.col-sm-5 .col-md-6

.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0

.col-sm-6 .col-md-5 .col-lg-6

.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0

<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>

컬럼 오프셋하기 Offsetting columns

.col-md-offset-* 클래스를 사용하여 컬럼을 우측으로 옮기세요. 이 클래스들은 * 컬럼만큼 한 컬럼의 좌측마진을 증가하게 합니다. 예를 들어, .col-md-offset-4 는 .col-md-4 을 4컬럼만큼 이동시킵니다.

.col-md-4

.col-md-4 .col-md-offset-4

.col-md-3 .col-md-offset-3

.col-md-6 .col-md-offset-3

<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>

컬럼 중첩하기 Nesting columns

기본그리드로 콘텐츠를 중첩하려면, 존재하는 .col-md-* 컬럼 내에 새로운 .row 와 .col-md-* 컬럼 세트를 추가하세요. 중첩된 행은 합쳐서 12 가 되는 하나의 컬럼 세트가 됩니다.

Level 1: .col-md-9

Level 2: .col-md-6

<div class="row">
 <div class="col-md-9">     
 Level 1: .col-md-9      
  <div class="row">
   <div class="col-md-6">         
   Level 2: .col-md-6        
   </div>       
   <div class="col-md-6">         
   Level 2: .col-md-6        
   </div>      
  </div>    
 </div>  
</div>

컬럼 순서정하기 Column ordering

.col-md-push-* 와.col-md-pull-* 수식클래스들로 그리드 컬럼들의 순서를 쉽게 변경할수 있습니다.

.col-md-9 .col-md-push-3

.col-md-3 .col-md-pull-9

<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>

LESS 믹스인과 변수들 Less mixins and variables

빠른 레이아웃을 위한 미리 만들어진 그리드 클래스들 와 더불어, 부트스트랩은 당신만의 간단하고 시맨틱한 레이아웃을 빠르게 생성하기 위해 LESS 변수과 믹스인을 포함하고 있습니다.

변수들 Variables

변수들은 컬럼들의 갯수, 간격의 너비, 미디어 쿼리 분기점을 결정합니다. 우리는 위처럼 미리 정의된 그리드 클래스들 뿐만 아니라 아래의 맞춤 믹스인을 위해 사용할 수 있습니다.

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

믹스인 Mixins

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

// Creates a wrapper for a series of columns
.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);
  }

  // Negative margin nested rows out to align the content of columns
  .row {
    margin-left:  (@gutter / -2);
    margin-right: (@gutter / -2);
  }
}

// Generate the extra small columns
.make-xs-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: @grid-float-breakpoint) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the small 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);

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

// Generate the small column offsets
.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));
  }
}

// Generate the medium 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));
  }
}

// Generate the medium column offsets
.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));
  }
}

// Generate the large 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));
  }
}

// Generate the large column offsets
.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));
  }
}

사용법 예제 Example usage

당신만의 맞춤값들로 변수들을 수정하거나, 그냥 기본값들로 사용할 수 있습니다. 한 예로 밑의 사이간격이 있는 두 컬럼 레이아웃을 만드는 기본 설정의 사용예가 있습니다.

.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>

Thanks to

'라이브러리 > Bootstrap' 카테고리의 다른 글

부트스트랩 : 코드, 테이블 (2)	2014.03.29
부트스트랩 : 타이포그래피 (0)	2014.03.26
부트스트랩 : CSS 개요 (0)	2014.03.23
부트스트랩 : 참고사항 (0)	2014.03.21
부트스트랩 : 기본 템플릿과 부가 사항 (2)	2014.03.19

현재글부트스트랩 : 그리드 시스템

The v3