Info Thumbnail

Table of contents

1. Thumbnail

Thumbnail

• class=”thumbnail” 을 지정하고 그리드 시스템과 결합하여 사용

     <div class="row">
     <div class="col-sm-6 col-md-3">
      <a href="#" class="thumbnail">
        <img src="DSC_6305.jpg" alt="...">
      </a>
     </div>
      <div class="col-sm-6 col-md-3">
      <a href="#" class="thumbnail">
        <img src="DSC_0374.jpg" alt="...">
      </a>
     </div>
      <div class="col-sm-6 col-md-3">
      <a href="#" class="thumbnail">
        <img src="DSC_5041.jpg" alt="...">
      </a>
     </div>
      <div class="col-sm-6 col-md-3">
      <a href="#" class="thumbnail">
        <img src="DSC_4999.jpg" alt="...">
      </a>
     </div>
     </div>
  

• class=”caption” 을 사용해서 제목과 내용 등 다른 요소들도 추가 가능

    <div class="caption">
        <h3>제목과 </h3>
        <p>내용도 넣을 수 있다.</p>
        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
    </div>