Bootstrap 이미지 모양
둥근 모서리 :
원:
미리보기 :
둥근 모서리
.img-rounded 클래스 (IE8은 둥근 모서리를 지원하지 않습니다) 이미지에 둥근 모서리를 추가합니다 :
예
<img src="cinqueterre.jpg" class="img-rounded" alt="Cinque Terre"
width="304" height="236"> »그것을 자신을 시도 원
.img-circle 클래스는 원 (IE8은 둥근 모서리를 지원하지 않습니다)에 이미지를 모양 :
예
<img src="cinqueterre.jpg" class="img-circle" alt="Cinque Terre"
width="304" height="236"> »그것을 자신을 시도 미리보기
.img-thumbnail 클래스는 축소판 이미지를 모양 :
예
<img src="cinqueterre.jpg" class="img-thumbnail" alt="Cinque Terre"
width="304" height="236"> »그것을 자신을 시도 응답 이미지
이미지는 모든 크기로 제공됩니다. 그래서 화면을한다. 응답하여 이미지를 자동으로 화면 크기에 맞도록 조정한다.
가산하여 반응 이미지를 만들기 .img-responsive 받는 클래스를 <img> 태그입니다. 화상은 부모 요소로 잘 확장된다.
.img-responsive 클래스는 적용 display: block; 및 max-width: 100%; 및 height: auto; 이미지에 :
이미지 갤러리
당신은 또한 사용할 수있는 Bootstrap's 과 함께 그리드 시스템을 .thumbnail 이미지 갤러리를 만들 클래스 :
예
<div class="row">
<div class="col-md-4">
<a href="pulpitrock.jpg" class="thumbnail">
<p>Pulpit Rock: A famous tourist attraction in Forsand, Ryfylke, Norway.</p>
<img src="pulpitrock.jpg" alt="Pulpit
Rock" style="width:150px;height:150px">
</a>
</div>
<div
class="col-md-4">
<a href="moustiers-sainte-marie.jpg"
class="thumbnail">
<p>Moustiers-Sainte-Marie:
Considered as one of the "most beautiful villages of France".</p>
<img src="moustiers-sainte-marie.jpg" alt="Moustiers Sainte Marie"
style="width:150px;height:150px">
</a>
</div>
<div class="col-md-4">
<a href="cinqueterre.jpg" class="thumbnail">
<p>The Cinque Terre: A rugged portion of coast in the Liguria region of
Italy.</p>
<img src="cinqueterre.jpg"
alt="Cinque Terre" style="width:150px;height:150px">
</a>
</div>
</div> »그것을 자신을 시도 응답 퍼가기
또한 동영상이나 슬라이드 쇼가 모든 장치에서 제대로 확장 할 수 있습니다.
수업은 직접 적용 할 수있는 <iframe>, <embed>, <video> 및 <object> 요소입니다.
다음 예는 추가하여 응답 비디오를 생성 .embed-responsive-item 에 클래스를 <iframe> 태그 (동영상이 다음 부모 요소에 잘 확장됩니다). 포함하는 <div> 비디오의 종횡비는 정의
예
<div class="embed-responsive embed-responsive-16by9">
<iframe
class="embed-responsive-item" src="..."></iframe>
</div> »그것을 자신을 시도 가로 세로 비율은 무엇인가?
화상의 종횡비는 그 폭과 높이 사이의 비례 관계를 설명한다. 두 가지 일반적인 비디오 화면 비율은 4 : 3 (20 세기의 보편적 인 비디오 포맷), 16 (HD 텔레비전과 유럽 디지털 TV에 대한 보편적 인) 9.
두 화면 비율 클래스를 선택할 수 있습니다 :
<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
<iframe
class="embed-responsive-item" src="..."></iframe>
</div>
<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
<iframe
class="embed-responsive-item" src="..."></iframe>
</div>연습으로 자신을 테스트!
전체 Bootstrap 이미지 참조
모든 이미지 클래스의 완전한 참고로, 우리의 완전한 이동 Bootstrap 이미지 참조 .