Bootstrap 그리드 예 : 중간 장치
이전 장에서 우리는 작은 장치를위한 클래스와 그리드의 예를 제시했다. 우리는이 div의 (열)를 사용하고 우리는 그들에게 준 25%/75% 분할 :
<div class="col-sm-3">....</div>
<div class="col-sm-9">....</div>그러나 매체 장치의 디자인은 같은 더 좋을 수 50%/50% 분할.
팁 : 중간 장치가 1,199 픽셀 992 픽셀의 화면 폭을 갖는 것으로 정의된다.
매체 장치의 경우 우리는 사용 .col-md-* 클래스를.
이제 우리는 매체 장치의 열 너비를 추가합니다 :
<div class="col-sm-3 col-md-6">....</div>
<div class="col-sm-9 col-md-6">....</div>
이제 Bootstrap 말할 것입니다 ", 작은 크기와 종류를 보면 -sm- 그들과 사람들을 사용합니다. 중간 크기와 종류를 보면 -md- 그들과 그 사용"을 참조하십시오.
다음의 예는 발생합니다 25%/75% 소형 기기에 분할 및 50%/50% 매체 (대형) 장치에 분할. 매우 작은 장치에서 자동으로 (100 %) 스택합니다 :
예
<div class="container-fluid">
<h1>Hello World!</h1>
<div
class="row">
<div class="col-sm-3
col-md-6" style="background-color:yellow;">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-9 col-md-6" style="background-color:pink;">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div> »그것을 자신을 시도 주 : 합계가 항상 12까지 추가되었는지 확인합니다.
전용 매체를 사용하여
아래의 예에서, 우리는 단지 지정 .col-md-6 (없는 클래스 .col-sm-* ). 이 중형 및 대형 장치가 분리된다는 것을 의미합니다 50%/50% 클래스가 확장 때문에 -. 그러나, 소형 장치의 경우, 수직 방향 (100 % 폭)을 적층한다 :
예
<div
class="row">
<div class="col-md-6" style="background-color:yellow;">
<p>Lorem ipsum...</p>
</div>
<div class="col-md-6" style="background-color:pink;">
<p>Sed ut perspiciatis...</p>
</div>
</div>
»그것을 자신을 시도 다음 장에서는 대형 장치에 대한 다른 분할 퍼센트를 추가하는 방법을 보여줍니다.