Bootstrap의 썸네일에 대한 자세한 설명

웹사이트에서 가장 일반적으로 사용되는 썸네일 위치는 제품 목록 페이지입니다. 여러 사진이 한 줄에 표시되며 일부 사진의 하단(왼쪽 또는 오른쪽)에는 제목, 설명 및 기타 정보가 있습니다. Bootstrap 프레임워크는 이 부분을 모듈 구성 요소로 분리합니다. 이 기사에서는 Bootstrap 썸네일을 자세히 소개합니다

Overview

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

썸네일의 중국어 번역은 썸네일인데, 중앙에 그림이 있고, 그림 주변에 작은 원이 있고, 테두리와 둥근 모서리가 있습니다. 외부 및 아래 텍스트

.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;
}

Custom content

썸네일만을 기준으로 "caption"이라는 컨테이너가 추가되고 이 컨테이너에 제목, 텍스트 설명, 버튼 등 기타 콘텐츠가 배치됩니다.

.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="/static/imghw/default1.png"  data-src="http://via.placeholder.com/100x100"  class="lazy"  " alt="#">
            </a>
            <div class="caption">
                <h3 id="小火柴的蓝色理想">小火柴的蓝色理想</h3>
                <p>好的代码像粥一样，都是用时间熬出来的</p>
                <p>
                    <a href="##" class="btn btn-primary">确认</a>
                    <a href="##" class="btn btn-info">取消</a>
                </p>
            </div> 
        </div>
        <div class="col-xs-6 col-md-3">
            <a href="#" class="thumbnail">
                <img src="/static/imghw/default1.png"  data-src="http://via.placeholder.com/100x100"  class="lazy"  " alt="#">
            </a>
            <div class="caption">
                <h3 id="小火柴的蓝色理想">小火柴的蓝色理想</h3>
                <p>好的代码像粥一样，都是用时间熬出来的</p>
                <p>
                    <a href="##" class="btn btn-primary">确认</a>
                    <a href="##" class="btn btn-info">取消</a>
                </p>
            </div> 
        </div>
        <div class="col-xs-6 col-md-3">
            <a href="#" class="thumbnail">
                <img src="/static/imghw/default1.png"  data-src="http://via.placeholder.com/100x100"  class="lazy"  " alt="#">
            </a>
            <div class="caption">
                <h3 id="小火柴的蓝色理想">小火柴的蓝色理想</h3>
                <p>好的代码像粥一样，都是用时间熬出来的</p>
                <p>
                    <a href="##" class="btn btn-primary">确认</a>
                    <a href="##" class="btn btn-info">取消</a>
                </p>
            </div> 
        </div>
        <div class="col-xs-6 col-md-3">
            <a href="#" class="thumbnail">
                <img src="/static/imghw/default1.png"  data-src="http://via.placeholder.com/100x100"  class="lazy"  " alt="#">
            </a>
            <div class="caption">
                <h3 id="小火柴的蓝色理想">小火柴的蓝色理想</h3>
                <p>好的代码像粥一样，都是用时间熬出来的</p>
                <p>
                    <a href="##" class="btn btn-primary">确认</a>
                    <a href="##" class="btn btn-info">取消</a>
                </p>
            </div> 
        </div>                
    </div>
</div>

프로그래밍 관련 지식을 더 보려면 프로그래밍 동영상을 방문하세요! !

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