부트스트랩 왜 12 래스터인가?-부트스트랩 튜토리얼-php.cn

그리드 시스템 소개

Bootstrap은 반응성이 뛰어난 모바일 우선 유동 그리드 시스템을 제공합니다. 화면 또는 뷰포트 크기가 증가하면 시스템이 자동으로 최대 12개의 열로 나뉩니다. 여기에는 사용하기 쉬운 사전 정의된 클래스뿐만 아니라 보다 의미 있는 레이아웃을 생성하기 위한 강력한 믹스인도 포함되어 있습니다.

그리드 시스템은 일련의 행과 열의 조합을 통해 페이지의 레이아웃을 생성하고, 생성된 레이아웃에 설정된 내용을 배치할 수 있습니다.

그리드 시스템의 구현 원리

그리드 시스템의 구현 원리는 매우 간단합니다. 컨테이너의 크기를 정의하고 12등분으로 나눈 다음 내부 및 외부 여백을 조정하면 됩니다. 마지막으로 이를 미디어 쿼리와 결합하여 강력한 반응형 그리드 시스템을 만듭니다.

그리드 시스템의 주요 작동 원리:

➣ 데이터 행(행)은 적절한 정렬을 제공하기 위해 .container(고정 너비) 또는 .container-fluid(100% 너비)에 포함되어야 합니다. 스타일과 패딩.

➣ "행"을 통해 가로 방향으로 "열" 집합을 만듭니다.

➣ 특정 콘텐츠는 "열" 내에 배치되어야 하며 "열"만 행의 직접 하위 요소로 사용할 수 있습니다.

➣ 내장 스타일이 많이 있으므로 스타일( 즉, .row 및 .col-xs-4(4열 너비)와 같은 사전 정의된 클래스를 사용하여 그리드 레이아웃을 빠르게 생성할 수 있습니다. Bootstrap 소스 코드에 정의된 믹스인을 사용하여 의미 있는 레이아웃을 생성할 수도 있습니다. (여백) "column" 요소에 대한 패딩 속성을 설정하여 .row 요소에 대해 음수 여백을 설정하면 .container 요소에 대해 설정된 패딩을 오프셋할 수 있습니다. "행"에 포함된 "열"

➣ 그리드 시스템의 열은 1에서 12 사이의 값을 지정하여 범위를 나타냅니다. , 3개의 .col-xs를 사용하여 3개의 동일한 너비 열을 만들 수 있습니다. -4

➣ "행"에 포함된 "열"이 12보다 큰 경우 추가 "열"이 사용됩니다. )"는 전체적으로 새로운 행에 배열됩니다.

➣ 그리드 클래스는 화면 너비가 분할 지점 크기보다 크거나 같은 장치에 적합하며 작은 화면 장치의 경우 그리드 클래스가 재정의됩니다. 따라서 해당 요소에 적용된 모든 .col-md-* 래스터 클래스가 작동합니다. 따라서 화면 너비가 중단점 크기보다 크거나 작은 화면 장치에 적용된 래스터 클래스는 .col-lg-* 요소에 적용되지 않으며

Grid 시스템에도 영향을 미칩니다. 레이아웃 컨테이너

Bootstrap은 페이지 콘텐츠와 그리드 시스템을 위해 .container 컨테이너를 래핑해야 합니다. 패딩 및 기타 속성으로 인해 이 두 컨테이너 클래스는 서로 중첩될 수 없습니다.

.container 클래스는 고정 너비의 컨테이너에 사용되며 반응형 레이아웃을 지원합니다.

<div class="container">
  ...
</div>

로그인 후 복사

.container-fluid 클래스는 100% 너비에 사용되며 뷰포트

<div class="container-fluid">
  ...
</div>

로그인 후 복사

의 컨테이너입니다. 그리드 시스템 사용

그리드 시스템의 사용은 실제로 다양한 열 조합으로 이루어집니다. 열 조합, 열 오프셋, 열 정렬이라는 네 가지 특성이 있습니다. 스타일에서는 중간 화면(md)을 예로 들어 보겠습니다.

1. 열 조합

열 조합은 테이블의 colspan과 유사합니다. 열 조합의 구현은 매우 간단하며 왼쪽 부동 소수점 및 백분율이라는 두 가지 CSS 속성만 포함됩니다.

참고: 그리드 시스템을 사용할 때 각 행의 총 개수는 12개이며 자유롭게 지정할 수 있습니다. 실제 프로젝트에 따라 결합됩니다.

        <div class="container">
            <div class="row">
                <div class="col-md-1">.col-md-1</div>
                <div class="col-md-1">.col-md-1</div>
                <div class="col-md-1">.col-md-1</div>
                <div class="col-md-1">.col-md-1</div>
                <div class="col-md-1">.col-md-1</div>
                <div class="col-md-1">.col-md-1</div>
                <div class="col-md-1">.col-md-1</div>
                <div class="col-md-1">.col-md-1</div>
                <div class="col-md-1">.col-md-1</div>
                <div class="col-md-1">.col-md-1</div>
                <div class="col-md-1">.col-md-1</div>
                <div class="col-md-1">.col-md-1</div>
            </div>
            <div class="row">
                <div class="col-md-8">.col-md-8</div>
                <div class="col-md-4">.col-md-4</div>
            </div>
            <div class="row">
                <div class="col-md-4">.col-md-4</div>
                <div class="col-md-4">.col-md-4</div>
                <div class="col-md-4">.col-md-4</div>
            </div>
            <div class="row">
                <div class="col-md-6">.col-md-6</div>
                <div class="col-md-6">.col-md-6</div>
            </div>
        </div>

로그인 후 복사

관련 권장 사항: " 부트스트랩 왜 12 래스터인가? Bootstrap 시작 튜토리얼

2. 열 오프셋

때때로 우리는 두 개의 인접한 열이 서로 옆에 있는 것을 원하지 않습니다. 그리드 시스템의 오프셋 이는 마진 값을 정의할 필요 없이 오프셋 기능을 사용하여 달성됩니다. 중간 화면의 경우 .col-md-offset-* 형식의 스타일을 사용하여 열을 오른쪽으로 오프셋할 수 있습니다.

예를 들어 .col-md-offset-2는 요소를 두 열 너비만큼 오른쪽으로 이동하는 것을 의미합니다.

　　　 <!--列偏移-->
　　　　<div class="container">
            <div class="row">
                <div class="col-md-4">.col-md-4</div>
                <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
            </div>
            <div class="row">
                <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
                <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
            </div>
            <div class="row">
                <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
            </div>
　　　　</div>

로그인 후 복사

3. 열 중첩 부트스트랩 왜 12 래스터인가?

栅格系统也支持列嵌套，即在一个列里再声明一个或多个行（row），但是要注意，内部所嵌套的 row 的宽度为 100% 时，就是当前外部列的宽度。被嵌套的行（row）所包含的列（column）的个数不能超过12。

        <!--列嵌套-->
        <div class="container">
            <div class="row">
                <div class="col-md-8">
                    Level 1：col-md-8
                    <!--在第一行里又添加一行-->
                    <div class="row">
                        <div class="col-md-6">Level 2：col-md-6</div>
                        <div class="col-md-6">Level 2：col-md-6</div>
                    </div>
                    <!--在第一行里又添加一行-->
                    <div class="row">
                        <div class="col-md-3"> Level 3：col-md-3 </div>
                        <div class="col-md-6"> Level 3：col-md-6 </div>
                    </div>
                </div>
                <div class="col-md-4">Level 1：col-md-4</div>
            </div>
        </div>

로그인 후 복사

부트스트랩 왜 12 래스터인가?

说明：可以看到，在第一个列(col-md-8)里面，嵌套了一个新行(row)，然后在新行里，又放置了两个等宽的(col-md-6)列，并且两个 col-md-6 加起来是12，但是总宽度和外面的 col-md-8 列的宽度一样，也就是说在 row 里的列宽度是按照百分比分配的。在任何一个嵌套列里，不管宽度是多少，都可以再进行 12 等分，并可以进一步组合。

4、列排序

列排序就是改变列的方向，也就是改变左右浮动，并设置浮动的距离。在栅格系统里，可以通过 .col-md-push-* 和 .col-md-pull-* 来实现这一目的。

　　　　　<!--列排序-->
        <div class="container">
            <div class="row">
            　　<div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
            　　<div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
        　　</div>
        </div>

로그인 후 복사

부트스트랩 왜 12 래스터인가?

说明：默认情况下，col-md-9 在左边，col-md-3 在右边，如果要互换位置，需要将 col-md-9 列向右移动三个列的距离，也就是推三个列的 offset，样式用 col-md-push-3；而 col-md-3 需要向左移动，也就是拉九个 offset，样式用 col-md-pull-9。

响应式栅格

我们都知道，Bootstrap 可以制作响应式页面。它能为不同屏幕尺寸提供不同栅格样式。在前面的例子中，我们一直都在使用中等屏幕(md)，既然是响应式页面，当然还应该包括超小屏幕(xs)、小型屏幕(sm)、大屏幕(lg)等。

Bootstrap 栅格参数

说明：通过下表可以详细查看 Bootstrap 的栅格系统是如何在多种屏幕设备上工作的。

부트스트랩 왜 12 래스터인가?