English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
이 장에서는 Bootstrap의 그리드 시스템을 설명할 것입니다.
Bootstrap은 반응형, 모바일 장치 우선의 스트리밍 그리드 시스템을 제공하며, 스크린이나 뷰포트(viewport) 크기 증가에 따라 자동으로 최대12열.
위키백과에서 가져옴:
플랫폼 디자인에서, 그리드는 콘텐츠를 조직하는 일련의 교차하는 선(수직선, 수평선)으로 구성된 구조(보통 이차원적입니다)입니다. 그것은 인쇄 디자인에서의 디자인 레이아웃과 콘텐츠 구조에 널리 사용됩니다. 웹 디자인에서, 그리드는 일관된 레이아웃을 빠르게 생성하고 HTML 및 CSS를 효율적으로 사용하는 방법으로 사용됩니다.
간단히 말해, 웹 디자인에서 그리드는 콘텐츠를 조직하여 웹사이트를 쉽게 탐색할 수 있게 하고, 사용자 측의 부하를 줄이는 데 사용됩니다.
Bootstrap 공식 문서에서 그리드 시스템에 대한 설명:
Bootstrap은 반응형, 모바일 장치 우선, 불변한 그리드 시스템을 포함하고 있으며, 장치나 뷰포트 크기 증가에 따라 적절하게 확장됩니다. 12 열. 그것은 간단한 레이아웃 옵션을 포함한 사전 정의된 클래스와 더 많은 의미 있는 레이아웃을 생성하기 위해 강력한 혼합 클래스를 포함하고 있습니다.
다음 문장을 이해해 보겠습니다. Bootstrap 3 모바일 장치 우선입니다. 이 의미에서, Bootstrap 코드는 작은 스크린 장치(예: 모바일 장치, 태블릿 컴퓨터)에서 시작하여 대형 스크린 장치(예: 노트북, 데스크톱 컴퓨터)에 있는 컴포넌트와 그리드로 확장됩니다.
콘텐츠
가장 중요한 것을 결정합니다.
레이아웃
우선 작은 너비를 설계합니다.
기본 CSS는 모바일 장치를 우선시하며, 미디어 쿼리는 태블릿 컴퓨터, 데스크톱 컴퓨터를 대상으로 합니다.
진보적 강화
스크린 크기가 증가함에 따라 요소가 추가됩니다.
반응형 그리드 시스템은 스크린이나 뷰포트(viewport) 크기가 증가함에 따라 자동으로 최대12열.
| 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 |
| 4 | 4 | 4 | |||||||||
| 4 | 8 | ||||||||||
| 6 | 6 | ||||||||||
| 12 | |||||||||||
그리드 시스템은 내용을 포함한 행과 열의 시리즈를 통해 페이지 레이아웃을 생성합니다. 아래는 Bootstrap 그리드 시스템이 어떻게 작동하는지에 대한 설명입니다:
행은 반드시 다음에 배치되어야 합니다 .container class 내에 배치하여 적절한 정렬(alignment)과 내부 마진(padding)을 얻을 수 있습니다.
행을 사용하여 열의 수평 그룹을 만듭니다.
콘텐츠는 열 내에 배치되어야 하며, 행의 직접 자식이 될 수 있는 것은 열 만입니다.
предопределенные классы сетки, например .row 와 .col-xs-4를 사용하여 빠르게 그리드 레이아웃을 생성할 수 있습니다. LESS 혼합 클래스는 더 많은 의미 있는 레이아웃을 위해 사용됩니다.
열은 내부 마진(padding)을 통해 열 내용 간의 간격을 만듭니다. 이 내부 마진은 다음과 같이 설정됩니다. .rows 위의 밖쪽 마진(margin)이 음수로 설정되면, 첫 번째 열과 마지막 열의 행 이동이 표시됩니다.
그리드 시스템은 십이 개의 사용 가능한 열을 지정하여 생성됩니다. 예를 들어, 세 개의 같은 열을 만들기 위해 세 개의 .col-xs-4를 사용하여
미디어 쿼리는 매우 독특한 '조건부 CSS 규칙'입니다. 이는 특정 조건을 충족하는 몇 가지 CSS에만 적용됩니다. 만약 그 조건이 충족되면, 해당 스타일을 적용합니다.
Bootstrap의 미디어 쿼리는 뷰포트 크기에 따라 콘텐츠를 이동하고 표시하고 숨기는 것을 허용합니다. 아래 미디어 쿼리는 LESS 파일에서 사용되어 Bootstrap 그리드 시스템의 중요한 분절 점 경계값을 생성합니다.
/* extra small 장치（휴대폰，소형） 768px) */ /* Bootstrap에서는 기본적으로 미디어 쿼리가 없습니다 */ /* 소형 장치（태블릿 컴퓨터）768px 부터) */ @media (min-width: @screen-sm-@media (min /* 중형 장치（데스크톱 컴퓨터）992px 부터) */ @media (min-width: @screen-md-@media (min /* 대형 장치（대형 데스크톱 컴퓨터）1200px 부터) */ @media (min-width: @screen-lg-@media (min
매뉴얼 쿼리 코드에서는 때로는 포함될 수 있습니다 max-width로, CSS의 영향을 더 작은 스크린 크기 범위에 제한합니다
@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-@media (min미디어 쿼리는 두 부분으로 구성되며, 먼저 장치 규격이 있고, 그 다음에 크기 규칙이 있습니다. 위의 예제에서는 다음과 같은 규칙을 설정했습니다:
아래 코드 행을 보겠습니다:
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }모든 min-width: @screen-sm-min 의 장치, 만약 스크린의 너비가 @screen-sm-max이 경우 일부 처리가 수행됩니다
아래 표는 Bootstrap 그리드 시스템이 여러 장치에서 어떻게 작동하는지 요약합니다:
| extra small 장치 휴대폰（<768px) | 소형 장치 태블릿 컴퓨터（≥768px) | 중형 장치 데스크톱 컴퓨터（≥992px) | 대형 장치 데스크톱 컴퓨터（≥1200px) | |
|---|---|---|---|---|
| 그리드 행동 | 항상 수평입니다 | 축소 시작하여, 절단점 이상은 수평입니다 | 축소 시작하여, 절단점 이상은 수평입니다 | 축소 시작하여, 절단점 이상은 수평입니다 |
| 최대 컨테이너 너비 | None (auto) | 750px | 970px | 1170px |
| Class 접두사 | .col-xs- | .col-sm- | .col-md- | .col-lg- |
| 열 수와 | 12 | 12 | 12 | 12 |
| 최대 열 너비 | 자동 | 60px | 78px | 95px |
| 간격 너비 | 30px （각 열의 모든 측면에 대해) 15px) | 30px （각 열의 모든 측면에 대해) 15px) | 30px （각 열의 모든 측면에 대해) 15px) | 30px （각 열의 모든 측면에 대해) 15px) |
| 포함 가능 | Yes | Yes | Yes | Yes |
| 이동량 | Yes | Yes | Yes | Yes |
| 열 정렬 | Yes | Yes | Yes | Yes |
아래는 Bootstrap 그리드의 기본 구조입니다:
<div> <div> <div></div> <div></div> </div> <div>.../div> </div> <div>....
다음은 몇 가지 간단한 그리드 예제를 보여줍니다:
아래 예제는4개의 그리드가 있습니다만, 작은 장치에서 브라우징할 때 그리드가 표시되는 위치를 결정할 수 없습니다
이 문제를 해결하기 위해 사용할 수 있습니다 .clearfix class와 响应式实用工具如下面示例所示：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap 예제 - 响应式的列重置</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/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>让我们一起坐在这里，祝福我们的爱人。</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>我为你祈祷，愿你永远幸福我的工作和工作都是偶然的。我只有很小的勇气，我要去实验室实习这是一种后果。 </p> <p>让我们一起坐下来，祝福我们的朋友，祝福他们。 </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>只要有一点点时间，就可以完成实习。 </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>辛苦和痛苦，充满活力，所以，具有一些伟大的长寿模。到这些年来。 </p> </div> </div> </div> </body> </html>테스트해보세요 ‹/›
브라우저에서 창 크기를 조절하여 변화를 확인하거나, 스마트폰에서 효과를 확인하세요。
좌측 내보내기는 더 프로페셔널한 레이아웃에 유용한 기능입니다. 그들은 열에 더 많은 공간을 제공하는 데 사용될 수 있습니다. 예를 들어,.col-xs-* 클래스는 내보내기를 지원하지 않지만, 간단히 빈 셀을 사용하여 이 효과를 구현할 수 있습니다.
대형 스크린 디스플레이에서 사용할 때는 .col-md-offset-* 클래스는 열의 좌측 외곽 간격(margin)을 증가시킵니다 * 열, 그 중 * 클래스의 내장 그리드 열 순서는, 그 중 1 에서 11를 사용하여
아래의 예제에서, <div>..</div>우리는 .col-md-offset-3 class를 사용하여 이 div를 정중앙에 배치합니다。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap 예제 - 좌측 내보내기 열</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h1>Hello, world!</h1> <div class="row"> <div class="col-md-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열）。
아래의 예제에서, 레이아웃은 두 개의 열을 가지고 있으며, 두 번째 열은 두 행으로 네 개의 상자로 나뉘어 있습니다.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap 예제 - 들여쓰기 열</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/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</p> 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,</p> sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim.</p> </div> </div> </div> </div> </div> </body> </html>테스트해보세요 ‹/›
결과는 다음과 같습니다:
Bootstrap 그리드 시스템의 또 다른 완벽한 특성은, 컬럼을 하나의 순서로 작성하고 다른 순서로 표시할 수 있다는 것입니다.
를 가진 컬럼을 쉽게 변경할 수 있습니다. .col-md-push-* 와 .col-md-pull-* 를 가지고 있으며, * 클래스의 내장 그리드 열 순서는, 그 중 1 에서 11를 사용하여
아래의 예제에서 우리는 두 열 레이아웃을 가지고 있습니다. 왼쪽 열은 매우 좁으며,サイ드바로 사용됩니다. 우리는 .col-md-push-* 와 .col-md-pull-* 클래스를 사용하여 이 두 열의 순서를 교환할 수 있습니다。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Bootstrap 예제 - 열 정렬</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/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>테스트해보세요 ‹/›
결과는 다음과 같습니다: