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

随机推荐

redis主从以及认证配置
以前用redis用的很多,各种数据类型用的飞起,算是用得很溜了.不过那都是封装好的方法,自己直接调用.以前的公司比较规范,开发只是开发,很少去做跟运维相关的事情. 换了一份工作,不过这边项目刚开始起步 ...
nginx和apache的比较
1.nginx的IO是非阻塞的,apache的IO是阻塞的. nginx accept一个连接以后会把它放到EPOLL的消息循环中,APACHE需要启动一个线程,当系统线程达到瓶颈以后,会阻塞网络IO ...
JSESSIONID与SESSION
用spring security的时候遇到了一个很诡异的问题: 已经登录的用户,而且没有标记remember-me,在重启服务器之后还会显示已经登录状态这就严重啦,这样子如果要在session中储存 ...
Rainyday.js – 使用 JavaScript 实现雨滴效果
Rainyday.js 背后的想法是创建一个 JavaScript 库,利用 HTML5 Canvas 渲染一个雨滴落在玻璃表面的动画.Rainyday.js 有功能可扩展的 API,例如碰撞检测和易 ...
MySQL之浅谈MySQL的存储引擎
什么是MySql数据库通常意义上,数据库也就是数据的集合,具体到计算机上数据库可以是存储器上一些文件的集合或者一些内存数据的集合. 我们通常说的MySql数据库,sql server数据库等 ...
[deviceone开发]-do_SlideListView的简单示例
一.简介利用提供的SlideListVIew实现那种cell可以滑动露出底部按钮的功能主要组件:do_slidelistview 二.效果图三.相关讨论 http://bbs.deviceone ...
[deviceone开发]-天气demo
一.简介该demo主要实现定位功能,读取天气信息,语音播报功能.其中定位需要配置key,调试二维码请到论坛中下载! 二.效果图三.相关讨论 http://bbs.deviceone.net/for ...
定制Eclipse IDE之插件篇（二）
上文回顾:定制Eclipse IDE之插件篇(一) 延续上一篇的插件篇,这一篇将会讲到一个最关键的插件aptana. 一.aptana插件官方的解释我就不说了,从下面图可以看到插件提供了什么功能,列 ...
一个解决表单中的文字和文本区域（textarea）上对齐的方法
在进行表单布局的时候通常会遇到这样的情况文本和textarea标签是底部对齐的 <p><em>邮箱</em><textarea style='height: ...
MapGuide Maestro 5.1发布了
MapGuide Maestro最为MapGuide开源版的authoring工具真是发展迅速,有些功能比Infrastructure Studio还给力,现在5.1版已经发布了.大家可以到http: ...

Bootstrap学习（3）