Bootstrap 图片

　　 Bootstrap 对图片的支持。Bootstrap 提供了三个可对图片应用简单样式的 class：

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

请看下面的实例演示：

<!DOCTYPE html>

<html>

<head>

   <title>Bootstrap 实例 - 图像</title>

   <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">

   <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

   <script src="http://libs.baidu.com/bootstrap/3.0.3/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	图片响应式 (将很好地扩展到父元素)

圆角的图片

<!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 style = "background-color:black">

    <div class="container" style = "color:white">

      <h2>图片</h2>

      <p> .img-rounded 类为图片添加圆角 (IE8 不支持):</p>

      <img src="1.jpg" class="img-rounded" 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>

效果如下图所示：

圆形的图片

<!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 style = "background-color:black">

    <div class="container" style = "color:white">

      <h2>图片</h2>

      <p> .img-rounded 类为图片添加圆角 (IE8 不支持):</p>

      <img src="1.jpg" class="img-circle" 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>

效果如下图所示

缩略图

<!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 style = "background-color:black">

    <div class="container" style = "color:white">

      <h2>图片</h2>

      <p> .img-thumbnail 类可制作图片缩略图:</p>

      <img src="1.jpg" class="img-thumbnail" 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>

效果如下图所示：

响应式图片

通过在 <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 style = "background-color:black">

    <div class="container" style = "color:white">

      <h2>图片</h2>

      <p> .img-thumbnail 类可制作图片缩略图:</p>

      <img src="1.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学习（1）：http://www.cnblogs.com/0201zcr/p/4900062.html

Bootstrap学习（2）：http://www.cnblogs.com/0201zcr/p/4902930.html

　　致谢：感谢您的阅读！

Bootstrap学习（3）的更多相关文章

Bootstrap~学习笔记索引
回到占占推荐博客索引 bootstrap已经用了有段时间了,感觉在使用上还是比较容易接受的,在开发人员用起来上,也还好,不用考虑它的兼容性,手机,平台,PC都可以有效的兼容. bootstrap官方a ...
BootStrap学习（2）
使用Bootstrap添加代码框可先看:简介.引入.包下载等:http://www.cnblogs.com/0201zcr/p/4900062.html Bootstrap 允许您以两种方式显示代码 ...
Bootstrap 学习（1）
简介 Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷. Bootst ...
前端框架——BootStrap学习
BootStrap简单总结下:1.栅格系统,能够很好的同时适应手机端和PC端(及传说中的响应式布局) 2.兼容性好接下来是对BootStrap学习的一些基础案例总结和回顾: 首先引入:bootstr ...
bootstrap学习总结-css样式设计(一)
由于项目需要,所以打算好好学习下bootstrap框架,之前了解一点,框架总体不难,但涉及到的东西还是很多,想要熟练掌握它,还是要多练练. 一:bootstrap是什么? bs是什么? 即前端页面搭 ...
Bootstrap学习笔记(二) 表单
在Bootstrap学习笔记(一) 排版的基础上继续学习Bootstrap的表单,编辑器及head内代码不变. 3-1 基础表单单中常见的元素主要包括:文本输入框.下拉选择框.单选按钮.复选按钮.文 ...
BootStrap学习之先导篇——响应式网页
Bootstrap学习之前,要知道响应式网页的原理. 1.什么是响应式网页? 一个页面,可以根据浏览设备的不同,以及特性的不同,而自动改变布局.大小等.使得在不同的设备上上都可以呈现优秀的界面. 优点 ...
bootstrap学习笔记之为导航条添加标题、二级菜单及状态 http://www.imooc.com/code/3120
为导航条添加标题.二级菜单及状态加入导航条标题在Web页面制作中,常常在菜单前面都会有一个标题(文字字号比其它文字稍大一些),其实在Bootstrap框架也为大家做了这方面考虑,其通过" ...
bootstrap学习笔记之基础导航条 http://www.imooc.com/code/3111
基础导航条在Bootstrap框中,导航条和导航从外观上差别不是太多,但在实际使用中导航条要比导航复杂得多.我们先来看导航条中最基础的一个--基础导航条. 使用方法: 在制作一个基础导航条时,主要分 ...

随机推荐

buffer和cache有什么本质区别
在free命令展示机器的内存消耗情况,会像这样展示
更新整理本人所有博文中提供的代码与工具（Java，2013.08）
为了更方便地管理博文中涉及的各种代码与工具资源,现在把这些资源迁移到 Google Code 中,有兴趣者可前往下载. Java 1.<高效 Java Web 应用开发框架 JessMA v3. ...
ENVI软件操作【数据显示操作——Overlay菜单操作】
一.注记层(Annotation) 注记层是ENVI的一个数据类型,它的后缀名是.ann.往往作为栅格数据层,矢量数据层.三维场景会绘图图表的附加数据叠加在上面,还可以作为镶嵌图像时候的裁剪线.注记数 ...
C# 如何实现带消息数的App图标
上次写了一篇博文,但是每次更新图标时,桌面会闪烁(刷新),有博友说人家的图标都不会刷新,还能动画.我想了一下,如果要达到这个效果,可以用Form来实现,就是在Form中嵌入一个图片,然后用一个labe ...
C#如何定制Excel界面并实现与数据库交互
Excel是微软办公套装软件的一个重要的组成部分,它可以进行各种数据的处理.统计分析和辅助决策操作,广泛地应用于管理.统计财经.金融等众多领域.(另外,Excel还是伦敦一所会展中心的名称)..NET ...
Vis.js – 基于浏览器的动态 JavaScript 可视化库
Vis.js 是一个动态的,基于浏览器的可视化库.该库被设计为易于使用,能处理大量的动态数据.该库由以下几部分组成:一是数据集和数据视图,基于灵活的键/值数据集,可以添加,更新和删除项目,订阅数据集变 ...
使用异步存储提升 Web 应用程序的离线体验
localForage 是一个 JavaScript 库,通过使用简单的.类似 localStorage 风格的 API 实现异步存储,帮助你提升 Web 应用程序的离线经验(通过 IndexedDB ...
为Titanium创建自己的安卓推送模块
在手机应用中,推送是一个非常重要的功能.相对来说ios应用的推送功能很容易做,因为它统一都是用苹果的APNS服务实现的.但安卓这边就比较混乱了,虽然谷歌也推出了类似苹果的官方推送服务,但由于谷歌的服务 ...
spring web MVC
详情:http://blog.csdn.net/mic_hero/article/details/50237627
js实现标准无缝滚动
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

Bootstrap学习（3）