Bootstrap 그리드 시스템
Bootstrap's 그리드 시스템은 페이지에서 12 열까지 할 수 있습니다.
개별적으로 모든 12 열을 사용하지 않으려면 그룹을 함께 열이 넓은 열을 만들 수 있습니다 :
| 스팬 1 | 스팬 1 | 스팬 1 | 스팬 1 | 스팬 1 | 스팬 1 | 스팬 1 | 스팬 1 | 스팬 1 | 스팬 1 | 스팬 1 | 스팬 1 |
| 스팬 (4) | 스팬 (4) | 스팬 (4) | |||||||||
| 스팬 (4) | 스팬 (8) | ||||||||||
| 스팬 (6) | 스팬 (6) | ||||||||||
| 스팬 (12) | |||||||||||
Bootstrap's 그리드 시스템에 응답하며, 열이 화면의 크기에 따라 재정렬된다 : 그것은 세 개의 열이 구성되어 내용에 잘 볼 수있는 대형 스크린, 그러나 콘텐츠 항목이 적층 된 경우의 작은 스크린에 나을 서로 상단에.
팁 : 행에 대해 최대 12 개의 추가해야하는 그리드 열을 기억하십시오. 그 이상, 열은 상관없이에게 스택됩니다 viewport .
그리드 클래스
Bootstrap 그리드 시스템은 네 개의 클래스가 있습니다 :
- xs (휴대폰 용)
- sm (태블릿)
- md (데스크톱)
- lg (큰 데스크톱)
클래스는 위보다 역동적이고 유연한 레이아웃을 만들 결합 할 수 있습니다.
팁 : 각 클래스가 확장, 그래서 당신은 동일한 폭을 설정하고자하는 경우 xs 와 sm , 당신은 단지 지정해야 xs .
그리드 시스템 규칙
일부 Bootstrap 그리드 시스템의 규칙 :
- 행은 이내에 위치해야
.container(고정 폭) 또는.container-fluid적절한 정렬과 패딩 (전체 폭) - 열 수평 그룹을 만들 행을 사용하여
- 콘텐츠 컬럼 내에 위치해야하며, 만 열은 행의 직접적인 아이 일 수있다
- 같은 미리 정의 된 클래스
.row및.col-sm-4빨리 그리드 레이아웃을 사용할 수 있습니다 - 열 패딩을 통해 배수구 (열 내용 사이의 간격)을 만들 수 있습니다. 즉, 패딩에 부정적인 여백을 통해 첫 번째와 마지막 열에 대한 행 오프셋
.rows - 그리드 컬럼은 당신이에 걸쳐하고자 12 가능한 열 수를 지정하여 생성됩니다. 예를 들어, 세 개의 동일한 열을 사용하는 것이 세
.col-sm-4
(A)의 기본 구조 Bootstrap 그리드
다음은 기본적인 구조 Bootstrap 그리드 :
<div class="container">
<div
class="row">
<div class="col-*-*"></div>
</div>
<div
class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div
class="row">
...
</div>
</div> 그래서, 당신이 원하는 레이아웃을 생성, 컨테이너 (작성 <div class="container"> ). 다음으로, 행 (작성 <div class="row"> ). 그런 다음, (적절한와 태그 컬럼의 수를 추가 .col-*-* 클래스). 숫자 참고 .col-*-* 항상 각 행에 대해 12까지 추가해야합니다.
그리드 옵션
: 방법 다음 표는 요약 Bootstrap 그리드 시스템이 여러 장치에서 작동 :
| Extra small devices Phones (<768px) |
Small devices Tablets (>=768px) |
Medium devices Desktops (>=992px) |
Large devices Desktops (>=1200px) |
|
|---|---|---|---|---|
| Grid behaviour | Horizontal at all times | Collapsed to start, horizontal above breakpoints | Collapsed to start, horizontal above breakpoints | Collapsed to start, horizontal above breakpoints |
| Container width | None (auto) | 750px | 970px | 1170px |
| Class prefix | .col-xs- | .col-sm- | .col-md- | .col-lg- |
| Number of columns | 12 | 12 | 12 | 12 |
| Column width | Auto | ~62px | ~81px | ~97px |
| Gutter width | 30px (15px on each side of a column) | 30px (15px on each side of a column) | 30px (15px on each side of a column) | 30px (15px on each side of a column) |
| Nestable | Yes | Yes | Yes | Yes |
| Offsets | Yes | Yes | Yes | Yes |
| Column ordering | Yes | Yes | Yes | Yes |
예
다음 장에서는 다른 장치의 그리드 시스템의 예를 보여줍니다 :