2014年01月28日

ブートストラップ3でグリッドを使ってサムネイルを表示

ブートストラップ3のグリッドと.thumbnailクラスを使って簡単にサムネイルを表示する事が出来ます。
●デフォルトの使用方法

・.thumbnailクラスを使用


<div class="row">
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="img/test.jpg" alt="...">
</a>
</div>
<div class="col-xs-6 col-md-3">
   :
</div>


●ブートストラップ3での定義

.thumbnail {
display: block;
padding: 4px;
margin-bottom: 20px;
line-height: 1.428571429;
background-color: #ffffff;
border: 1px solid #dddddd;
border-radius: 4px;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}

.thumbnail > img,
.thumbnail a > img {
display: block;
height: auto;
max-width: 100%;
margin-right: auto;
margin-left: auto;
}

a.thumbnail:hover,
a.thumbnail:focus,
a.thumbnail.active {
border-color: #428bca;
}

.thumbnail .caption {
padding: 9px;
color: #333333;
}


●サンプルコード

<div class="row">
<div class="col-xs-12 col-sm-9">
<div class="row">
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="img/800x600.JPG" alt="Generic placeholder thumbnail">
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="img/800x600.JPG" alt="Generic placeholder thumbnail">
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="img/800x600.JPG" alt="Generic placeholder thumbnail">
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="img/800x600.JPG" alt="Generic placeholder thumbnail">
</a>
</div>
</div>
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="img/800x600.JPG" alt="Generic placeholder thumbnail">
<div class="caption">
<h3>サムネイルのラベル</h3>
<p>サムネイル画像の下の文章。<br />サムネイル画像の下の文章。サムネイル画像の下の文章。</p>
<p><a href="#" class="btn btn-primary" role="button">ボタン</a> <a href="#" class="btn btn-default" role="button">ボタン</a></p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="img/800x600.JPG" alt="Generic placeholder thumbnail">
<div class="caption">
<h3>サムネイルのラベル</h3>
<p>サムネイル画像の下の文章。<br />サムネイル画像の下の文章。サムネイル画像の下の文章。</p>
<p><a href="#" class="btn btn-primary" role="button">ボタン</a> <a href="#" class="btn btn-default" role="button">ボタン</a></p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="img/800x600.JPG" alt="Generic placeholder thumbnail">
<div class="caption">
<h3>サムネイルのラベル</h3>
<p>サムネイル画像の下の文章。<br />サムネイル画像の下の文章。サムネイル画像の下の文章。</p>
<p><a href="#" class="btn btn-primary" role="button">ボタン</a> <a href="#" class="btn btn-default" role="button">ボタン</a></p>
</div>
</div>
</div>
</div>

posted by ホノデザイン at 10:29| Comment(0) | ブートストラップ | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント: