Bootstrap サムネイルの詳細な紹介-htmlチュートリアル-php.cn

Bootstrap サムネイルの詳細な紹介

零下一度

リリース： 2017-07-18 16:42:17

オリジナル

1688 人が閲覧しました

この章では、Bootstrap のサムネイルについて説明します。 ほとんどのサイトでは、画像、ビデオ、テキストなどをグリッド内にレイアウトする必要があります。 Bootstrap では、サムネイルを使用してこれを簡単に実行できます。 Bootstrap を使用してサムネイルを作成する手順は次のとおりです:

画像の周囲にクラス .thumbnail を含むタグを追加します。

これにより、4 ピクセルのパディングと灰色の境界線が追加されます。

画像の上にマウスを置くと、画像の輪郭がアニメーションします。

概要

Boosttrap サムネイルのデフォルトのデザインでは、リンクされた画像を表示するために最小限のタグのみが必要です。サムネイルは、「サムネイル」スタイルとブートストラップのグリッドシステムによって実現されます

サムネイルの中国語訳はサムネイルで、確かに少し似ています。サムネイル、中央に画像、画像の周りに小さな円の空白、外側に枠線と丸い角、そしてサムネイルの下に

.thumbnail {
  display: block;
  padding: 4px;
  margin-bottom: 20px;
  line-height: 1.42857143;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  -webkit-transition: all .2s ease-in-out;  transition: all .2s ease-in-out;
}.thumbnail > img,
.thumbnail a > img {
  margin-right: auto;
  margin-left: auto;
}a.thumbnail:hover,
a.thumbnail:focus,
a.thumbnail.active {
  border-color: #428bca;
}.thumbnail .caption {
  padding: 9px;
  color: #333;
}

ログイン後にコピー

<div class="container"><div class="row"><div class="col-xs-6 col-md-3"><a href="#" class="thumbnail"><img src="http://via.placeholder.com/100x100"" alt="#"></a></div><div class="col-xs-6 col-md-3"><a href="#" class="thumbnail"><img src="http://via.placeholder.com/100x100"" alt="#"></a></div><div class="col-xs-6 col-md-3"><a href="#" class="thumbnail"><img src="http://via.placeholder.com/100x100"" alt="#"></a></div><div class="col-xs-6 col-md-3"><a href="#" class="thumbnail"><img src="http://via.placeholder.com/100x100"" alt="#"></a></div></div></div>

ログイン後にコピー