English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
이 장은 Bootstrap 썸네일을 설명합니다. 대부분의 사이트는 그리드에서 이미지, 비디오, 텍스트 등을 레이아웃하는 것이 필요합니다. Bootstrap는 이를 쉽게 할 수 있는 방법을 제공합니다. Bootstrap를 사용하여 썸네일을 만드는 단계는 다음과 같습니다：
class로 가진 것을 이미지 주위에 추가하세요 .thumbnail 의 <a> 태그.
이는 네 픽셀의 내간격(padding)과 회색의 경계선을 추가합니다.
마우스가 이미지 위에 올라가면, 이미지의 경계선이 애니메이션으로 표시됩니다.
아래의 예제는 기본적인 썸네일을 보여줍니다：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap 예제 - 썸네일</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="row"> <div class="col-sm-6 col-md-3"> <a href="#" class="thumbnail"> <img src="/run/images/kittens.jpg" alt="통용의 대체 썸네일 미니어처"> </a> </div> <div class="col-sm-6 col-md-3"> <a href="#" class="thumbnail"> <img src="/run/images/kittens.jpg" alt="통용의 대체 썸네일 미니어처"> </a> </div> <div class="col-sm-6 col-md-3"> <a href="#" class="thumbnail"> <img src="/run/images/kittens.jpg" alt="통용의 대체 썸네일 미니어처"> </a> </div> <div class="col-sm-6 col-md-3"> <a href="#" class="thumbnail"> <img src="/run/images/kittens.jpg" alt="통용의 대체 썸네일 미니어처"> </a> </div> </div> </body> </html>테스트해 보세요 ‹/›
결과는 다음과 같습니다:
지금 우리는 기본적인 썸네일을 가지고 있습니다. 썸네일에 다양한 HTML 내용을 추가할 수 있습니다. 예를 들어, 제목, 구절, 버튼 등. 구체적인 단계는 다음과 같습니다：
class로 가진 것을 가져오세요 .thumbnail 의 <a> 태그를 <div>로 변경하세요.
이 <div> 내에서, 추가하고 싶은 모든 것을 추가할 수 있습니다. 이는 <div>이기 때문에, 기본적인 span 기반의 이름 규칙을 사용하여 크기를 조정할 수 있습니다.
여러 이미지를 그룹화하려면, 그들을 비열리스트에 배치하고, 각 목록 항목을 왼쪽으로 플로팅하세요.
아래의 예제는 이를 보여줍니다：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap 예제 - 커스터마이징된 썸네일</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="row"> <div class="col-sm-6 col-md-3"> <div class="thumbnail"> <img src="/run/images/kittens.jpg" alt="통용의 대체 썸네일 미니어처"> <div class="caption"> <h2>스케일 태그</h2> <p>일부 예제 텍스트. 일부 예제 텍스트.</p> <p> <a href="#" class="btn btn-primary" role="button"> 버튼 </a> <a href="#" class="btn btn-default" role="button"> 버튼 </a> </p> </div> </div> </div> <div class="col-sm-6 col-md-3"> <div class="thumbnail"> <img src="/run/images/kittens.jpg" alt="통용의 대체 썸네일 미니어처"> <div class="caption"> <h2>스케일 태그</h2> <p>일부 예제 텍스트. 일부 예제 텍스트.</p> <p> <a href="#" class="btn btn-primary" role="button"> 버튼 </a> <a href="#" class="btn btn-default" role="button"> 버튼 </a> </p> </div> </div> </div> <div class="col-sm-6 col-md-3"> <div class="thumbnail"> <img src="/run/images/kittens.jpg" alt="통용의 대체 썸네일 미니어처"> <div class="caption"> <h2>스케일 태그</h2> <p>일부 예제 텍스트. 일부 예제 텍스트.</p> <p> <a href="#" class="btn btn-primary" role="button"> 버튼 </a> <a href="#" class="btn btn-default" role="button"> 버튼 </a> </p> </div> </div> </div> <div class="col-sm-6 col-md-3"> <div class="thumbnail"> <img src="/run/images/kittens.jpg" alt="통용의 대체 썸네일 미니어처"> <div class="caption"> <h2>스케일 태그</h2> <p>일부 예제 텍스트. 일부 예제 텍스트.</p> <p> <a href="#" class="btn btn-primary" role="button"> 버튼 </a> <a href="#" class="btn btn-default" role="button"> 버튼 </a> </p> </div> </div> </div> </div> </body> </html>테스트해 보세요 ‹/›
결과는 다음과 같습니다: