[bootstrap] 画面サイズ 12分割CSSメモ

公開日:2015年5月19日
モバイル(767px以下) エクストラスモール=xs col-xs-*
タブレット(768px以上、991px未満) スモール=sm col-sm-*
デスクトップ(992px以上、1199px未満) ミディアム=md col-md-*
デスクトップ(1200px以上) ラージ=lg col-lg-*

bootstrapの12分割HTML例

サムネイルの大きさを画面幅によって変える

<!-- rowで囲む-->
<div class="row">

<div class="col-xs-12 col-sm-4 col-md-3 col-lg-2">
~サムネイル1~
</div>

<div class="col-xs-12 col-sm-4 col-md-3 col-lg-2">
~サムネイル2~
</div>

<div class="col-xs-12 col-sm-4 col-md-3 col-lg-2">
~サムネイル3~
</div>

<div class="col-xs-12 col-sm-4 col-md-3 col-lg-2">
~サムネイル4~
</div>

</div>
<!-- /rowで囲む-->