부트스트랩 썸네일
이 장에서는 부트스트랩 썸네일에 대해 설명합니다. 대부분의 사이트에서는 이미지, 비디오, 텍스트 등을 그리드에 배치해야 합니다. 부트스트랩은 썸네일을 통해 이를 수행하는 쉬운 방법을 제공합니다. Bootstrap을 사용하여 썸네일을 만드는 단계는 다음과 같습니다.
이미지 주위에 .thumbnail 클래스가 있는 <a> 태그를 추가합니다.
이렇게 하면 4픽셀의 패딩과 회색 테두리가 추가됩니다.
이미지 위에 마우스를 올리면 이미지의 윤곽이 애니메이션됩니다.
아래 예는 기본 썸네일을 보여줍니다.
Instance
<!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 缩略图</title> <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script> </head> <body> <div class="row"> <div class="col-sm-6 col-md-3"> <a href="#" class="thumbnail"> <img src="../style/images/kittens.jpg" alt="通用的占位符缩略图"> </a> </div> <div class="col-sm-6 col-md-3"> <a href="#" class="thumbnail"> <img src="../style/images/kittens.jpg" alt="通用的占位符缩略图"> </a> </div> <div class="col-sm-6 col-md-3"> <a href="#" class="thumbnail"> <img src="../style/images/kittens.jpg" alt="通用的占位符缩略图"> </a> </div> <div class="col-sm-6 col-md-3"> <a href="#" class="thumbnail"> <img src="../style/images/kittens.jpg" alt="通用的占位符缩略图"> </a> </div> </div> </body> </html>
인스턴스 실행»
온라인 예를 보려면 "인스턴스 실행" 버튼을 클릭하세요
다음에서 추가 정의 콘텐츠
이제 기본 썸네일이 있으므로 제목, 단락, 버튼 등 다양한 HTML 콘텐츠를 썸네일에 추가할 수 있습니다. 구체적인 단계는 다음과 같습니다.
클래스 .thumbnail의 <a> 태그를 <div>로 변경합니다.
<div> 안에 원하는 것을 추가할 수 있습니다. 이는 <div>이므로 크기 조정에 기본 범위 기반 명명 규칙을 사용할 수 있습니다.
여러 이미지를 그룹화하려면 각 목록 항목이 왼쪽에 떠 있도록 순서 없이 목록에 배치하세요.
다음 예에서는 이를 보여줍니다.
Instance
<div class="row"> <div class="col-sm-6 col-md-3"> <div class="thumbnail"> <img src="../style/images/kittens.jpg" alt="通用的占位符缩略图"> <div class="caption"> <h3>缩略图标签</h3> <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="../style/images/kittens.jpg" alt="通用的占位符缩略图"> <div class="caption"> <h3>缩略图标签</h3> <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="../style/images/kittens.jpg" alt="通用的占位符缩略图"> <div class="caption"> <h3>缩略图标签</h3> <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="../style/images/kittens.jpg" alt="通用的占位符缩略图"> <div class="caption"> <h3>缩略图标签</h3> <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>
인스턴스 실행»
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요.
결과는 다음과 같습니다.
