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

この章では、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>

カスタムコンテンツ

のテキストがあります-only 基本的に、「caption」という名前の div コンテナが追加され、タイトル、テキスト説明、ボタンなどの他のコンテンツがこのコンテナに配置されます。

以上がBootstrap サムネイルの詳細な紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。