[Bootstrap]offset(그리드 사이 공백), 레이아웃 만들기

그리드 사이를 분리할 수 있다

오프셋까지 합쳐서 12열 안에 들지 않으면 다음줄로 개행되어 표현된다

형식) col-md(xs,sm,lg)-offset-n

 

<h4 class="text-primary text-center">offset</h4>
  <div class="container">
    <div class="row">
      <div class="col-md-5">.col-md-5</div>
      <div class="col-md-5 col-md-offset-2">.col-md-5 col-md-offset-2</div>
    </div>
  </div>

 

 

---

그리드 시스템을 이용하여 페이지를 상단, 메뉴, 본문, 하단으로 나누기

그리드 시스템을 이용하여 레이아웃을 만들고 스타일을 적절히 적용하여 구분할 수 있도록 한다

 

   <div class="container">
      <header>
         <h2 class="text-success">상단</h2>
      </header>
   <div class='row'>
   		<div class="col-md-2">
   			<ul class="nav">
   				<li>1</li>
   				<li>2</li>
   				<li>3</li>
   			</ul>
   		</div>
   		<div class="col-md-5 col-md-offset-1">
   		<p>
	    	<h3>본문</h3>
        </p>
   		</div>
   		<div class="col-md-2 col-md-offset-1">
   			<div class="banner"><h3>배너</h3></div>
   		</div>
   </div>
   <footer>
   		<h3>하단</h3>
   </footer>
   </div>