Bootstrapのサムネイルの詳しい説明

Web サイト上でサムネイルが最もよく使用されるのは商品一覧ページで、複数の写真が 1 行に表示され、下部にタイトルや説明などが記載されているものもあります (左)または右）画像の情報。 Bootstrap フレームワークは、この部分をモジュール コンポーネントに分割します。この記事では、Bootstrap サムネイルについて詳しく紹介します。

概要

Bootstrap サムネイルのデフォルトのデザインには、最小限のものだけが必要ですタグの数。リンク付きの画像を表示し、「サムネイル」スタイルとブートストラップのグリッド システムを通じてサムネイルを実現できます。円は空白で、外側に境界線と丸い角があり、その下のテキストは

.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;
}

カスタム コンテンツ

サムネイルのみに基づいて、「キャプション」という名前の pContainer に、タイトル、テキスト説明、ボタンなどの他のコンテンツをこのコンテナに配置します。

.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="/static/imghw/default1.png"  data-src="http://via.placeholder.com/100x100"  class="lazy"  " alt="#">
            </a>
            <div class="caption">
                <h3 id="小火柴的蓝色理想">小火柴的蓝色理想</h3>
                <p>好的代码像粥一样，都是用时间熬出来的</p>
                <p>
                    <a href="##" class="btn btn-primary">确认</a>
                    <a href="##" class="btn btn-info">取消</a>
                </p>
            </div> 
        </div>
        <div class="col-xs-6 col-md-3">
            <a href="#" class="thumbnail">
                <img src="/static/imghw/default1.png"  data-src="http://via.placeholder.com/100x100"  class="lazy"  " alt="#">
            </a>
            <div class="caption">
                <h3 id="小火柴的蓝色理想">小火柴的蓝色理想</h3>
                <p>好的代码像粥一样，都是用时间熬出来的</p>
                <p>
                    <a href="##" class="btn btn-primary">确认</a>
                    <a href="##" class="btn btn-info">取消</a>
                </p>
            </div> 
        </div>
        <div class="col-xs-6 col-md-3">
            <a href="#" class="thumbnail">
                <img src="/static/imghw/default1.png"  data-src="http://via.placeholder.com/100x100"  class="lazy"  " alt="#">
            </a>
            <div class="caption">
                <h3 id="小火柴的蓝色理想">小火柴的蓝色理想</h3>
                <p>好的代码像粥一样，都是用时间熬出来的</p>
                <p>
                    <a href="##" class="btn btn-primary">确认</a>
                    <a href="##" class="btn btn-info">取消</a>
                </p>
            </div> 
        </div>
        <div class="col-xs-6 col-md-3">
            <a href="#" class="thumbnail">
                <img src="/static/imghw/default1.png"  data-src="http://via.placeholder.com/100x100"  class="lazy"  " alt="#">
            </a>
            <div class="caption">
                <h3 id="小火柴的蓝色理想">小火柴的蓝色理想</h3>
                <p>好的代码像粥一样，都是用时间熬出来的</p>
                <p>
                    <a href="##" class="btn btn-primary">确认</a>
                    <a href="##" class="btn btn-info">取消</a>
                </p>
            </div> 
        </div>                
    </div>
</div>

プログラミング関連の知識について詳しくは、

プログラミング ビデオ

をご覧ください。 ！

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