정보실

웹학교

정보실

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

본문

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

 

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

페이지 정보

조회 1,552회 ]  작성일14-11-04 08:45

웹학교