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 그리드 시스템에 응답하며, 열이 화면의 크기에 따라 자동으로 다시 배열한다.
그리드 클래스
Bootstrap 그리드 시스템은 네 개의 클래스가 있습니다 :
- xs (휴대폰 용)
- sm (태블릿)
- md (데스크톱)
- lg (큰 데스크톱)
클래스는 위보다 역동적이고 유연한 레이아웃을 만들 결합 할 수 있습니다.
(A)의 기본 구조 Bootstrap 그리드
다음은 기본적인 구조 Bootstrap 그리드 :
<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 class="row"> ). 그런 다음, (적절한와 태그 컬럼의 수를 추가 .col-*-* 클래스). 숫자 참고 .col-*-* 항상 각 행에 대해 12까지 추가해야합니다.
아래 우리는 기본의 몇 가지 예 수집 한 Bootstrap 그리드 레이아웃을.
세 평등 열
.COL-SM-4
.COL-SM-4
.COL-SM-4
다음의 예는 세 개의 동일한 폭 열 태블릿에서 시작하여 큰 데스크톱에 확장을 가져 오는 방법을 보여줍니다. 휴대 전화에서 열이 자동으로 스택됩니다
예
<div class="row">
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-4">.col-sm-4</div>
<div
class="col-sm-4">.col-sm-4</div>
</div> »그것을 자신을 시도 두 동일하지 않은 열
.COL-SM-4
.COL-SM-8
다음 예제에서는 두 개의 다양한 폭의 열이 태블릿에서 시작하여 큰 데스크톱 확장 가져 오는 방법을 보여줍니다 :
예
<div class="row">
<div
class="col-sm-4">.col-sm-4</div>
<div
class="col-sm-8">.col-sm-8</div>
</div> »그것을 자신을 시도 팁 :에 대한 자세한 내용은 것 Bootstrap 나중에이 튜토리얼에서 그리드.