부트스트랩 그리드 - 대형 장치
부트스트랩 그리드 예: 대형 장치
Extra small | Small | Medium | Large | |
---|---|---|---|---|
Class prefix | .col-xs |
.col-sm |
.col-md |
.col-lg |
Screen width | <768px | >=768px | >=992px | >=1200px |
이전 장에서 우리는 중소형 장치에 대한 클래스가 있는 그리드 예제를 제시했습니다. 우리는 두 개의 div(열)를 사용했으며 소형 장치에서는 25%/75% 분할을, 중형 장치에서는 50%/50% 분할을 제공했습니다.
<div class="col-sm-3 col-md-6">....</div>
<div class="col-sm-9 col-md-6">....</div>
그러나 대형 장치에서는 디자인이 33%/66% 분할로 더 나을 수 있습니다.
도움말: 대형 기기는 화면 너비가 1200픽셀 이상인 것으로 정의됩니다 .
대형 장치의 경우 .col-lg-*
클래스를 사용합니다.
이제 대형 장치에 대한 열 너비를 추가합니다.
<div class="col-sm-3 col-md-6 col-lg-4">....</div>
<div class="col-sm-9 col-md-6 col-lg-8">....</div>
이제 Bootstrap은 "작은 크기에서는 -sm-이 있는 클래스를 보고 사용합니다. 중간 크기에서는 -md-가 있는 클래스를 보고 사용합니다. 큰 크기에서는 -lg-라는 단어가 포함된 클래스를 찾아 사용합니다."
다음 예에서는 소형 장치에서 25%/75% 분할, 중간 장치에서 50%/50% 분할, 대형 장치에서 33%/66% 분할이 발생합니다.
예시
<div class="container-fluid">
<h1>Hello World!</h1>
<div class="row">
<div class="col-sm-3 col-md-6 col-lg-4" style="background-color:yellow;">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-9 col-md-6 col-lg-8" style="background-color:pink;">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>
참고: 합계가 항상 최대 12인지 확인하십시오.
대형만 사용
아래 예에서는 .col-lg-6
클래스만 지정합니다( .col-md-*
및/또는 .col-sm-*
제외). 이는 대형 장치가 50%/50%로 분할됨을 의미합니다. 그러나 중형 및 소형 장치의 경우 수직으로 쌓입니다(100% 너비).
예시
<div class="container-fluid">
<h1>Hello World!</h1>
<div class="row">
<div class="col-lg-6" style="background-color:yellow;">
<p>Lorem ipsum...</p>
</div>
<div class="col-lg-6" style="background-color:pink;">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>