부트스트랩의 이미지 스타일은 무엇입니까?

부트스트랩에는 네 가지 이미지 스타일이 있습니다: 1. ".img-rounded", 둥근 이미지 스타일 2. ".img-circle", 둥근 이미지 스타일 3. ".img-thumbnail", 썸네일 스타일;4. ".img-반응형", 반응형 이미지 스타일.

이 튜토리얼의 운영 환경: Windows 7 시스템, bootsrap 버전 3.3.7, DELL G3 컴퓨터

Bootstrap은 클래스에 대해 다음과 같은 네 가지 스타일을 제공합니다.

• . img-rounded: 둥근 모서리(IE8에서는 지원되지 않음), 이미지의 둥근 모서리를 얻으려면 border-radius:6px를 추가하세요. .img-rounded：圆角 (IE8 不支持)，添加 border-radius:6px 来获得图片圆角；

• .img-circle：圆形 (IE8 不支持)，添加 border-radius:50% 来让整个图片变成圆形。

• .img-thumbnail：缩略图功能，添加一些内边距（padding）和一个灰色的边框。

• .img-responsive

.img-circle: rounded ( IE8에서는 지원되지 않음)), border-radius:50%를 추가하여 전체 이미지를 원형으로 만듭니다.

.img-thumbnail: 썸네일 기능, 패딩과 회색 테두리를 추가합니다.

.img-반응형: 이미지 반응형(상위 요소에 맞게 확장됨).

사용법:

수업에 직접 수업 스타일 추가:

<img class="img-circle lazy"  src="/static/imghw/default1.png"  data-src="img.jpg"    alt="头像"/>

🎜🎜그림에서 다양한 스타일을 사용한 효과를 볼 수 있습니다. 그림을 처리하는 것이 매우 간단하고 편리합니다. 때로는 필요에 따라 내부 여백과 회색 테두리가 있는 원형 아바타를 사용해야 하는 경우 원과 썸네일의 두 가지 스타일을 겹쳐서 표시할 수 있습니다. 효과는 위의 원 썸네일 그림과 같습니다. 🎜🎜img-반응형은 이미지를 반응형으로 만듭니다. 소위 반응성이란 특정 요소가 변화함에 따라 변화하여 적응 효과를 얻는 것을 의미합니다. 위 사진의 반응형 두 이미지에 대한 코드는 다음과 같습니다. 🎜

<figure   style="max-width:90%">  
            <figcaption>responsive(150*150)</figcaption>  
            <img class="img-responsive  lazy"  src="/static/imghw/default1.png"  data-src="img.jpg"    alt="头像"/>  
 </figure>  
<figure style="width: 100px;height: 100px;">  
            <figcaption>responsive(100*100)</figcaption>  
            <img class="img-responsive  lazy"  src="/static/imghw/default1.png"  data-src="img.jpg"    alt="头像"/>  
 </figure>

🎜여기서는 이미지의 크기를 설정하지 않고, 이를 감싸는 요소인 그림의 크기를 150px*로 설정합니다. 150px 또는 100px*100px이면 이미지가 상위 요소 그림으로 확장됩니다. 🎜🎜부트스트랩에 대한 자세한 내용을 보려면 🎜부트스트랩 기본 튜토리얼🎜을 방문하세요! ! 🎜

위 내용은 부트스트랩의 이미지 스타일은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!