분류
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
- 이전글반응형에서 이미지 사이즈 14.11.11
- 다음글반응형 구현을 위해서 사용되는 부트스트랩 클래스들 14.11.04