티스토리 뷰

Client Technologies/Bootstrap

Bootstrap : Grid Layout

Korean Eagle 2020. 6. 2. 04:08
728x90

0. Grid layout은 부트스트랩의 기본적인 레이아웃 설계 도구이다.

  0-1 grid layout은 무조건 .container안에 배치되어야 한다.

  0-2 한 줄을 12로 나누어 필요한 만큼 배치를 한다.

  0-3 값을 생략하면 나머지 공간을 공유하게 된다.

 

1. 기본적인 공간 설정

  1-0 row, col class를 가지고 있다.

  1-1 row는 하나의 행을 말하고 하나의 행안에 여러 개의 열이 배치된다.

  1-2 열의 크기는 0번 항목의 12등분한 공간을 지정하여 설정한다. col-8 이면 8/12공간을 차지한다.

  1-3 가장 기본적인 레이아웃의 예시는 아래와 같다.

 

<div class="container">
  <div class="row">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
</div>

 

  1-5 column의 공간설정에 대한  예시들이다.

 

<body>
  <div class="display-2">Grid Basics</div>
  <div class="container">
    <h1>Demo with text</h1>
    <div class="row">
      <div class="col-8 bg-success text-white">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Commodi
        dignissimos fugiat illo, quisquam tempora aut dicta similique nisi iure. Quam nemo laborum, asperiores cum
        delectus magni est perferendis incidunt aliquam!</div>
      <div class="col-4">
        <div class="nav flex-column">
          <a href="#" class="nav-link">Home</a>
          <a href="#" class="nav-link">About</a>
          <a href="#" class="nav-link">Contact</a>
          <a href="#" class="nav-link">Product</a>
        </div>
      </div>
    </div>
    <div class="row border">
      <div class="col bg-primary text-white" style="height: 200px;">First</div>
      <div class="col bg-info text-white" style="height: 200px;">Second</div>
      <div class="col bg-danger text-white" style="height: 200px;">Third</div>
      <div class="col bg-warning text-white" style="height: 200px;">Fourth</div>
    </div>

    <div class="row border">
      <div class="col bg-primary text-white" style="height: 200px;">First</div>
      <div class="col bg-info text-white" style="height: 200px;">Second</div>
    </div>

    <h1>Custome Widths</h1>
    <div class="row border">
      <div class="col-4 bg-danger text-white" style="height: 200px;">4</div>
      <div class="col-8 bg-info text-whilte" style="height: 200px;">8</div>
    </div>
    <div class="row border">
      <div class="col bg-danger text-white" style="height: 200px;">2</div>
      <div class="col-8 bg-info text-whilte" style="height: 200px;">8</div>
      <div class="col bg-danger text-white" style="height: 200px;">2</div>
    </div>
  </div>

 

2. 반응형 설정은 Responsive breakpoint를 이용하여 설정한다.

  2-1 .col-sm-8 이런 식의 설정을 사용한다.

    2-1-1 이 경우 sm 이상의 width에 8/12의 공간을 사용하라는 의미다.

    2-1-2 그리고 sm보다 작은 사이즈는 div block element 특성대로 12를 다 차지한다.

  2-2 아래 50% 50%는 md 보다 작을 경우 두 컬럼은 전체 넓이를 다 차지하지만

    2-2-1 md 이상 일 때 8:4  xl일 때 10:2의 비율로 변경된다.

  2-3 두 번째 Responsive layout의 경우 기본 3:6:3인데 md보다 클경우 1:10:1로 변경된다.

  2-4 마지막 블록은 3개의 column이 기본적으로 3개의 줄로 표시되지만 md보다 클 경우 2:6:4로 변경된다.

 

  <div class="container">
    <h1>50% 50%</h1>
    <div class="row">
      <div class="col-md-8 col-xl-10  border rounded">
        <h1>Blog Post</h1>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum maxime neque ducimus veritatis a, minima dicta
          doloremque incidunt pariatur, excepturi quas ipsam maiores vel sequi optio provident explicabo. Reiciendis,
          dolorem.</p>
      </div>
      <div class="col-md-4 col-xl-2 bg-light">
        <div class="nav">
          <div class="nav-link">June 2020</div>
          <div class="nav-link">July 2020</div>
          <div class="nav-link">August 2020</div>
          <div class="nav-link">September 2020</div>
          <div class="nav-link">October 2020</div>
          <div class="nav-link">November 2020</div>
        </div>
      </div>
    </div>

    <h4>Responsive Layout (3->1, 6->10, md)</h4>
    <div class="row border" style="height: 200px;">
      <div class="col-3 col-md-1 bg-info" style="height: 200px;"></div>
      <div class="col-6 col-md 10 bg-success" style="height: 200px;"></div>
      <div class="col-3 col-md-1 bg-info" style="height: 200px;"></div>
    </div>
    
    <h5>Responsive Layout (12->2,12->6,12->4  md)</h5>
    <div class="row border" style="height: 100px;">
      <div class="col-md-2 bg-info" style="height: 100px;"></div>
      <div class="col-md 6 bg-success" style="height: 100px;"></div>
      <div class="col-md-4 bg-info" style="height: 100px;"></div>
    </div>

  </div>
728x90
저작자표시

'Client Technologies > Bootstrap' 카테고리의 다른 글

Bootstrap : jsp table List template  (0) 2020.06.07
Bootstrap : jsp form input template  (0) 2020.06.07
Bootstrap : Responsive Breakpoint, Display  (0) 2020.06.02
Bootstrap : Alert  (0) 2020.06.01
BootStrap : Template  (0) 2020.06.01
댓글