그리드가 표시되면 코드는 다음과 같습니다.
<div> <div> <p> box 1 </p> </div> <div> <p> box 2 </p> </div> <div> <p> box 3 </p> </div> <div> <p> box 4 </p> </div> <div> <p> Box 5 </p> </div> <p> Box 6 </p> </p> <pox 7 </p> </div> <div> <p> box 8 </p> </div> <div> <p> Box 9 </p> </div> <p> box 10 </p> </div> <div> <p> box 11 </p> </div> <p> box 10 </p> <p> <p> Box 11 </p> <p> <p> box 8 </p> </div> <div> <p> box 9 </p> </div> <div> <p> Box 10 </p> </div> <div> <p> Box 11 </p> </div> <div> <p> Box 12 </div> </div> </div>
여기서 col-*-*는 다른 유형의 장치에서 그리드 시스템이 차지하는 열 폭을 나타냅니다.
매우 작습니다 휴대 전화 (<768px) | 작은 태블릿 (≥768px) | 가운데 컴퓨터 (≥992px) | 큰 컴퓨터 (≥1200px) | |
|---|---|---|---|---|
| 컨테이너 최대 너비 | 없음 (자동) | 750px | 970px | 1170px |
| 클래스 이름 접두사 | .col-xs- | .col-sm- | .col-md- | .col-lg- |
| 최대 열 너비 | Auto | ~62px | ~81px | ~97px |
| 열 간격 | 15px (예 : 30px ) | |||
열의 높이가 다르면 플로트의 효과는 그리드의 구조를 파괴하여 응답 클래스를 사용하여 피할 수 있습니다. 다음은 전체 그리드 코드입니다.
<div> <div> <p> box 1 </p> </div> <div> <p> box 2 </p> </div> </div> <p> box 3 </p> </div> </div> <div> <p> box 4 </p> </div> <div> </div> <p> box 5 </p> <p> box 6 </p> </div> <div> </div> <div> <p> Box 7 </p> </div> <div> <p> Box 8 </div> <div> </div> <div> <p> Box 8 </p> </div> </div> </div> <pox 6 </p> </div> <div> </div> <div> <p> Box 7 </p> </div> <div> <p> box 8 </div> <div> </div> <div> <p> box 9 </p> </div> </div> </div> <p> box 10 </div> </div> <pox box 11 </p> </div> <div> <p> Box 12 </p> </div> </div> </div>
표시-*-*는 어떤 디스플레이 속성에 표시되는지를 나타냅니다. 작은 장치는 기본적으로 단일 열로 기본적으로 응답 클래스를 사용하여 사용자 정의 할 필요가 없습니다.
응답 클래스는 다음 코드와 같은 일반 태그에서도 사용할 수 있습니다.
<p>이 단락은 여분의 작은 장치에서만 볼 수 있습니다. </p> <p>이 단락은 소규모 장치에서만 볼 수 있습니다. </p> <p>이 단락은 중간 장치에서만 볼 수 있습니다. </p> <p>이 단락은 큰 장치에서만 볼 수 있습니다. </p> </p>.
마찬가지로, 당신은 또한 숨겨진-*를 사용하여 특정 장치에 숨기도록 설정할 수도 있습니다.
<p>이 단락은 여분의 작은 장치에만 숨겨져 있습니다. </p> <p>이 단락은 소규모 장치에만 숨겨져 있습니다. </p> <p>이 단락은 중간 장치에만 숨겨져 있습니다. </p> <p>이 단락은 큰 장치에만 숨겨져 있습니다. </p> </p>.
응답 클래스는 인쇄 형식을 설정할 수도 있습니다.
위의 것은 Bootstrap3 연구 노트의 그리드 시스템입니다 (1) 편집자가 소개합니다. 모든 사람에게 도움이되기를 바랍니다. 궁금한 점이 있으면 메시지를 남겨 주시면 편집자가 제 시간에 모든 사람에게 답장을 드리겠습니다. Wulin.com 웹 사이트를 지원해 주셔서 대단히 감사합니다!