Bootstrap의 그리드 시스템에 대한 심층 분석-부트스트랩 튜토리얼-php.cn

이 기사에서는 Bootstrap의 웹 페이지 레이아웃 그리드 시스템을 소개하고 부트스트랩 그리드 시스템의 작동 원리, 셀 너비 설정 및 반응형 레이아웃 방법을 이해하는 데 도움이 되기를 바랍니다.

Bootstrap의 그리드 시스템에 대한 심층 분석

1. 부트스트랩 그리드 시스템의 작동 원리

1.1 12개의 그리드 시스템

그리드는 그리드, 영어 그리드, 어떤 곳은 그리드인 이유, 어떤 곳은 그리드, 하지만 번역 습관은 다릅니다. 12 그리드 시스템은 전체 화면을 너비에 따라 12등분으로 나누는 것을 의미하며, 1등분은 화면 너비의 1/12를 의미하며 왜 10등분이나 다른 등분할이 아닌 12등분으로 표시됩니까? 부품의 경우 12가 1, 2, 3, 4, 6의 최소공배수이기 때문입니다. 경험에 따르면 이 분할이 가장 아름답고 실용적입니다. 물론 36그리드와 10그리드 시스템도 사용 측면에서 볼 때 실제로 12그리드 시스템만큼 편리하지는 않습니다. [관련 추천: "부트스트랩 튜토리얼"]

12 그리드 시스템에서 화면을 왼쪽과 오른쪽으로 나누어 왼쪽이 1/3, 오른쪽이 2/3을 차지하게 하려면, 왼쪽 너비를 4 그리드로 설정하고 오른쪽 너비를 8 그리드로 변경할 수 있습니다. 왼쪽과 오른쪽의 절반이 필요한 경우 각각을 6개의 그리드로 설정하면 됩니다. 화면을 채우기 위해 한 페이지만 설정해야 한다면 직접 12 그리드로 설정할 수 있습니다. 보세요, 정말 편리하지 않나요?

1.2 부트스트랩 그리드 시스템 태그

부트스트랩 그리드 시스템 디자인 세 개의 태그, 즉 컨테이너, 행, 열:

컨테이너는 이전 섹션에서 자세히 소개한 컨테이너입니다.
row는 가로 행을 나타내는 행을 의미합니다.
col은 각 특정 셀을 나타내는 셀입니다. 작성 방법에는 col, col-grid 번호(예: col-3), col-screen size - number가 있습니다. 래스터(예: col-md-3).

다음은 화면을 3개의 동일한 너비 단위로 나누는 샘플 코드입니다. 그리드 시스템의 구조를 간단히 이해하면 됩니다. 나중에 자세히.

<div class="container">
    <div class="row">
        <div class="col">
            第一个单元
        </div>
        <div class="col">
            第二个单元
        </div>
        <div class="col">
            第三个单元
        </div>
    </div>
</div>

로그인 후 복사

1.3 부트스트랩 그리드 시스템 규칙

행을 사용하여 열의 수평 그룹을 만듭니다.
한 페이지에 여러 행이 있을 수 있습니다.
올바른 정렬과 패딩을 얻으려면 행을 컨테이너 내부에 배치해야 합니다.
콘텐츠는 열(col) 내에 배치되어야 하며 열만 행의 직접 하위 요소가 될 수 있습니다.
행은 열 내에 중첩될 수도 있습니다. 열 자체가 컨테이너이므로 열 내의 행은 컨테이너가 필요하지 않습니다.
컬스크린 크기-그리드 수 등 미리 정의된 그리드 클래스를 직접 사용하여 그리드 레이아웃을 빠르게 생성할 수 있습니다.
사전 정의된 클래스에서 화면 크기에는 5가지 값이 있으며 주로 반응형 디자인에 사용됩니다. 3.1을 참조하세요. 그리드 수는 1부터 12까지의 숫자로 화면 너비를 나타냅니다.

2. 부트스트랩 그리드 시스템의 셀 너비 설정

2.1 기본 동일 너비 레이아웃

각 열의 너비를 설정하지 않으면 기본 열 수가 균등하게 분배됩니다. .열의 너비는 다르지만 연속으로 12열 이상이면 예측할 수 없는 현상이 발생합니다(연구를 위해 몇 가지 테스트를 수행했는데 이것을 테스트할 필요는 없습니다. 시트를 사용할 수 있습니다). 아래에 약간의 변경을 가해 앞으로 사용될 코드 일부를 제공할 것이므로 다시 제공하지 않겠습니다.

col, col-grid 숫자를 사용하여 너비를 설정할 경우 미리보기 효과를 위해 창 너비를 최대로 설정하세요. 그렇지 않으면 효과 편차가 발생할 수 있습니다. 또한 실제 응용 프로그램에서는 이 설정을 권장하지 않습니다. 반응형 그리드 레이아웃.

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="bootstrap5/bootstrap.min.css" rel="stylesheet">
 
    <title>网格系统演示</title>
  </head>
  <body>
  
    <div>
        <div>
            <div>
                <h1>Bootstrap是什么？</h1>
                <p>
                    我们在开发前端页面的时候，如果每一个按钮、样式、处理浏览器兼容性的代码都要自己从零
                    开始去写，那就太浪费时间了。所以我们需要一个框架，帮我们实现一个页面的基础部分和解
                    决一些繁琐的细节，只要在它的基础上进行个性化定制就可以了。Bootstrap 就是这样一个简
                    洁、直观、强悍的前端开发框架，只要学习并遵守它的标准，即使是没有学过网页设计的开发
                    者，也能做出很专业、美观的页面，极大地提高了工作效率。
                </p>
            </div>
            <div>
                <h1>Bootstrap是什么？</h1>
                <p>
                    我们在开发前端页面的时候，如果每一个按钮、样式、处理浏览器兼容性的代码都要自己从零
                    开始去写，那就太浪费时间了。所以我们需要一个框架，帮我们实现一个页面的基础部分和解
                    决一些繁琐的细节，只要在它的基础上进行个性化定制就可以了。Bootstrap 就是这样一个简
                    洁、直观、强悍的前端开发框架，只要学习并遵守它的标准，即使是没有学过网页设计的开发
                    者，也能做出很专业、美观的页面，极大地提高了工作效率。
                </p>
            </div>
            <div>
                <h1>Bootstrap是什么？</h1>
                <p>
                    我们在开发前端页面的时候，如果每一个按钮、样式、处理浏览器兼容性的代码都要自己从零
                    开始去写，那就太浪费时间了。所以我们需要一个框架，帮我们实现一个页面的基础部分和解
                    决一些繁琐的细节，只要在它的基础上进行个性化定制就可以了。Bootstrap 就是这样一个简
                    洁、直观、强悍的前端开发框架，只要学习并遵守它的标准，即使是没有学过网页设计的开发
                    者，也能做出很专业、美观的页面，极大地提高了工作效率。
                </p>
            </div>
            <div>
                <h1>Bootstrap是什么？</h1>
                <p>
                    我们在开发前端页面的时候，如果每一个按钮、样式、处理浏览器兼容性的代码都要自己从零
                    开始去写，那就太浪费时间了。所以我们需要一个框架，帮我们实现一个页面的基础部分和解
                    决一些繁琐的细节，只要在它的基础上进行个性化定制就可以了。Bootstrap 就是这样一个简
                    洁、直观、强悍的前端开发框架，只要学习并遵守它的标准，即使是没有学过网页设计的开发
                    者，也能做出很专业、美观的页面，极大地提高了工作效率。
                </p>
            </div>
            
        </div>
    </div>
 
     <script src="bootstrap5/bootstrap.bundle.min.js" ></script>
  </body>
</html>

로그인 후 복사

Bootstrap의 그리드 시스템에 대한 심층 분석

이 코드의 효과는 위 그림에 나와 있습니다. 아래 셀을 몇 개 더 복사하면 효과를 확인할 수 있습니다.

              <div class="col">
                <h1>Bootstrap是什么？</h1>
                <p>
                    我们在开发前端页面的时候，如果每一个按钮、样式、处理浏览器兼容性的代码都要自己从零
                    开始去写，那就太浪费时间了。所以我们需要一个框架，帮我们实现一个页面的基础部分和解
                    决一些繁琐的细节，只要在它的基础上进行个性化定制就可以了。Bootstrap 就是这样一个简
                    洁、直观、强悍的前端开发框架，只要学习并遵守它的标准，即使是没有学过网页设计的开发
                    者，也能做出很专业、美观的页面，极大地提高了工作效率。
                </p>
            </div>

로그인 후 복사

Bootstrap의 그리드 시스템에 대한 심층 분석

2.2 각 열의 너비를 설정하세요

세 개의 <div class="col"> col을 col-3, col-6, col-3 또는 기타 값, 즉 세 개의 숫자로 바꿔보세요. 총합은 12입니다. 물론 한 행의 합이 12이면 하나 또는 여러 개의 셀을 삭제하거나 추가할 수도 있습니다. 이러한 간단한 설정을 통해 매우 편리하게 셀의 너비를 변경할 수 있습니다. 아래 그림은 col을 col-2, col-2, col-4, col-4로 각각 설정한 후 표시 효과를 보여줍니다<p><img src="https://img.php.cn/upload/image/470/902/110/163152969673133Bootstrap%EC%9D%98%20%EA%B7%B8%EB%A6%AC%EB%93%9C%20%EC%8B%9C%EC%8A%A4%ED%85%9C%EC%97%90%20%EB%8C%80%ED%95%9C%20%EC%8B%AC%EC%B8%B5%20%EB%B6%84%EC%84%9D" title="163152969673133Bootstrap의 그리드 시스템에 대한 심층 분석" alt="Bootstrap의 그리드 시스템에 대한 심층 분석"></p> <p><strong><span style="font-size: 18px;">2.3 가변폭 열</span></strong></p> <p>셀 값을 설정하면 셀이 3개가 있는데 하나만 설정하면 나머지 2개의 셀이 나머지 공간을 균등하게 나눠주기 때문에 가변폭 열을 쉽게 설정할 수 있습니다. . 참고로 고정값이 설정된 셀이 앞에 있을 필요는 없습니다. 예를 들어 2.1 코드에서는 두 번째 셀이 전체 화면(col-6)을 차지하도록 설정하고 나머지 셀은 앞에 놓일 필요가 없습니다. 고르게 분포됩니다. </p> <p><img src="https://img.php.cn/upload/image/580/548/577/1631529701545798.png" title="1631529701545798.png" alt="Bootstrap의 그리드 시스템에 대한 심층 분석"></p> <p><strong><span style="font-size: 18px;">2.4 자동으로 열 줄 바꿈 </span></strong></p> <p> 각 셀에 너비 값이 설정되어 있을 때 행의 나머지 공간이 더 이상 특정 셀을 수용할 수 없으면 자동으로 줄 바꿈됩니다. </p> <ul style="list-style-type: disc;"><li><p> 2.1의 예를 들어 4개의 <code><div class="col">에 있는 col을 col-6으로 대체하여 효과를 확인하세요. <code><div class="col">中的col都换为col-6，查看效果。<p><img src="https://img.php.cn/upload/image/569/508/978/1631529707575018.png" title="1631529707575018.png" alt="Bootstrap의 그리드 시스템에 대한 심층 분석"></p> <ul style="list-style-type: disc;"><li><p>将2.1的例子，将四个<code><div class="col">中的col都换为col-12，查看效果。<p><img src="https://img.php.cn/upload/image/288/939/606/1631529713379410.png" title="1631529713379410.png" alt="Bootstrap의 그리드 시스템에 대한 심층 분석"></p> <ul style="list-style-type: disc;"><li><p>将2.1的例子，将四个<code><div class="col"> <img src="https://img.php.cn/upload/image/569/508/978/1631529707575018.png" title="1631529707575018.png" alt="Bootstrap의 그리드 시스템에 대한 심층 분석"><p> <img src="https://img.php.cn/upload/image/677/573/414/163152971963671Bootstrap%EC%9D%98%20%EA%B7%B8%EB%A6%AC%EB%93%9C%20%EC%8B%9C%EC%8A%A4%ED%85%9C%EC%97%90%20%EB%8C%80%ED%95%9C%20%EC%8B%AC%EC%B8%B5%20%EB%B6%84%EC%84%9D" title="163152971963671Bootstrap의 그리드 시스템에 대한 심층 분석" alt="Bootstrap의 그리드 시스템에 대한 심층 분석"></p> <p> 2.1의 예를 들어 4개의 <code><div class="col">에 있는 col을 col-12로 대체하여 효과를 확인하세요. <h2> <strong></strong><img src="https://img.php.cn/upload/image/288/939/606/1631529713379410.png" title="1631529713379410.png" alt="Bootstrap의 그리드 시스템에 대한 심층 분석"> </h2> <p><strong><span style="font-size: 16px;"> 2.1의 예를 들어 4개의 <code><div class="col">에 있는 col을 col-8로 대체하여 효과를 확인하세요. <p></p> <p><strong>col-8로 설정해도 셀당 한 줄을 가질 수 있지만 텍스트는 화면의 12/8, 즉 2/3만 차지하므로 텍스트가 없으면 특별한 요구 사항이 있는 경우 각 행의 셀 값을 정확히 12에 더해 보세요. <span style="font-size: 18px;"></span></strong>3.부트스트랩 그리드 반응형 레이아웃</p> <p></p> <table> <tbody>3.1 반응형 레이아웃이란<tr class="firstRow"> <th><br></th>반응형 레이아웃이란 간단히 말하면 화면 크기가 다를 때 표시되는 페이지 레이아웃이 다르다는 의미입니다. 예를 들어, 휴대폰으로 보면 셀이 한 줄에 한 개만 있고, 태블릿으로 보면 셀이 한 줄에 두 개 있고, 컴퓨터로 보면 셀이 세 개 있어요. 부트스트랩은 이 기능을 쉽게 구현할 수 있습니다. <th><br></th> <th>3.2 부트스트랩 그리드 시스템의 화면 크기 구분 <br> </th> <th> <br>아래 표를 보시면 익숙하시죠? 실제로는 xs가 추가된 것 빼고는 정확히 브레이크포인트와 똑같습니다. 이므로 직접 생략할 수 있습니다. 보시다시피 Bootstrap은 5개의 중단점을 통해 화면을 6가지 크기 유형으로 나눕니다. </th> <th><br></th> <th><br></th> <th>xs<br> ≥576px</th> </tr>md<tr> ≥768px<td></td>lg<td> ≥992px</td> <td>xl</td> ≥1200px<td></td>xxl<td> ≥1400px</td> <td></td> <td>컨테이너 컨테이너</td> </tr>없음(자동)<tr> <td>540px</td> <td>720px<code>.col- .col-sm- .col-md- .col-lg- .col-xl- .col-xxl-960px 1140px🎜1320px🎜🎜🎜 🎜화면 크기 클래스 접두사 🎜🎜.col-🎜 🎜.col-sm-🎜🎜.col-md-🎜🎜.col-lg-🎜🎜.col-xl -🎜🎜.col-xxl-🎜🎜🎜🎜

3.3 부트스트랩 그리드 반응형 레이아웃 예제

2.1 예제를 사용하여 브라우저 창의 크기를 변경하여 효과를 확인합니다. 이 코드의 의미는 768px에서 행당 하나의 열(각 열)만 있다는 것입니다. 너비는 12 그리드), 768px

都换成

<div class="col-12 col-md-6 col-lg-4">
<p><img  src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d0d333468f544f4c93537e842e7d7db6~tplv-k3u1fbpfcp-watermark.awebp" alt="Bootstrap의 그리드 시스템에 대한 심층 분석" ></p>물론 포인트를 더 자세하게 변경하여 <code><div class="col-12 col-sm-6 col-md-4 col- md-3 col-lg-2">. <p><code><div class="col-12 col-sm-6 col-md-4 col-md-3 col-lg-2">。<p>在这里告诉你个小技巧，如果你想一行显示几列，宽度只就是用12除以几，哈哈，估计你也能想得到。</p>
<p><strong><span style="font-size: 18px;">3.4 如果你不想响应</span></strong></p>
<p>如果你想让所有的浏览器显示效果一致，都分为两列，也就是不想让它响应式显示，那么很简单，你把所有的屏幕下的栅格数设置相同的数值即可<code><div class="col-6 col-sm-6 col-md-6 col-md-6 col-lg-6 col-xl-6 col-xxl-6">한 줄에 여러 열을 표시하려면 너비를 12로 나누면 됩니다. 하하, 여러분도 생각해 볼 수 있을 것 같습니다. <blockquote>
<p></p>3.4 응답을 원하지 않는 경우 <p></p>
</blockquote>
<p> 모든 브라우저가 동일한 효과를 두 개의 열로 나누어 표시하도록 하려면, 즉 응답하지 않으려면 매우 간단합니다. 모든 화면을 다운로드할 수 있습니다. 래스터 수에 동일한 값을 설정하면 됩니다.<code><div class="col-6 col-sm-6 col-md-6 col-md-6 col-lg-6 col -xl-6 col-xxl -6">, 모든 화면에서 일관되게 사용할 수 있습니다. <a href="https://www.php.cn/course.html" target="_blank" textvalue="编程视频"></a>원본 주소: https://juejin.cn/post/6970846739293011998#heading-9🎜🎜저자: I Lao Liu🎜🎜🎜프로그래밍 관련 지식을 더 보려면 🎜프로그래밍 비디오🎜를 방문하세요! ! 🎜</div>