부트스트랩 그리드 사용법

부트스트랩 그리드 사용: 1. 컨테이너를 사용하여 div 내부에 행을 설정합니다. 3. 이 프레임을 빠르게 구성할 수 있도록 열을 설정합니다. 4. 브라우저를 드래그하여 너비를 변경합니다.

이 문서의 운영 환경: Windows 7 시스템, bootstrap3, Dell G3 컴퓨터.

부트스트랩의 그리드를 어떻게 사용하나요?

컨테이너를 사용하여 div를 래핑한 다음 내부에 행을 설정합니다. 행을 설정하고 열을 설정한 후 이 프레임워크를 빠르게 구축할 수 있습니다.

<div class="container">
            <h1>Hello, world!</h1>
         
            <div class="row">
                <div class="col-md-1"  style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
                    <p>
                    第一列占1个md
                    </p>
                </div>
         
                <div class="col-md-2" style="background-color: #dedef8;box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
                    <p>
                        这个是第二列 占 2 个md
                    </p>
                </div>
                <div class="col-md-9" style="background-color: #dedef8;box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
                        <p>最后一个md占9个列
                        </p>
                </div>
            </div>
        </div>

총 개수는 12개로 보장됩니다. 변경 사항을 볼 수 있습니다. 너비를 변경하려면 브라우저를 드래그하세요.

또한 화면 크기도 영향을 미칩니다. 이때 열의 클래스도 더 큰 열을 사용해야 합니다. 브라우저를 드래그하면 변경 사항을 볼 수 있습니다.

<div class="container">
            <div class="row">
                <div class="col-md-6 col-lg-4" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
                    中型占6，大型占4
                </div>
                <div class="col-md-6 col-lg-8" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
                    中型占6，大型占8
                </div>
            </div>
        </div>

전체 그리드 크기 분포

.col-xs- 超小屏幕 手机 (<768px)
.col-sm- 小屏幕 平板 (≥768px)
.col-md- 中等屏幕 桌面显示器 (≥992px)
.col-lg- 大屏幕 大桌面显示器 (≥1200px)

권장: "부트스트랩 튜토리얼"

위 내용은 부트스트랩 그리드 사용법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!