English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Bootstrap 그리드 시스템은 반응형 웹 레이아웃을 생성하는 가장 빠르고 간단한 방법입니다.
Bootstrap는 스크린 또는 뷰포트(viewport) 크기가 증가함에 따라 자동으로 최대 12 열
또한, 필요에 따라 열 수를 정의할 수 있습니다:
| 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 |
| 4 | 4 | 4 | |||||||||
| 4 | 8 | ||||||||||
| 6 | 6 | ||||||||||
| 12 | |||||||||||
Bootstrap 4 의 그리드 시스템은 반응적이며, 열은 스크린 크기에 따라 자동으로 재정렬됩니다.
Bootstrap 4包含预定义的网格类，可为不同类型的设备（例如手机，平板电脑，笔记本电脑和台式机等）快速制作网格布局。例如，您可以使用这些.col-*클래스는 세로 모드의 초소형 장치에 대해 사용됩니다., 이와 같이, 이러한 .col-sm-*클래스는 작은 스크린 장치(예: 가로 모드의 휴대폰)에 대해 사용됩니다., .col-md-*중형 스크린 장치(예: 태블릿 컴퓨터), .col-lg-*대형 장치(예: 데스크톱)과 .col-xl-*超大台式机屏幕的类创建网格列。
Bootstrap 4 그리드 시스템은 다음과 같습니다: 5 클래스:
.col- 모든 장치에 대해
.col-sm- 平板 - 화면 너비가 또는 더 크면 576px
.col-md- 桌面显示器 - 화면 너비가 또는 더 크면 768px)
.col-lg- 大桌面显示器 - 화면 너비가 또는 더 크면 992px)
.col-xl- 超大桌面显示器 - 화면 너비가 또는 더 크면 1200px)
Bootstrap4 그리드 시스템 규칙:
그리드의 각 행은 .container(고정 너비) 또는 .container-fluid(전체 화면 너비) 클래스의 컨테이너 내에서, 이렇게 하면 일부 외부 마argins과 내부 마argins을 자동으로 설정할 수 있습니다.
행을 사용하여 수평 열 그룹을 생성합니다.
콘텐츠는 열에 배치되어야하며, 열만이 행의 직접 자식 노드일 수 있습니다.
예를 들어, .row과 .col과 같은 предопределенные классы-sm-4 그리드 레이아웃을 빠르게 만들 수 있습니다.
열을 통해 열 내용 간의 간격을 생성합니다. 이 간격은 .rows 클래스의 음 수좌표로 설정되어 첫 번째 행과 마지막 열에 이동됩니다.
그리드 열은 지정된 열을 통해 생성됩니다. 12 열을 통해 생성합니다예를 들어, 세 개의 같은 열을 설정하려면 세 개의 .col을 사용해야 합니다.-sm-4 로 설정합니다.
Bootstrap 3 및 Bootstrap 4 가장 큰 차이점은 Bootstrap입니다. 4 이제 flexbox(활성 상자)을 사용하여 float 대신 사용합니다. Flexbox의 큰 장점은, 너비를 지정하지 않은 그리드 열이 자동으로 설정되는 것입니다.동일 너비 및 동일 높이 열 。 Flexbox에 대한 더 많은 정보를 원하시면 우리의 CSS Flexbox 강의를 읽어보세요。
아래 표는 Bootstrap 그리드 시스템이 다양한 장치에서 어떻게 작동하는지 요약합니다:
| 超小设备 <576px | 平板 ≥576px | 桌面显示器 ≥768px | 大桌面显示器 ≥992px | 超大桌面显示器 ≥1200px | |
|---|---|---|---|---|---|
| 컨테이너 최대 너비 | None (auto) | 540px | 720px | 960px | 1140px |
| 클래스 접두어 | .col- | .col-sm- | .col-md- | .col-lg- | .col-xl- |
| 열 수와 | 12 | ||||
| 공간 너비 | 30px （한 열의 각 측에 각각 15px) | ||||
| 상속 가능 | 네 | ||||
| 열 정렬 | 네 | ||||
다음 클래스는 함께 사용하여 더 유연한 페이지 레이아웃을 생성할 수 있습니다.
다음 코드는 Bootstrap의 4 그리드의 기본 구조:
<!-- 첫 번째 예제: 열 너비 및 다른 장치에서의 표시 방식을 제어 --> <div class="row"> <div class="col-*-*></div> </div> <div class="row"> <div class="col-*-*></div> <div class="col-*-*></div> <div class="col-*-*></div> </div> <!-- 두 번째 예제: 또는 Bootstrap가 자동으로 레이아웃을 처리 --> <div class="row"> <div class="col"></div> <div class="col"></div> <div class="col"></div> </div>
두 번째 예제: 또는 Bootstrap가 자동으로 레이아웃을 처리첫 번째 예제: 한 행을 생성합니다( <divclass="row">.col-*-* )를 설정합니다). 그런 다음, 필요한 열을 추가합니다(*) )을 나타내며, 반응하는 장치를 나타냅니다: sm, md, lg 또는 xl, 두 번째 별표 (*)은 숫자를 나타내며, 동일 행의 숫자 합이 12。
두 번째 예제: 각 열에 숫자를 추가하지 않고 col 에 숫자를 추가하여 bootstrap가 자동으로 레이아웃을 처리하고, 동일 행의 각 열 너비가 동일하게됩니다: 두 개 "col" 각각 50%의 너비. 세 개 "col"각각 33.33%의 너비, 네 개 "col"각각 25%의 너비를 나열합니다. 마찬가지로, 다음과 같이 사용할 수 있습니다 .col-sm|md|lg|xl 열의 반응 규칙을 설정할 수 있습니다.
그런 다음 예제를 확인할 수 있습니다.
<!DOCTYPE html> <html> <head> <title>Bootstrap 示例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <div class="container-fluid"> <h1안녕하세요 세상!/h1> <p>세 개의 동일 너비 열을 생성하세요! class="row"의 div에 새로운 class="col"div를 추가하면 네 개의 동일 너비 열이 표시됩니다.</p> <div class="row"> <div class="col" style="background-color:lavender;">.col</div> <div class="col" style="background-color:orange;">.col</div> <div class="col" style="background-color:lavender;">.col</div> </div> </div> </body> </html>테스트 보기 ‹/›
아래의 예제는平板 및 더 큰 화면에서 동일한 너비의 반응형 열을 생성하는 방법을 보여줍니다. 모바일 장치에서는, 즉 화면 너비가 576px 시, 네 개의 열이 상하로 쌓여 정렬됩니다:
<!DOCTYPE html> <html> <head> <title>Bootstrap 示例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <div class="container-fluid"> <h1안녕하세요 세상!/h1> <p>브라우저 크기를 변경하여 효과를 확인하세요。</p> <p>모바일 장치에서는, 즉 화면 너비가 576px 일 때, 네 열은 상하로 스택으로 정렬됩니다。</p> <div class="row"> <div class="col-sm-3" style="background-color:lavender;">.col-sm-3</div> <div class="col-sm-3" style="background-color:lavenderblush;">.col-sm-3</div> <div class="col-sm-3" style="background-color:lavender;">.col-sm-3</div> <div class="col-sm-3" style="background-color:lavenderblush;">.col-sm-3</div> </div> </div> </body> </html>테스트 보기 ‹/›
아래의 예제는平板 및 더 큰 화면에서 불균형 너비의 반응형 열을 생성하는 방법을 보여줍니다. 모바일 장치에서는, 즉 화면 너비가 576px 시, 두 개의 열이 상하로 쌓여 정렬됩니다:
<!DOCTYPE html> <html> <head> <title>Bootstrap 示例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <div class="container-fluid"> <h1안녕하세요 세상!/h1> <p>브라우저 크기를 변경하여 효과를 확인하세요。</p> <p>모바일 장치에서는, 즉 스크린 너비가 576px 일 때, 네 열은 상하로 스택으로 정렬됩니다。</p> <div class="row"> <div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div> <div class="col-sm-8" style="background-color:lavenderblush;">.col-sm-8</div> </div> </div> </body> </html>테스트 보기 ‹/›
<p>아래 예제는 데스크톱 장치의 디스플레이에서 두 열의 너비가 각각 다음과 같습니다： 50%， 태블릿 단말에서는 왼쪽의 너비는 25%， 오른쪽의 너비는 75%, 모바일 전화기 등 소형 장치에서는 스택으로 표시됩니다。
<!DOCTYPE html> <html> <head> <title>Bootstrap 示例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <div class="container-fluid"> <h1>태블릿과 데스크톱의 그리드 레이아웃/h1> <p>아래 예제는 데스크톱 장치의 디스플레이에서 두 열의 너비가 각각 다음과 같습니다： 50%， 태블릿 단말에서는 왼쪽의 너비는 25%， 오른쪽의 너비는 75%, 모바일 전화기 등 소형 장치에서는 스택으로 표시됩니다。 </p> <p>브라우저 창 크기를 변경하여 효과를 확인하세요。</p> <div class="container-fluid"> <div class="row"> <div class="col-sm-3 col-md-6 bg-success"> w3codebox </div> <div class="col-sm-9 col-md-6 bg-warning"> 기본 강의 웹사이트 </div> </div> </div> </div> </body> </html>테스트 보기 ‹/›
아래 예제는 태블릿, 데스크톱, 대형 데스크톱 디스플레이, 초대형 데스크톱 디스플레이의 너비 비율이 각각 다음과 같습니다：25%/75%、50%/50%、33.33%/66.67%、16.67/83.33%, 모바일 전화기 등 소형 장치에서는 스택으로 표시됩니다。
<!DOCTYPE html> <html> <head> <title>Bootstrap 示例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <div class="container-fluid"> <h1>태블릿, 데스크톱, 대형 데스크톱 디스플레이, 초대형 데스크톱 디스플레이/h1> <p>아래 예제는 태블릿, 데스크톱, 대형 데스크톱 디스플레이, 초대형 데스크톱 디스플레이의 너비 비율이 각각 다음과 같습니다：25%/75%、50%/50%、33.33%/66.67%、16.67/83.33%, 모바일 전화기 등 소형 장치에서는 스택으로 표시됩니다。</p> <p>브라우저 창 크기를 변경하여 효과를 확인하세요。</p> <div class="container-fluid"> <div class="row"> <div class="col-sm-3 col-md-6 col-lg-4 col-xl-2 bg-success"> w3codebox </div> <div class="col-sm-9 col-md-6 col-lg-8 col-xl-10 bg-warning"> 기본 강의 웹사이트 </div> </div> </div> </div> </body> </html>테스트 보기 ‹/›
오프셋 열을 offset-*-* 클래스를 설정합니다. 첫 번째 스타(*)는 * )는 sm, md, lg, xl를 의미하며, 두 번째 스타(*)는 * )는 1 부터 11 의 숫자를 사용하십시오.
대형 스크린 디스플레이에서 사용하려면 .offset-md-* 클래스는 한 열의 왼쪽 외경을 늘립니다. * 열에서 시작합니다. * 범위는 1 부터 11。
예를 들어: .offset-md-4 col-md-4 왼쪽으로 네 열을 이동했습니다。
<!DOCTYPE html> <html> <head> <title>Bootstrap 示例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <div class="container-fluid"> <h1>오프셋 열</h1> <p>.offset-md-4 col-md-4 왼쪽으로 네 열의 열을 이동했습니다.</p> <div class="container-fluid"> <div class="row"> <div class="col-md-4 bg-success">.col-md-4</div> <div class="col-md-4 offset-md-4 bg-warning">.col-md-4 .offset-md-4</div> </div> <div class="row"> <div class="col-md-3 offset-md-3 bg-success">.col-md-3 .offset-md-3</div> <div class="col-md-3 offset-md-3 bg-warning">.col-md-3 .offset-md-3</div> </div> <div class="row"> <div class="col-md-6 offset-md-3 bg-success">.col-md-6 .offset-md-3</div> </div> </div> </div> </body> </html>테스트 보기 ‹/›
새로운 Bootstrap를 이미 알고 계셨기를 바랍니다. 4그리드 시스템의 기본 지식을 알고 계셨기를 바랍니다. 다음 장에서는 이 flexbox 그리드 시스템을 사용하여 기본 웹 레이아웃을 만드는 방법을 배울 것입니다.