手册

Bootstrap 教程 Bootstrap 简介 Bootstrap 环境安装

Bootstrap CSS 概览 Bootstrap 网格系统 Bootstrap 排版 Bootstrap 代码 Bootstrap 表格 Bootstrap 表单 Bootstrap 按钮 Bootstrap 图片 Bootstrap 辅助类 Bootstrap 响应式实用工具

Bootstrap 插件

Bootstrap 插件概览 Bootstrap 过渡效果 Bootstrap 模态框 Bootstrap 下拉菜单 Bootstrap 滚动监听 Bootstrap 标签页 Bootstrap 提示工具 Bootstrap 弹出框 Bootstrap 警告框 Bootstrap 按钮 Bootstrap 折叠 Bootstrap 轮播 Bootstrap 附加导航

Bootstrap 其他

Bootstrap UI 编辑器 Bootstrap v2 教程 Bootstrap HTML编码规范 Bootstrap CSS编码规范

首页大前端 Bootstrap Bootstrap 中文手册

Bootstrap 图片

阅读57434

更新时间2022-04-21

Bootstrap 按钮

Bootstrap 辅助类

在本章中，我们将学习 Bootstrap 对图片的支持。Bootstrap 提供了三个可对图片应用简单样式的 class：

.img-rounded：添加 border-radius:6px 来获得图片圆角。
.img-circle：添加 border-radius:50% 来让整个图片变成圆形。
.img-thumbnail：添加一些内边距（padding）和一个灰色的边框。

请看下面的实例演示：

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 图片</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>

实例

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

以下类可用于任何图片中。

类	描述	实例
.img-rounded	为图片添加圆角 (IE8 不支持)	尝试一下
.img-circle	将图片变为圆形 (IE8 不支持)	尝试一下
.img-thumbnail	缩略图功能	尝试一下
.img-responsive	图片响应式 (将很好地扩展到父元素)	尝试一下

响应式图片

通过在 <img> 标签添加 .img-responsive 类来让图片支持响应式设计。图片将很好地扩展到父元素。

.img-responsive 类将 max-width: 100%; 和 height: auto; 样式应用在图片上：

实例

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

运行实例 »

点击 "运行实例" 按钮查看在线实例

Bootstrap 按钮

Bootstrap 辅助类