image
image 클래스 종류
[모양]
.img-rounded : 곡선 이미지 (= 꼭지점이 둥근 이미지)
.img-circle : 원형 이미지
.img-thumbnail : 액자 이미지 (= 액자처럼 테두리 있는 이미지)
IE9 이상 곡선・원형 이미지 지원.
[반응형]
.img-responsive : 반응형 이미지 (속성값: display: block; max-width: 100%; height: auto;)
※ IE 8-10에서 .img-responsive와 SVG 이미지 불균형 해결: width: 100% \9; 추가.
※ BS는 다른 이미지 포멧에 문제 일으킬 여지 있어 자동 적용 배제된 상태.
[중앙정렬]
.text-center : 일반이미지 중앙정렬
.center-block : .img-responsive 반응형 이미지 중앙 정렬
image 모양
<img src="..." class="img-rounded" alt="곡선 이미지" >
<img src="..." class="img-circle" alt="원형 이미지">
<img src="..." class="img-thumbnail" alt="액자 이미지" >
image 반응형
<img src="..." class="img-responsive" alt="반응형 이미지">
image 썸네일 갤러리
<div class="row">
<div class="col-md-4">
<div class="thumbnail">
<a href="링크주소">
<img src="이미지주소" alt="이미지이름" style="width:100%">
<div class="caption">
<p>제목</p>
</div>
</a>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<a href="링크주소">
<img src="이미지주소" alt="이미지이름" style="width:100%">
<div class="caption">
<p>제목</p>
</div>
</a>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<a href="링크주소">
<img src="이미지주소" alt="이미지이름" style="width:100%">
<div class="caption">
<p>제목</p>
</div>
</a>
</div>
</div>
</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: border .2s ease-in-out;
-o-transition: border .2s ease-in-out;
transition: border .2s ease-in-out;
}
video
<iframe> <embed> <video> <object> 반응형영상
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
[참고]
.embed-responsive-16by9 : 16:9 영상
.embed-responsive-4by3 : 4:3 영상
