분류 bootstrap

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

컨텐츠 정보

  • 조회 3,355 (작성일 )

본문

부트스트랩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​

 

bootstrap부트스트랩3