부트스트랩 이미지

이 장에서는 Bootstrap의 이미지 지원에 대해 알아봅니다. Bootstrap은 이미지에 간단한 스타일을 적용할 수 있는 세 가지 클래스를 제공합니다.

.img-rounded
: border-radius:6px를 추가하여 이미지 모서리를 둥글게 만듭니다.
.img-circle
: border-radius:50%을 추가하여 전체 이미지를 원형으로 만듭니다.
.img-thumbnail
: 패딩과 회색 테두리를 추가하세요.

<!DOCTYPE html>

<html>

<head>
<title>부트스트랩 예 - 이미지</title>
<link href= "/ bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="/scripts/jquery.min.js"></script>
<script src="/ bootstrap/ js/bootstrap.min.js"></script>
</head>
<body>

<img src="/wp-content/uploads/2014/06/download.png "
class="img-rounded">
<img src="/wp-content/uploads/2014/06/download.png"
class="img-circle">
<img src=" /wp -content/uploads/2014/06/download.png"
class="img-thumbnail">

</body>
</html>

Example

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 图片</title>
    <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">  
    <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>

<img src="/wp-content/uploads/2014/06/download.png" 
   class="img-rounded">
<img src="/wp-content/uploads/2014/06/download.png" 
   class="img-circle">
<img src="/wp-content/uploads/2014/06/download.png" 
   class="img-thumbnail">

</body>
</html>

예제 실행 »
온라인 예제를 보려면 "예제 실행" 버튼을 클릭하세요.

<img> 클래스

다음 클래스는 모든 이미지에 사용할 수 있습니다.

Class.img-rounded.img-circle .img-thumbnail.img-반응형

반응형 이미지

<img> 태그에 .img-반응형 클래스를 추가하여 이미지가 반응형 디자인을 지원하도록 만드세요. 이미지는 상위 요소로 멋지게 확장됩니다.

.img-반응형 클래스는 이미지에 max-width: 100%; 및 height: auto; 스타일을 적용합니다.

Instance

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
  </head>

  <body>
     <div class="container">
      <h2>图片</h2>
      <p> .img-responsive类让图片支持响应式，将很好地扩展到父元素 (通过改变窗口大小查看效果):</p>                  
      <img src="cinqueterre.jpg" class="img-responsive" alt="Cinque Terre" width="304" height="236"> 
    </div>

    <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
  </body>

</html>

인스턴스 실행»

"인스턴스 실행" 버튼을 클릭하세요. 온라인 인스턴스 보기

← 부트스트랩 버튼

부트스트랩 도우미 클래스 →

제출하다

PHP 중국어 웹사이트

Description	Instance
이미지에 둥근 모서리 추가(IE8에서는 지원되지 않음)	사용해 보세요
사진 Circle이 됩니다(IE8에서는 지원되지 않음)	사용해 보세요
Thumbnail 기능	사용해 보세요
이미지 반응형(상위 요소에 맞게 확장됨)	사용해 보세요