Bootstrap图像模板＆amp;分享按钮

Question

我正在寻找这个图片模板（1 *），但没有找到任何东西。在Bootstrap中是否有一个类？

此外，创建共享按钮（2 *）的最佳方法是什么。

Answer 1

第1点：如果你使用bootstrap 4：Bootstap 4 Component: Cards

第2点：我建议你自己编写各自的服务（facebook，twitter等有小工具来做这类事情），或者可能使用像Add This这样的服务

Answer 2

第1点下面的脚本适用于Bootstrap v3。 https://jsfiddle.net/wob917Lq

Html＆amp; CSS `

  <div class="row">

    <div class="col-xs-3">
      <div class="thumbnail">
        <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=500%C3%97330&w=500&h=330" alt="">
          <div class="caption">
            <h4>Thumbnail label</h4>
        </div>
      </div>
    </div>

    <div class="col-xs-3">
      <div class="thumbnail">
        <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=500%C3%97330&w=500&h=330" alt="">
          <div class="caption">
            <h4>Thumbnail label</h4>
        </div>
      </div>
    </div>

    <div class="col-xs-3">
      <div class="thumbnail">
        <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=500%C3%97330&w=500&h=330" alt="">
          <div class="caption">
            <h4>Thumbnail label</h4>
        </div>
      </div>
    </div>

    <div class="col-xs-3">
      <div class="thumbnail">
        <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=500%C3%97330&w=500&h=330" alt="">
          <div class="caption">
            <h4>Thumbnail label</h4>
        </div>
      </div>
    </div>

  </div><!-- End row -->

</div><!-- End container -->` `<style type="text/css">
.thumbnail {
    position: relative;
    padding: 0px;
    margin-bottom: 20px;
 }
.thumbnail img {
    width: 100%;
 }
.caption{
  background: black;
  color: white ! important;
  text-align: center;
 }</style>`

第2点请检查此链接https://www.sharethis.com