댓글 검색 목록

[bootstrap] 부트스트랩3 그리드 시스템

페이지 정보

작성자 운영자 작성일 14-11-04 08:45 조회 4,758 댓글 0

부트스트랩3 그리드 시스템 이해

 

<div class="row">

	<div class="col-md-6 col-lg-3">
		<div class="visible-lg text-success">Large Devices!</div>
		<div class="visible-md text-warning">Medium Devices!</div>
		<div class="visible-xs visible-sm text-danger">Extra Small and Small Devices</div>
	</div>
	<div class="col-md-6 col-lg-3">
		<div class="visible-lg text-success">Large Devices!</div>
		<div class="visible-md text-warning">Medium Devices!</div>
		<div class="visible-xs visible-sm text-danger">Extra Small and Small Devices</div>
	</div>
	<div class="col-md-6 col-lg-3">
		<div class="visible-lg text-success">Large Devices!</div>
		<div class="visible-md text-warning">Medium Devices!</div>
		<div class="visible-xs visible-sm text-danger">Extra Small and Small Devices</div>
	</div>	
	<div class="col-md-6 col-lg-3">
		<div class="visible-lg text-success">Large Devices!</div>
		<div class="visible-md text-warning">Medium Devices!</div>
		<div class="visible-xs visible-sm text-danger">Extra Small and Small Devices</div>
	</div>	 

</div> 

 

 

부트스트랩3 반응형 이해

<div class="row">

	<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
		I'm content!
	</div>
	<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
		I'm content!
	</div>
	<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
		I'm content!
	</div>
	<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
		I'm content!
	</div>
	<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
		I'm content!
	</div>
	<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 visible-lg">
		I'm content only visible on large devices!
	</div> 

</div> 

 

데모 : http://www.365ok.co.kr/bootstrap/gridsystem.html

 

댓글목록 0

등록된 댓글이 없습니다.

웹학교 로고

온라인 코딩학교

코리아뉴스 2001 - , All right reserved.