Bootstrap圖像模板和分享按鈕

Question

我正在尋找這個圖像模板（1 *），但沒有找到任何東西。 Bootstrap中有這樣的課程嗎？

此外，什麼是創建共享按鈕（2 *）的最佳方式。

Answer 1

點1：如果您使用的自舉4：Bootstap 4 Component: Cards

點2：我建議從各自的編碼他們servicd自己（Facebook，微博等有小部件做這種事情）或可能使用類似的服務：Add This

Answer 2

Point＃1下面的腳本將適用於Bootstrap v3。 https://jsfiddle.net/wob917Lq

的Html & 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