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）的更多相关文章

  1. Bootstrap~学习笔记索引

    回到占占推荐博客索引 bootstrap已经用了有段时间了,感觉在使用上还是比较容易接受的,在开发人员用起来上,也还好,不用考虑它的兼容性,手机,平台,PC都可以有效的兼容. bootstrap官方a ...

  2. BootStrap学习（2）

    使用Bootstrap添加代码框 可先看:简介.引入.包下载等:http://www.cnblogs.com/0201zcr/p/4900062.html Bootstrap 允许您以两种方式显示代码 ...

  3. Bootstrap 学习（1）

    简介 Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷. Bootst ...

  4. 前端框架——BootStrap学习

    BootStrap简单总结下:1.栅格系统,能够很好的同时适应手机端和PC端(及传说中的响应式布局) 2.兼容性好 接下来是对BootStrap学习的一些基础案例总结和回顾: 首先引入:bootstr ...

  5. bootstrap学习总结-css样式设计(一)

    由于项目需要,所以打算好好学习下bootstrap框架,之前了解一点,框架总体不难,但涉及到的东西还是很多,想要熟练掌握它,还是要多练练. 一:bootstrap是什么? bs是什么?  即前端页面搭 ...

  6. Bootstrap学习笔记(二) 表单

    在Bootstrap学习笔记(一) 排版的基础上继续学习Bootstrap的表单,编辑器及head内代码不变. 3-1 基础表单 单中常见的元素主要包括:文本输入框.下拉选择框.单选按钮.复选按钮.文 ...

  7. BootStrap学习之先导篇——响应式网页

    Bootstrap学习之前,要知道响应式网页的原理. 1.什么是响应式网页? 一个页面,可以根据浏览设备的不同,以及特性的不同,而自动改变布局.大小等.使得在不同的设备上上都可以呈现优秀的界面. 优点 ...

  8. bootstrap学习笔记之为导航条添加标题、二级菜单及状态 http://www.imooc.com/code/3120

    为导航条添加标题.二级菜单及状态 加入导航条标题 在Web页面制作中,常常在菜单前面都会有一个标题(文字字号比其它文字稍大一些),其实在Bootstrap框架也为大家做了这方面考虑,其通过" ...

  9. bootstrap学习笔记之基础导航条 http://www.imooc.com/code/3111

    基础导航条 在Bootstrap框中,导航条和导航从外观上差别不是太多,但在实际使用中导航条要比导航复杂得多.我们先来看导航条中最基础的一个--基础导航条. 使用方法: 在制作一个基础导航条时,主要分 ...

随机推荐

  1. 使用 HTML5 Canvas 绘制出惊艳的水滴效果

    HTML5 在不久前正式成为推荐标准,标志着全新的 Web 时代已经来临.在众多 HTML5 特性中,Canvas 元素用于在网页上绘制图形,该元素标签强大之处在于可以直接在 HTML 上进行图形操作 ...

  2. C++11新特性 lambda表达式

    C++11 添加了了一个名为lambda表达式的功能,可以用于添加匿名函数 语法: [capture_block](parameter) mutable exception_specification ...

  3. 高性能javascript学习笔记系列(3) -DOM编程

    参考 高性能javascript 文档对象模型(DOM)是独立于语言的,用于操作XML和HTML文档的程序接口API,在浏览器中主要通过DOM提供的API与HTML进行交互,浏览器通常会把DOM和ja ...

  4. DIV+CSS+JS基础+正则表达式

    ...............HTML系列....................        DIV元素是用来为HTML文档内大块(block-level)的内容提供结构和背景的元素.DIV的起始 ...

  5. 实现a标签中的各种点击（onclick）事件的方法

    我们常用的在a标签中有点击事件:1. a href="javascript:js_method();"这是我们平台上常用的方法,但是这种方法在传递this等参数的时候很容易出问题, ...

  6. iOS 程序报错：reason: [NSArrayI addObject:]: unrecognized selector sent to instance

    *** Terminating app due to uncaught exception 'NSInvalidArgumentException', reason: '-[__NSArrayI ad ...

  7. 关于web软件信息安全问题防护资料的整理（三）

    了解了web系统的安全威胁,那么我们应该怎样防范这些安全威胁呢? 1.时刻准备应战 Web应用系统所面临的威胁是非常严峻的.不管攻击的一方是采用单一形式的攻击,还是采用混合多种手段的混合攻击,作为防护 ...

  8. 三分钟玩转jQuery.noConflict()

      jQuery是目前使用最广泛的前端框架之一,有大量的第三方库和插件基于它开发.为了避免全局命名空间污染,jQuery提供了jQuery.noConflict()方法解决变量冲突.这个方法,毫无疑问 ...

  9. Android上的MVP：如何组织显示层的内容

    MVP(Model View Presenter)模式是著名的MVC(Model View Controller)模式的一个演化版本,目前它在Android应用开发中越来越重要了,大家也都在讨论关于M ...

  10. NSJSONSerialization

    /*     总结:   json格式的读写: 解析: data =   NSData  dataWithContentsOfUrl:XXX id obj  =  [ NSJsonSerializat ...