一般的样式

在我们讨论 Bootstrap 3 提供的定义图像样式的特殊的 class 之前，我们将看到 Bootstrap 3 提供的定义图像的一般的样式。

img {

  border: 0;

}

这是在 Bootstrap 3 的 CSS 中找到的第一个为图像定义的 CSS 规则，当图像呈现时用来移除边框。

然后，在打印的媒体查询内，规定了这些规则。

 img {

    page-break-inside: avoid;

  }

  img {

    max-width: 100% !important;

  }

page-break-inside: avoid; 避免图像内的分页符。

max-width: 100% !important; 为图像定义的样式是显而易见的。这里它用于确定即使图像的宽度超出了容器，它也能被限制在容器内显示。它与 !important 一起使用，来覆盖其他任何破坏这种样式的样式。有时候，开发人员想让样式更好地支持移动设备上图像的友好呈现，会特别使用这两个规则。

这里还有另一个用于图像的规则

img {

  vertical-align: middle;

}

由于这条规则，一个图像会在 div 或者其他元素内垂直居中。如下面实例所示。

<!DOCTYPE html>

<html>

  <head>

    <title>example of rendering images in Bootstrap 3</title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Bootstrap -->

    <link href="dist/css/bootstrap.min.css" rel="stylesheet" media="screen">

    <style>

    body {

    padding: 50px

    }

     .mdl {

     background-color: silver;

     padding: 7px

    }

    </style>

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->

    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->

    <!--[if lt IE 9]>

      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>

      <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>

    <![endif]-->

  </head>

  <body>

<p class="mdl"><img src="icon-default-screenshot.png">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->

    <script src="https://code.jquery.com/jquery.js"></script>

    <!-- Include all compiled plugins (below), or include individual files as needed -->

    <script src="dist/js/bootstrap.min.js"></script>

  </body>

</html>

效果如图：

Bootstrap 3 提供了三个 class 用于呈现带有明确样式的图像。

img-rounded

您可以使用这个 class 来呈现带有圆角的图像。为了实现这点，Bootstrap 提供了 img-rounded class。该 class 的样式如下定义

.img-rounded {

  border-radius: 6px;

}

所以，它把 border-radius 属性设置为带有 6 像素值，用来定义相关图像的圆角。下面的实例演示了两个相同的图像，第一个图像不带 img-rounded class，第二个图像带有 img-rounded class。请注意，第二个图像是圆角的。

<!DOCTYPE html>

<html>

  <head>

    <title>example of rendering images with rounded corners with Bootstrap 3</title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Bootstrap -->

    <link href="dist/css/bootstrap.min.css" rel="stylesheet" media="screen">

    <style>

    body {

    padding: 50px

    }

    </style>

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->

    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->

    <!--[if lt IE 9]>

      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>

      <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>

    <![endif]-->

  </head>

  <body>

<img src="rounded-corner-images.png" alt="image with rounded corners">

<img src="rounded-corner-images.png" alt="image with rounded corners" class="img-rounded">

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->

    <script src="https://code.jquery.com/jquery.js"></script>

    <!-- Include all compiled plugins (below), or include individual files as needed -->

    <script src="dist/js/bootstrap.min.js"></script>

  </body>

</html>

img-thumbnail

这是另一个 Bootstrap 3 的 CSS class，它给图像添加了一个缩略图。该 class 的代码显示如下

.img-thumbnail {

  display: inline-block;

  height: auto;

  max-width: 100%;

  padding: 4px;

  line-height: 1.428571429;

  background-color: #ffffff;

  border: 1px solid #dddddd;

  border-radius: 4px;

  -webkit-transition: all 0.2s ease-in-out;

          transition: all 0.2s ease-in-out;

}

下面是一个使用了该 class 的实例。

<!DOCTYPE html>

<html>

  <head>

    <title>Images thumbnail with Bootstrap 3</title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Bootstrap -->

    <link href="dist/css/bootstrap.min.css" rel="stylesheet" media="screen">

    <style>

    body {

    padding: 50px

    }

    </style>

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->

    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->

    <!--[if lt IE 9]>

      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>

      <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>

    <![endif]-->

  </head>

  <body>

<img src="data:image-with-thumbnail.png" alt="image without thumbnail corners">

<img src="data:image-with-thumbnail.png" alt="image with thumbnail corners" class="img-thumbnail">

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->

    <script src="https://code.jquery.com/jquery.js"></script>

    <!-- Include all compiled plugins (below), or include individual files as needed -->

    <script src="dist/js/bootstrap.min.js"></script>

  </body>

</html>

img-circle

通过使用 border-radius 属性，Bootstrap 3 创建了一个以圆形呈现的图像。img-circle class 的 CSS 代码如下

.img-circle {

  border-radius: 50%;

}

点击这里，在线查看实例。下面是截屏和代码。

<!DOCTYPE html>

<html>

  <head>

    <title>Images with circle with Bootstrap 3</title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Bootstrap -->

    <link href="dist/css/bootstrap.min.css" rel="stylesheet" media="screen">

    <style>

    body {

    padding: 50px

    }

    </style>

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->

    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->

    <!--[if lt IE 9]>

      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>

      <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>

    <![endif]-->

  </head>

  <body>

<img src="data:image-with-circle.png" alt="image without circle shape">

<img src="data:image-with-circle.png" alt="image with circle shape" class="img-circle">

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->

    <script src="https://code.jquery.com/jquery.js"></script>

    <!-- Include all compiled plugins (below), or include individual files as needed -->

    <script src="dist/js/bootstrap.min.js"></script>

  </body>

</html>

响应式图像

Bootstrap 3 没有提供立即可用的响应式图像。您必须添加 img-responsive class 到图像上让它具有响应性。该 class 的 CSS 代码如下。

.img-responsive {

  display: block;

  height: auto;

  max-width: 100%;

}

它定义了图像必须显示为块级元素，高度将与图像高度相同，图像的最大宽度是 100%，来限制图像根据它所在的设备来呈现。

如需让图像默认具有响应特性，您可以添加这些 CSS 代码到 img{ }。

使用该 class 的实例如下。

<!DOCTYPE html>

<html>

  <head>

    <title>Responsive image example with Bootstrap 3</title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Bootstrap -->

    <link href="dist/css/bootstrap.min.css" rel="stylesheet" media="screen">

    <style>

    body {

    padding: 50px

    }

    img {

    margin-bottom:30px

    }

    </style>

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->

    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->

    <!--[if lt IE 9]>

      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>

      <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>

    <![endif]-->

  </head>

  <body>

<img src="data:image-with-circle.png" alt="without responsive image feature">

<img src="data:image-with-circle.png" alt="with responsive image feature" class="img-responsive">

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->

    <script src="https://code.jquery.com/jquery.js"></script>

    <!-- Include all compiled plugins (below), or include individual files as needed -->

    <script src="dist/js/bootstrap.min.js"></script>

  </body>

</html>

这个向图像添加响应特性的方法有局限性。

分别在大屏幕设备和移动设备（屏幕尺寸更小，可能会引发性能问题） 上加载同样大的高分辨率的图像。由于浏览器会在 CSS 和 JS 加载之前预先加载图像，在一个低速的网络连接中，也会引发性能问题。试想一下，您有一个大图像和其内的一个特定对象，当您在移动设备上查看图像时，图像会 被缩小到一个较小的版本，这样图像看起来就会很小，简称 艺术指导 问题。

开发人员已经想出克服这些限制的解决方案。我们将看到一个 Marc Grabanski 和 Christopher Schmitt 使用 HiSRC 的实例。这是一个会自动创建图像的低、中、高分辨率版本的 Jquery 插件，呈现的版本取决于显示图像设备的分辨率和带宽。

在我们后边的 响应式图像教程 中，我们将详细讨论所有这些方法。

代码如下：

<!DOCTYPE html>

<html>

  <head>

    <title>Responsive image with HiSRC example with Bootstrap 3</title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Bootstrap -->

    <link href="dist/css/bootstrap.min.css" rel="stylesheet" media="screen">

    <style>

    body {

    padding: 50px

    }

    img {

    margin-bottom:30px

    }

    </style>

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->

    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->

    <!--[if lt IE 9]>

      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>

      <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>

    <![endif]-->

  </head>

  <body>

<img src="5216852563_eca0af1b0d_m.jpg" data-1x="5216852563_eca0af1b0d.jpg" data-2x="5216852563_90c3f9c402_o.jpg" class="hisrc" />

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->

    <script src="https://code.jquery.com/jquery.js"></script>

    <!-- Include all compiled plugins (below), or include individual files as needed -->

    <script src="dist/js/bootstrap.min.js"></script>

<script>

$(document).ready(function(){

  $(".hisrc").hisrc();

});

</script>

<p>Photo courtesy: /http://www.flickr.com/photos/cubagallery/</p>

  </body>

</html>

Bootstrap 图像的更多相关文章

  1. Bootstrap图像

    前面的话 图像在网页制作中也是常要用到的元素,本文将详细介绍Bootstrap图像 响应式图片 通过为图片添加 .img-responsive 类可以让图片支持响应式布局.其实质是为图片设置了 max ...

  2. bootstrap基础知识

    Bootstrap是Twitter推出的一款简洁.直观.强悍的前端开发框架. Bootstrap基于 HTML.CSS.JAVASCRIPT.它由Twitter的设计师Mark Otto和Jacob ...

  3. Bootstrap学习目录

    前面的话 Bootstrap与CSS的关系,类似于javascript与jQuery的关系,原理与应用的关系.只是jQuery不再火爆,而Bootstrap依然火热,它在github有着超过100万的 ...

  4. Bootstrap-Other：v2 教程

    ylbtech-Bootstrap-Other:v2 教程 1.返回顶部 1. Bootstrap v2 教程 Bootstrap,来自 Twitter,是基于 HTML.CSS.JAVASCRIPT ...

  5. bootstrap学习笔记<七>（图标，图像）

    图像 bootstrap为图像预加载提供了很简洁的样式.(CDN:http://placehold.it/140x140:) PS:该CDN链接后的140x140可以根据网站需要更换合适的尺寸.例如: ...

  6. Bootstrap 之 Carousel

    Bootstrap 轮播(Carousel)插件是一种灵活的响应式的向站点添加滑块的方式.除此之外,内容也是足够灵活的,可以是图像.内嵌框架.视频或者其他您想要放置的任何类型的内容. 如果您想要单独引 ...

  7. Bootstrap学习笔记博客

    本片博客用于记录之后要用到Bootstrap的学习笔记   概括: Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架.Bootstrap 是基于 HTML.CSS.JAVASC ...

  8. bootstrap学习笔记--bootstrap概览

    HTML 5 文档类型(Doctype) Bootstrap 使用了一些 HTML5 元素和 CSS 属性.为了让这些正常工作,您需要使用 HTML5 文档类型(Doctype). 因此,请在使用 B ...

  9. CSS高效开发实战:CSS 3、LESS、SASS、Bootstrap、Foundation --读书笔记（1）设定背景图

    技术的新发展,除计算机可以接入互联网之外,平板电脑.智能手机.智能电视等其他设备均可访问互联网.在多设备时代,构建多屏体验也不是听说的那么难. 但是这也增加了学习CSS的难度?不知道如何上手,只懂一点 ...

随机推荐

  1. 浅谈Hybrid技术的设计与实现（转）

    前言 随着移动浪潮的兴起,各种APP层出不穷,极速的业务扩展提升了团队对开发效率的要求,这个时候使用IOS&Andriod开发一个APP似乎成本有点过高了,而H5的低成本.高效率.跨平台等特性 ...

  2. C++“窗体”程序设计启蒙

    [摘要]本文以C++菜菜鸟(仅仅须要学习了C++数据类型和控制结构就可以)为目标读者,用求解一元二次方程作为实例,展示窗体式程序的开发过程,获得初步体验.写作目的包含:(1)让学生通过模仿,开发出类似 ...

  3. mysql 修改[取消]timestamp的自动更新

    创建自动更新的 timestamp (插入或修改时 uptime都会自动更新) CREATE TABLE `hello` ( `id` int(11) NOT NULL, `uptime` times ...

  4. mysql 在创建批处理脚本日志表信息

    mysql在批处理脚本通过存储过程如下所示创建日志信息表: drop PROCEDURE if EXISTS reqSp; DELIMITER // create procedure reqSp(sT ...

  5. 移动web开发经验总结(1) （转）

    1.<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-sca ...

  6. ACM核武器

    工欲善其事必先利其器,给大家介绍一下ACM里面经常使用的一些工具,平台,作为第一发福利. 详细看这里,我直接粘贴过来有些代码没贴过来  http://wuyiqi.net/house/acm_weap ...

  7. Android监视返回键

    android在发展中,监视键返回到后事件经常被用来,在下面的例子来说明什么android返回键事件监听器. public class BackKeyTest extends Activity { / ...

  8. Java设计模式（七）策略模式 模板模式

    (十三)策略模式 策略图案限定了多个封装算法,该算法可以相互替换包.法的客户.借用还有一位大神的样例. interface ICalculator{ public int calculate(Stri ...

  9. jquery动态刷新局部表单

    想实现一个效果就是选择某个年份:然后再action中按该年份查找数据库中的数据,返回到页面表单中显示. 1.添加登记年度的changge事件,也是异步请求. $(document).ready(fun ...

  10. JBoss7官方最新版下载地址

    JBoss是全世界开发人员共同努力的成果,一个基于J2EE的开放源码的应用server. 由于JBoss代码遵循LGPL许可,能够在不论什么商业应用中免费使用它,而不用支付费用.2006年,Jboss ...