Bootstrap images

In this chapter, we will learn about Bootstrap’s support for images. Bootstrap provides three classes that can apply simple styles to images:

.img-rounded: Add border-radius:6px to Get image rounded corners.
.img-circle: Add border-radius:50% to make the entire image circular.
.img-thumbnail: Add some padding and a gray border.

Please see the following example demonstration:

<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example - Image</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>

Instance

<!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>

Run instance»

Click the "Run instance" button to view the online instance

##<img> Classes

The following classes can be used in any image.

ClassDescriptionInstance.img-roundedAdd rounded corners to the image (not supported by IE8)Try it.img-circleChange the image into a circle (IE8 Not supported)Try it.img-thumbnailThumbnail functionTry it.img-responsiveImage responsive (will scale well to parent elements)Try it out

Responsive images

Make images support responsive design by adding the .img-responsive class to the <img> tag. The image will expand nicely to the parent element.

.img-responsive class applies max-width: 100%; and height: auto; styles to images:

Example

<!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>

Run Instance»

Click the "Run Instance" button to view the online instance

← Bootstrap button

Bootstrap helper class →

submit

php.cn