Bootstrap(1) GRID

부트스트랩은 기본적으로 grid를 통해서 레이아웃을 잡습니다.

부트스트랩의 grid(격자)는 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-6</div>
      <div class="col-md-4">.col-md-6</div>
    </div>
    <div class="row">
      <div class="col-md-4">.col-md-8</div>
      <div class="col-md-4">.col-md-2</div>
      <div class="col-md-4">.col-md-2</div>
    </div>
    <div class="row">
      <div class="col-md-6">.col-md-5</div>
      <div class="col-md-6">.col-md-7</div>
    </div>
  </div>

container와 row는 지금은 신경쓰시지 않으셔도 됩니다.

이런식으로 12를 기준으로 격자를 구성하면 됩니다.

그리드는 그리드 내에서 중첩으로도 사용이 가능합니다.

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

이런식으로 가능합니다. 그리드 개념은 어렵지 않지만 부트스트랩을 사용함에 있어서 가장 중요하다고 생각됩니다. 

본인이 제작하고자하는 홈페이지의 레이아웃을 보이지않는 12개의 조각으로 나눈다음에 

적당한 방법으로 쪼갠다고 생각하면 편할거같습니다.