부트스트랩 그리드 시스템

이번 장에서는 부트스트랩의 그리드 시스템에 대해 설명하겠습니다.

Bootstrap은 화면이나 뷰포트 크기가 증가함에 따라 자동으로 최대 12개의 열로 분할되는 반응형 모바일 우선 유동 그리드 시스템을 제공합니다.

그리드란 무엇인가요?

Wikipedia에서 발췌:

그래픽 디자인에서 그리드는 콘텐츠를 구성하는 데 사용되는 일련의 교차 직선(세로, 가로)으로 구성된 구조(보통 2차원)입니다. 인쇄 디자인의 디자인 레이아웃과 내용 구조에 널리 사용됩니다. 웹 디자인에서는 일관된 레이아웃을 빠르게 생성하고 HTML과 CSS를 효과적으로 사용하기 위한 방법입니다.

간단히 말해서 웹 디자인의 그리드는 콘텐츠를 구성하고, 웹 사이트를 쉽게 탐색할 수 있도록 하며, 사용자 측의 부하를 줄이는 데 사용됩니다.

부트스트랩 그리드 시스템이란 무엇입니까?

공식 Bootstrap 문서의 그리드 시스템 설명:

Bootstrap에는 장치 또는 뷰포트 크기가 12열 증가함에 따라 적절하게 확장되는 반응형 모바일 우선 유동 그리드 시스템이 포함되어 있습니다. 여기에는 단순한 레이아웃 옵션을 위한 사전 정의된 클래스뿐만 아니라 보다 의미 있는 레이아웃을 생성하기 위한 강력한 믹스인 클래스도 포함되어 있습니다.

위의 내용을 이해해 봅시다. Bootstrap 3은 Bootstrap 코드가 작은 화면 장치(예: 모바일, 태블릿)의 구성 요소와 그리드로 시작한 다음 대형 화면 장치(예: 노트북, 데스크톱)의 구성 요소와 그리드로 확장된다는 점에서 모바일 우선입니다.

모바일 우선 전략

Content

무엇이 가장 중요한지 결정하세요.

Layout

폭이 작은 디자인을 우선시하세요.
기본 CSS는 모바일 우선이며 미디어 쿼리는 태블릿 및 데스크톱 컴퓨터용입니다.

점진적 향상

화면 크기가 커짐에 따라 요소를 추가하세요.

반응형 그리드 시스템 화면이나 뷰포트 크기가 커지면 시스템이 자동으로 최대 12개의 열로 나눕니다.

486

부트스트랩 그리드 시스템 작동 방식

그리드 시스템은 콘텐츠가 포함된 일련의 행과 열을 통해 페이지 레이아웃을 만듭니다. Bootstrap 그리드 시스템의 작동 방식은 다음과 같습니다.

행은 적절한 정렬과 패딩을 얻으려면 .container 클래스 내부에 배치되어야 합니다.
행을 사용하여 열의 수평 그룹을 만듭니다.
콘텐츠는 열 내에 배치되어야 하며 열만 행의 직접 하위 요소가 될 수 있습니다.
미리 정의된 그리드 클래스(예: .row 및 .col-xs-4)를 사용하여 그리드 레이아웃을 빠르게 생성할 수 있습니다. 더 의미 있는 레이아웃을 위해 LESS 믹스인 클래스를 사용할 수 있습니다.
열은 패딩을 사용하여 열 내용 사이에 간격을 만듭니다. 패딩은 첫 번째 열과 마지막 열의 행 오프셋을 나타내는 .rows의 여백의 음수를 취하여 얻습니다.
그리드 시스템은 확장하려는 12개의 사용 가능한 열을 지정하여 생성됩니다. 예를 들어 3개의 동일한 열을 만들려면 3개의 .col-xs-4을 사용하세요.

미디어 쿼리

미디어 쿼리는 매우 멋진 "조건부 CSS 규칙"입니다. 특정 특정 조건에 따라 일부 CSS에서만 작동합니다. 해당 조건이 충족되면 해당 스타일이 적용됩니다.

Bootstrap의 미디어 쿼리를 사용하면 뷰포트 크기에 따라 콘텐츠를 이동하고 표시하고 숨길 수 있습니다. 다음 미디어 쿼리는 LESS 파일에서 Bootstrap 그리드 시스템의 주요 중단점 임계값을 생성하는 데 사용됩니다.

/* 超小设备（手机，小于 768px） */
/* Bootstrap 中默认情况下没有媒体查询 */

/* 小型设备（平板电脑，768px 起） */
@media (min-width: @screen-sm-min) { ... }

/* 中型设备（台式电脑，992px 起） */
@media (min-width: @screen-md-min) { ... }

/* 大型设备（大台式电脑，1200px 起） */
@media (min-width: @screen-lg-min) { ... }

또한 CSS의 영향을 더 작은 범위의 화면 크기로 제한하기 위해 때때로 미디어 쿼리 코드에 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) { ... }

미디어 쿼리는 두 부분으로 구성됩니다. 먼저 장치 사양과 크기 규칙입니다. 위의 경우 다음 규칙이 설정됩니다.

다음 코드 줄을 살펴보겠습니다.

@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }

min-width를 사용하는 모든 기기의 경우: @screen-sm-min, 화면 너비가 더 작은 경우 @screen-sm-max보다 일부 처리가 완료됩니다.

그리드 옵션

아래 표에는 Bootstrap 그리드 시스템이 여러 장치에서 작동하는 방식이 요약되어 있습니다.

	초소형 장치 모바일(<768px)	소형 장치 태블릿(≥768px)	중형 장치 데스크톱(≥992px)	대형 장치 데스크톱(≥1200px)
그리드 동작	항상 가로	접기로 시작, 중단점 위 가로	접기로 시작, 중단점 위 가로	접기로 시작, 중단점 위 가로
최대 컨테이너 너비	없음(자동)	750px	970px	1170px
클래스 접두사	.col-xs-	.col-sm-	.col-md-	.col-lg -
번호 열 수 및	12	12	12	12
최대 열 너비	Auto	60px	78px	95px
간격 너비	30px (각 측면의 15px 한 열)	30px (한 열의 각 측면에 15px)	30px (한 열의 각 측면에 15px)	30px (한 열의 각 측면에 각각 15px)
중첩 가능	예	예	예	예
Offset	예	예	예	예
열 정렬	예	예	예	예

기본 그리드 구조

부트스트랩 그리드의 기본 구조는 다음과 같습니다.

<div class="container">
   <div class="row">
      <div class="col-*-*"></div>
      <div class="col-*-*"></div>      
   </div>
   <div class="row">...</div>
</div>
<div class="container">....

몇 가지 간단한 그리드 예를 살펴보겠습니다.

예: 스택 레벨
예: 중형 및 대형 장치
예: 휴대폰, 태블릿, 데스크탑

반응형 열 재설정

다음 예에는 4개의 그리드가 포함되어 있지만 소형 장치에서 탐색할 때 그리드 디스플레이의 위치를 확인할 수 없습니다.

이 문제를 해결하려면 다음 예와 같이 .clearfix 클래스 및 반응 유틸리티를 사용할 수 있습니다.

Instance

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8"> 
   <title>Bootstrap 实例 - 响应式的列重置</title>
   <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">  
   <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
   <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
   <div class="row" >
      <div class="col-xs-6 col-sm-3" 
         style="background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
      </div>
      <div class="col-xs-6 col-sm-3" 
         style="background-color: #dedef8;box-shadow: 
         inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut 
            enim ad minim veniam, quis nostrud exercitation ullamco laboris 
            nisi ut aliquip ex ea commodo consequat.
         </p>
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
            eiusmod tempor incididunt ut. 
         </p>
      </div>

      <div class="clearfix visible-xs"></div>

      <div class="col-xs-6 col-sm-3" 
         style="background-color: #dedef8;
         box-shadow:inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco 
            laboris nisi ut aliquip ex ea commodo consequat. 
         </p>
      </div>
      <div class="col-xs-6 col-sm-3" 
         style="background-color: #dedef8;box-shadow: 
         inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut 
            enim ad minim 
         </p>
      </div>
   </div>
</div>

</body>
</html>

인스턴스 실행»

"인스턴스 실행" 버튼을 클릭합니다. 확인 온라인 예를 들어보세요.

브라우저에서 창 크기를 조정하여 변경 사항을 보거나 휴대폰에서 효과를 확인하세요.

오프셋 열

오프셋은 보다 전문적인 레이아웃에 유용한 기능입니다. 열을 위한 더 많은 공간을 만드는 데 사용할 수 있습니다. 예를 들어 .col-xs=* 클래스는 오프셋을 지원하지 않지만 빈 셀을 사용하여 간단히 효과를 얻을 수 있습니다.

대형 화면 디스플레이에서 오프셋을 사용하려면 .col-md-offset-* 클래스를 사용하세요. 이러한 클래스는 열의 왼쪽 여백을 * 열만큼 늘립니다. 여기서 * 범위는 1에서 11까지입니다.

아래 예에는 <div class="col-md-6">..</div>가 있으며 .col-md-offset-3 클래스를 사용하여 이 div를 중앙에 배치합니다.

Instance

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8"> 
   <title>Bootstrap 实例 - 偏移列</title>
   <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">  
   <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
   <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">

   <h1>Hello, world!</h1>

   <div class="row" >
      <div class="col-xs-6 col-md-offset-3" 
         style="background-color: #dedef8;box-shadow: 
         inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing 
            elit.
         </p>
      </div>

   </div>
</div>

</body>
</html>

인스턴스 실행»

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요.

중첩 열

콘텐츠 내에 기본 그리드를 중첩하려면 새 그리드를 추가하세요. .row 기존 .col-md-* 열 내부에 .col-md-* 열 세트를 추가합니다. 중첩된 행에는 12개를 초과할 수 없는 열 집합이 포함되어야 합니다. 실제로 12개 열을 모두 차지해야 한다는 요구 사항은 없습니다.

아래 예에서는 레이아웃에 2개의 열이 있고, 두 번째 열은 4개의 상자로 구성된 2개의 행으로 나누어져 있습니다.

Instance

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8"> 
   <title>Bootstrap 实例 - 嵌套列</title>
   <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">  
   <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
   <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">

   <h1>Hello, world!</h1>

   <div class="row">

      <div class="col-md-3" style="background-color: #dedef8;box-shadow: 
         inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         <h4>第一列</h4>
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
      </div>

      <div class="col-md-9" style="background-color: #dedef8;box-shadow: 
         inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         <h4>第二列 - 分为四个盒子</h4>
         <div class="row">
            <div class="col-md-6" style="background-color: #B18904;
               box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
               <p>Consectetur art party Tonx culpa semiotics. Pinterest 
                  assumenda minim organic quis.
               </p>
            </div>
            <div class="col-md-6" style="background-color: #B18904;
               box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
               <p> sed do eiusmod tempor incididunt ut labore et dolore magna 
                  aliqua. Ut enim ad minim veniam, quis nostrud exercitation 
                  ullamco laboris nisi ut aliquip ex ea commodo consequat.
               </p>
            </div>
         </div>

         <div class="row">
            <div class="col-md-6" style="background-color: #B18904;
               box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
               <p>quis nostrud exercitation ullamco laboris nisi ut 
                  aliquip ex ea commodo consequat.
               </p>
            </div>   
            <div class="col-md-6" style="background-color: #B18904;
               box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
                  sed do eiusmod tempor incididunt ut labore et dolore magna 
                  aliqua. Ut enim ad minim.</p>
            </div>
         </div>

      </div>

   </div>

</div>

</body>
</html>

인스턴스 실행 »

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요.

열 정렬

부트스트랩 그리드 시스템의 또 다른 뛰어난 기능은 쉽게 한 순서로 열을 작성한 다음 다른 순서로 열을 표시할 수 있다는 것입니다.

.col-md-push-* 및 .col-md-pull-* 클래스를 사용하여 내장 그리드 열의 순서를 쉽게 변경할 수 있습니다. 여기서 * 범위는 1부터 11까지입니다. .

아래 예에는 좁은 왼쪽 열이 사이드바 역할을 하는 2열 레이아웃이 있습니다. .col-md-push-* 및 .col-md-pull-* 클래스를 사용하여 이 두 열의 순서를 바꿉니다.

Instance

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Bootstrap 实例 - 列排序</title>
	<link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">  
	<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
	<script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">

   <h1>Hello, world!</h1>

   <div class="row">
      <p>排序前</p>
      <div class="col-md-4" style="background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         我在左边
      </div>
      <div class="col-md-8" style="background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         我在右边
      </div>
   </div><br>
   <div class="row">
      <p>排序后</p>
      <div class="col-md-4 col-md-push-8" 
         style="background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, 
         inset -1px 1px 1px #444;">
         我在左边
      </div>
      <div class="col-md-8 col-md-pull-4" 
         style="background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, 
         inset -1px 1px 1px #444;">
         我在右边
      </div>
   </div>

</div>

</body>
</html>

인스턴스 실행 »

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요

← 부트스트랩 CSS 개요

부트스트랩 타이포그래피 →

제출하다