Bootstrap 썸네일에 대한 자세한 소개

이 장에서는 부트스트랩 썸네일에 대해 설명합니다. 대부분의 사이트는 이미지, 비디오, 텍스트 등을 그리드에 배치해야 합니다. 부트스트랩은 썸네일을 통해 이를 수행하는 쉬운 방법을 제공합니다. Bootstrap을 사용하여 썸네일을 만드는 단계는 다음과 같습니다.

이미지 주위에 .thumbnail 클래스가 있는 태그를 추가합니다.

이렇게 하면 4픽셀의 패딩과 회색 테두리가 추가됩니다.

이미지 위에 마우스를 올리면 이미지의 윤곽이 애니메이션됩니다.

개요

Boosttrap 썸네일의 기본 디자인은 연결된 이미지를 표시하기 위해 최소한의 태그만 필요합니다. 썸네일은 "썸네일" 스타일과 부트스트랩의 그리드 시스템을 통해 구현됩니다.

썸네일의 중국어 번역은 썸네일인데 실제로는 약간 Like입니다. 미리보기 이미지에는 중앙에 그림이 있고, 그림 주위에 작은 원의 공백이 있고, 외부에 테두리와 둥근 모서리가 있고, 아래에 텍스트가 있습니다. -only 기본적으로 "caption"이라는 div 컨테이너가 추가되고 이 컨테이너에 제목, 텍스트 설명, 버튼 등의 기타 콘텐츠가 배치됩니다.

.thumbnail {
  display: block;
  padding: 4px;
  margin-bottom: 20px;
  line-height: 1.42857143;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  -webkit-transition: all .2s ease-in-out;  transition: all .2s ease-in-out;
}.thumbnail > img,
.thumbnail a > img {
  margin-right: auto;
  margin-left: auto;
}a.thumbnail:hover,
a.thumbnail:focus,
a.thumbnail.active {
  border-color: #428bca;
}.thumbnail .caption {
  padding: 9px;
  color: #333;
}

<div class="container"><div class="row"><div class="col-xs-6 col-md-3"><a href="#" class="thumbnail"><img src="http://via.placeholder.com/100x100"" alt="#"></a></div><div class="col-xs-6 col-md-3"><a href="#" class="thumbnail"><img src="http://via.placeholder.com/100x100"" alt="#"></a></div><div class="col-xs-6 col-md-3"><a href="#" class="thumbnail"><img src="http://via.placeholder.com/100x100"" alt="#"></a></div><div class="col-xs-6 col-md-3"><a href="#" class="thumbnail"><img src="http://via.placeholder.com/100x100"" alt="#"></a></div></div></div>

위 내용은 Bootstrap 썸네일에 대한 자세한 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!