Bootstrap의 4가지 이미지 스타일_javascript 기술에 대한 자세한 설명
- WBOY원래의
- 2016-05-16 15:22:15928검색
이번 장에서는 Bootstrap의 이미지 지원에 대해 알아봅니다. Bootstrap은 이미지에 간단한 스타일을 적용할 수 있는 네 가지 클래스를 제공합니다.
img-rounded는 border-radius:6px를 추가하여 이미지 모서리를 둥글게 만듭니다
img-circle border-radius:50%를 추가하여 전체 이미지를 원형으로 만듭니다
img-thumbnail은 패딩과 회색 테두리를 추가합니다
img 반응형 이미지 반응형
1. 이미지 반올림
<!doctype html>
<html lang="en">
<head>
<!--网站编码格式，UTF-8 国际编码，GBK或 gb2312 中文编码-->
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="Keywords" content="关键词一，关键词二">
<meta name="Description" content="网站描述内容">
<meta name="Author" content="Yvette Lau">
<meta name = "viewport" content = " width = device-width, initial-scale = 1 ">
<title>BootstrapDemo</title>
<!--css js 文件的引入-->
<link rel="stylesheet" type="text/css" href="../bootstrap-3.3.5-dist/css/bootstrap.min.css">
</head>
<body style="padding: 20px;">
<div class = "container">
<img src = "5.jpg" class="img-rounded" >
</div>
</body>
</html>
.img-rounded{border-radius:6px;}
효과:
2. img-circle
<body style="padding: 20px;">
<div class = "container">
<img src = "5.jpg" class="img-circle" >
</div>
</body>
.img-circle{테두리 반경:50%;}
효과(이미지의 너비와 높이가 다르기 때문에 타원으로 나타납니다. 너비와 높이를 동일하게 설정하면 원이 나타납니다):
3.img-thumbnail
<body style="padding: 20px;">
<div class = "container">
<img src = "5.jpg" class="img-thumbnail" >
<img src = "4.jpg" class="img-thumbnail" >
<img src = "3.jpg" class="img-thumbnail" >
</div>
</body>
.img-thumbnail{display:inline-block;max-width:100%;height:auto;padding:4px;line-height:1.42857143;
background-color:#FFF;border:1px solid #DDD;border-radius:4px;transition:all 0.2s easy-in-out;}
효과:
4.img-응답
<body style="padding: 20px;">
<div class = "container" style = "width:150px;">
<img src = "5.jpg" class="img-responsive" width="400px" >
</div>
</body>
.img-반응형{디스플레이:블록;최대 너비:100%;높이:자동;}
효과(img의 너비 속성 값이 무시됨):
위 콘텐츠는 부트스트랩의 4가지 이미지 스타일에 대한 관련 지식을 단계별로 소개합니다.
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.