정보실

웹학교

정보실

bootstrap 반응형페이지 처리방법

본문

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

 

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 

  • 트위터로 보내기
  • 페이스북으로 보내기
  • 구글플러스로 보내기
  • 카카오톡으로 보내기

페이지 정보

조회 358회 ]  작성일15-04-30 15:55

웹학교