집 > 기사 > 웹 프론트엔드 > 부트스트랩에 그리드 레이아웃이 있나요?

부트스트랩에 그리드 레이아웃이 있나요?

WBOY원래의: 2022-06-16 11:10:132921검색

부트스트랩에는 그리드 레이아웃이 있습니다. 그리드 레이아웃은 행을 12개의 그리드로 나누고 레이아웃을 위해 12개의 그리드를 다른 div 요소에 할당하는 것을 의미합니다. 열 너비를 숫자로 설정하려면 모듈식 페이지 레이아웃은 열 수에 따라 정의됩니다.

이 튜토리얼의 운영 환경: Windows 10 시스템, 부트스트랩 버전 5, DELL G3 컴퓨터

부트스트랩에 그리드 레이아웃이 있나요?

부트스트랩에 그리드 레이아웃이 있나요?

1 . 그리드 레이아웃이란 무엇입니까?

과거에는 웹 페이지 레이아웃을 만들 때 테이블 레이아웃을 사용하여 웹 페이지를 테이블을 나누어 큰 테이블과 작은 테이블로 나눈 다음 테이블에서 요소를 채웠습니다. 나중에 div+css 레이아웃으로 발전했습니다. div+css를 통해 플로팅합니다. 부동:오른쪽 및 부동:왼쪽 레이아웃.

이제 부트스트랩은 그리드 레이아웃을 사용합니다. 간단히 말하면 행은 12개의 그리드로 나누어집니다. 레이아웃을 위해 서로 다른 DIV 요소에 12개의 그리드를 할당합니다.

Bootstrap에 그리드 레이아웃을 도입, 페이지를 테이블 형태의 레이아웃으로 분할
각 행은 12개의 열로 구성되며, 열의 너비는 해당 열이 차지하는 열 수를 설정하여 설정할 수 있습니다.
다양한 장치 너비에 해당하는 5가지 반응형 크기로 반응형 레이아웃 지원
Flexbox 흐름 레이아웃을 사용하여 페이지 레이아웃 구현
div를 사용하여 컨테이너, 행 및 열 레이아웃 구현

2. 그리드 레이아웃은 어떻게 구현하나요?

우선 부트스트랩, 웹팩 로딩, CND 레퍼런스 활용 등 다양한 방법이 있습니다. CDN에서 로컬 컴퓨터로 버전 3.37을 직접 다운로드했습니다. 그런 다음 link 태그를 통해 참조하십시오. 이는 Jquery를 참조하는 것과 유사합니다.

둘째, 레이아웃에 따라 그리드를 지정합니다. 예를 들어, 세 개의 열이 있는 큰 가로 레이아웃을 구현한다고 가정해 보겠습니다. 그런 다음 각 DIV에 12/3=4 그리드를 할당합니다.

세 열의 크기가 서로 다른 경우 왼쪽에 약 3개, 중간에 5개, 오른쪽에 4개의 그리드가 있습니다.

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>栅格布局</title>
  <!--  移动端优先-->
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <!--  引入bootstrap.css文件-->
  <link rel="stylesheet" href="css/bootstrap.css">
  <style>
    .row {
      border: 1px dashed #000;
      margin-top: 20px;
    }
    .col {
      border: 1px solid #0069d9;
      background: #f1b0b7;
    }
  </style>
</head>
<body>
<!--  不设置*的大小，默认平分列的宽度-->
<div>
  <div>
    <div class="col col-sm">第一列</div>
    <div class="col col-sm">第二列</div>
    <div class="col col-sm">第三列</div>
  </div>
</div>
<!--设置container-fluid默认占满宽度-->
<div>
  <div>
    <div class="col col-sm">第一列</div>
    <div class="col col-sm">第二列</div>
    <div class="col col-sm">第三列</div>
  </div>
</div>
<!--当设置*的大小时，默认按照比例分割宽度-->
<div>
  <div>
    <div class="col col-sm-5">第一列</div>
    <div class="col col-sm-2">第二列</div>
    <div class="col col-sm-5">第三列</div>
  </div>
</div>
<!--小于12时，会出现空白区域-->
<div>
  <div>
    <div class="col col-sm-3">第一列</div>
    <div class="col col-sm-2">第二列</div>
    <div class="col col-sm-3">第三列</div>
  </div>
</div>
<!--当超出12时，会自动换行-->
<div>
  <div>
    <div class="col col-sm-5">第一列</div>
    <div class="col col-sm-5">第二列</div>
    <div class="col col-sm-7">第三列</div>
  </div>
</div>
<!--首先引入jQuery文件，再引入poper文件，最后引入bootstrap文件-->
<script src="js/jquery.slim.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.js"></script>
</body>
</html>

3. 그리드 레이아웃 클래스 매개변수

그리드 클래스에는 col-lg-1, col-md가 4개 있습니다. -1, col-sm-1, col-xs-1은 각각 대형 화면(large) 및 중형 화면(middl), 작은 화면(smll), 매우 작은 화면(xs)에 해당합니다. 그 중 col은 Column을 뜻하고 가운데는 size의 약어, 마지막은 div가 할당한 그리드 크기(예는 1/12)

부트스트랩에 그리드 레이아웃이 있나요?

부트스트랩에 그리드 레이아웃이 있나요?

관련 기사