분류 bootstrap

반응형페이지 처리방법

컨텐츠 정보

  • 조회 3,667 (작성일 )

본문

부트스트랩을 이용한 반응형페이지 처리 방식입니다.

 

HEAD부분:

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> 

 

BODY부분:

<div class="container">

 

<div class="jumbotron">

<h1>CSS Responsive Layout</h1>

<p>브라우저의 폭을 줄였다 넓혔다 해보세요.</p>

</div>

 

<div class="row">

<div class="col-md-4">

<h2>온라인 강좌 학교</h2>

<p>홈페이지제작에 필요한 다양한 기술 교육</p>

<p>300여가지의 무료온라인 교육</p>

</div>

 

<div class="col-md-4">

<h2>꼭 필요한 유료강좌</h2>

<p>그누보드5강좌</p>

<p>PHP강좌</p>

<p>앱강좌</p>

<p>.....</p>

<P>365ok에서만 맛볼 수 있는 풍부한 웹강좌</p>

</div>

 

<div class="col-md-4">

<h2>TJ빌더</h2>

<p>TJ빌더는 그누보드의 반응형 프로젝트입니다.</p>

<p>TJ시리즈...</p>

</div>

</div>

</div> 

 

미리보기:

http://365ok.co.kr/dn/bootstrap/responsivepage.html