아래 우리는 기본의 몇 가지 예 수집 한 Bootstrap 그리드 레이아웃을.
세 평등 열
다음의 예는 세 개의 동일한 폭 열 태블릿에서 시작하여 큰 데스크톱에 확장을 가져 오는 방법을 보여줍니다. 휴대 전화에서 열이 자동으로 스택됩니다
예
<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> »그것을 자신을 시도 세 불평등 열
다음의 예는 세 개의 다양한 폭의 열 태블릿에서 시작하여 큰 데스크톱에 확장을 가져 오는 방법을 보여줍니다 :
예
<div class="row">
<div
class="col-sm-3">.col-sm-3</div>
<div
class="col-sm-6">.col-sm-6</div>
<div
class="col-sm-3">.col-sm-3</div>
</div> »그것을 자신을 시도 두 동일하지 않은 열
다음 예제에서는 두 개의 다양한 폭의 열이 태블릿에서 시작하여 큰 데스크톱 확장 가져 오는 방법을 보여줍니다 :
예
<div class="row">
<div
class="col-sm-4">.col-sm-4</div>
<div
class="col-sm-8">.col-sm-8</div>
</div> »그것을 자신을 시도 두 중첩 된 열 두 열
다음 예제에서는 두 개의 열 (휴대 전화에서 이러한 열 및 중첩 된 열 스택됩니다) 더 큰 열 내의 다른 두 개의 열 (동일한 폭)와, 태블릿에서 시작하여 큰 데스크톱 확장 가져 오는 방법을 보여줍니다 :
예
<div class="row">
<div class="col-sm-8">
.col-sm-8
<div class="row">
<div class="col-sm-6">.col-sm-6</div>
<div
class="col-sm-6">.col-sm-6</div>
</div>
</div>
<div class="col-sm-4">.col-sm-4</div>
</div> »그것을 자신을 시도 혼합 : 모바일 및 데스크톱
Bootstrap : 그리드 시스템은 네 개의 클래스가 xs (휴대 전화), sm (정제), md (데스크탑)와 lg (큰 데스크톱). 클래스는보다 역동적이고 유연한 레이아웃을 만들 결합 할 수 있습니다.
팁 : 각 클래스가 확장, 그래서 당신은 동일한 폭을 설정하고자하는 경우 xs 와 sm , 당신은 단지 지정해야 xs .
예
<div class="row">
<div class="col-xs-9 col-md-7">.col-xs-9
.col-md-7</div>
<div class="col-xs-3 col-md-5">.col-xs-3
.col-md-5</div>
</div>
<div class="row">
<div
class="col-xs-6 col-md-10">.col-xs-6 .col-md-10</div>
<div
class="col-xs-6 col-md-2">.col-xs-6 .col-md-2</div>
</div>
<div
class="row">
<div class="col-xs-6">.col-xs-6</div>
< div
class="col-xs-6">.col-xs-6</div>
</div> »그것을 자신을 시도 팁 : 행에 대해 최대 12 개의 추가해야하는 그리드 열을 기억하십시오. 그 이상, 열은 상관없이에게 스택됩니다 viewport .
혼합 : 모바일, 태블릿 및 데스크탑
예
<div class="row">
<div class="col-xs-7 col-sm-6
col-lg-8">.col-xs-7 .col-sm-6 .col-lg-8</div>
<div class="col-xs-5
col-sm-6 col-lg-4">.col-xs-5 .col-sm-6 .col-lg-8</div>
</div>
<div
class="row">
<div class="col-xs-6 col-sm-8 col-lg-10">.col-xs-6
.col-sm-8 .col-lg-10</div>
<div class="col-xs-6 col-sm-4
col-lg-2">.col-xs-6 .col-sm-4 .col-lg-2</div>
</div> »그것을 자신을 시도 클리어 수레
합니다 (맑은 수레 .clearfix 특정 중단 점에서 클래스) 불균일 한 내용이 이상한 포장을 방지하기 위해 :
예
<div class="row">
<div class="col-xs-6 col-sm-3">
Column 1
<br>
Resize the browser
window to see the effect.
</div>
<div class="col-xs-6
col-sm-3">Column 2</div>
<!-- Add clearfix for only the required
viewport -->
<div class="clearfix visible-xs"></div>
<div class="col-xs-6 col-sm-3">Column 3</div>
<div class="col-xs-6
col-sm-3">Column 4</div>
</div> »그것을 자신을 시도 상계 열
사용하여 오른쪽으로 열 이동 .col-md-offset-* 클래스를. 이러한 클래스에 의한 열의 왼쪽 여백 증가 * 열 :
예
<div class="row">
<div class="col-sm-5 col-md-6">.col-sm-5
.col-md-6</div>
<div class="col-sm-5 col-sm-offset-2 col-md-6
col-md-offset-0">
.col-sm-5 .col-sm-offset-2 .col-md-6
.col-md-offset-0</div>
</div> »그것을 자신을 시도 밀고 당겨 - 변경 열 주문을
와 그리드의 열 순서 변경 .col-md-push-* 및 .col-md-pull-* 클래스 :
예
<div class="row">
<div class="col-sm-4
col-sm-push-8">.col-sm-4 .col-sm-push-8</div>
<div class="col-sm-8
col-sm-pull-4">.col-sm-8 .col-sm-pull-4</div>
</div> »그것을 자신을 시도