부트 스트랩 이미지 템플릿 및 공유 버튼

Question

이 이미지 템플릿 (1 *)을 찾고 있지만 아무것도 찾지 못했습니다. 부트 스트랩에이 클래스가 있습니까?

또한 공유 버튼 (2 *)을 만드는 가장 좋은 방법은 무엇입니까?

Answer 1

포인트 1 : Bootstap 4 Component: Cards

포인트 2 : 당신의 부트 스트랩 4를 사용하는 경우 자신을 servicd 나는 각에서 그들을 코딩 추천 할 것입니다 가능성 또는 (페이스 북, 트위터 등 이런 종류의 일을 수행하는 위젯이) Add This

Answer 2

포인트 # 1 아래의 스크립트는 부트 스트랩 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