부트스트랩 그리드 - 소형 장치
부트스트랩 그리드 예: 소형 장치
| Extra small | Small | Medium | Large | |
|---|---|---|---|---|
| Class prefix | .col-xs |
.col-sm |
.col-md |
.col-lg |
| Screen width | <768px | >=768px | >=992px | >=1200px |
두 개의 열이 있는 간단한 레이아웃이 있다고 가정합니다. 작은 장치의 경우 열이 25%/75%로 분할되기를 원합니다.
팁: 소형 기기는 화면 너비가 768픽셀에서 991픽셀 사이인 것으로 정의됩니다 .
작은 장치의 경우 .col-sm-*클래스를 사용합니다.
두 열에 다음 클래스를 추가합니다.
<div class="col-sm-3">....</div>
<div class="col-sm-9">....</div>
이제 Bootstrap은 "작은 크기에서 -sm-이 있는 클래스를 찾아 사용하십시오"라고 말할 것입니다.
다음 예에서는 소형(중형 및 대형) 장치에서 25%/75% 분할이 발생합니다. 초소형 장치에서는 자동으로 스택(100%)됩니다.
col-sm-3
col-sm-9
예시
<div class="container-fluid">
<h1>Hello World!</h1>
<div class="row">
<div class="col-sm-3" style="background-color:yellow;">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-9" style="background-color:pink;">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>
참고: 합계가 항상 최대 12인지 확인하십시오.
33.3%/66.6% 분할의 경우 다음을 사용 .col-sm-4합니다 .col-sm-8.
col-sm-4
col-sm-8
예시
<div class="container-fluid">
<h1>Hello World!</h1>
<div class="row">
<div class="col-sm-4" style="background-color:yellow;">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-8" style="background-color:pink;">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>
다음 장에서는 중형 장치에 대해 다른 분할 비율을 추가하는 방법을 보여줍니다.