摘要: Bootstrap框架对图片样式的支持。

<img>类

Bootstrap 提供了对图片应用简单样式的 class。

.img-rounded:添加 border-radius:6px 来获得图片圆角。

.img-circle:添加 border-radius:50% 来让整个图片变成圆形。

.img-thumbnail:添加一些内边距(padding)和一个灰色的边框。

代码示例:

<img src="E://web/image/flower.jpg" class="img-rounded">
<img src="E://web/image/flower.jpg" class="img-circle">
<img src="E://web/image/flower.jpg" class="img-thumbnail">

响应式图片

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

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

用法:

<img src="E://web/image/flower.jpg" class="img-responsive" alt="flower">

Bootstrap 图片的更多相关文章

  1. Bootstrap <基础八>图片

    Bootstrap 提供了三个可对图片应用简单样式的 class: .img-rounded:添加 border-radius:6px 来获得图片圆角. .img-circle:添加 border-r ...

  2. Scrapy基础(八)————图片下载后将本地路径添加到Item中

    前边讲到简单的图片下载,但是怎样将图片的本地路径和存储在Item中的数据对应起来,所以本篇博文讲解到如何将 本地的下载后的图片路径写入到Item中 思路:自定义pipline,多加个管道,该管道继承下 ...

  3. Bootstrap <基础二十八>列表组

    列表组.列表组件用于以列表形式呈现复杂的和自定义的内容.创建一个基本的列表组的步骤如下: 向元素 <ul> 添加 class .list-group. 向 <li> 添加 cl ...

  4. Bootstrap <基础十八>面包屑导航(Breadcrumbs)

    面包屑导航(Breadcrumbs)是一种基于网站层次信息的显示方式.以博客为例,面包屑导航可以显示发布日期.类别或标签.它们表示当前页面在导航层次结构内的位置. Bootstrap 中的面包屑导航( ...

  5. Bootstrap <基础三十二>模态框(Modal)插件

    模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等. 如果您想要单独引用该插件的功能,那么您需要引用  ...

  6. Bootstrap <基础三十一>插件概览

    在前面布局组件中所讨论到的组件仅仅是个开始.Bootstrap 自带 12 种 jQuery 插件,扩展了功能,可以给站点添加更多的互动.即使不是一名高级的 JavaScript 开发人员,也可以着手 ...

  7. Bootstrap <基础三十>Well

    Well 是一种会引起内容凹陷显示或插图效果的容器 <div>.为了创建 Well,只需要简单地把内容放在带有 class .well 的 <div> 中即可.下面的实例演示了 ...

  8. Bootstrap <基础二十九>面板(Panels)

    Bootstrap 面板(Panels).面板组件用于把 DOM 组件插入到一个盒子中.创建一个基本的面板,只需要向 <div> 元素添加 class .panel 和 class .pa ...

  9. Bootstrap<基础二十七> 多媒体对象(Media Object)

    Bootstrap 中的多媒体对象(Media Object).这些抽象的对象样式用于创建各种类型的组件(比如:博客评论),我们可以在组件中使用图文混排,图像可以左对齐或者右对齐.媒体对象可以用更少的 ...

  10. Bootstrap <基础二十六>进度条

    Bootstrap 进度条.在本教程中,你将看到如何使用 Bootstrap 创建加载.重定向或动作状态的进度条. Bootstrap 进度条使用 CSS3 过渡和动画来获得该效果.Internet ...

随机推荐

  1. 【CXF】com.sun.xml.internal.ws.fault.ServerSOAPFaultException: Client received SOAP Faul

    在客户端生成代码之后测试出现错误: com.sun.xml.internal.ws.fault.ServerSOAPFaultException: Client received SOAP Faul ...

  2. CSS3动画常用demo

    1.border动画 2.闪动动画(一闪一闪亮晶晶,满天都是小星星) .blink { animation: mymove 0.8s infinite; -webkit-animation: mymo ...

  3. python中的这些坑,早看早避免。

    python中的这些坑,早看早避免. 说一说python中遇到的坑,躲坑看这一篇就够了 传递参数时候不要使用列表 def foo(num,age=[]): age.append(num) print( ...

  4. jdk8系列三、jdk8之stream原理及流创建、排序、转换等处理

    一.为什么需要 Stream Stream 作为 Java 8 的一大亮点,它与 java.io 包里的 InputStream 和 OutputStream 是完全不同的概念.它也不同于 StAX ...

  5. C++经典面试题(最全,面中率最高)

    C++经典面试题(最全,面中率最高) 1.new.delete.malloc.free关系 delete会调用对象的析构函数,和new对应free只会释放内存,new调用构造函数.malloc与fre ...

  6. centos7使用haproxy1.7.5实现反向代理负载均衡实战

    使用haproxy实现反向代理负载均衡实战环境准备:两台虚拟机 # yum install -y gcc glibc gcc-c++ make screen tree lrzsz node1源码编译安 ...

  7. mysql5.5.48的my.cnf配置

    MYSQL配置 [client] port = 3306 socket = /tmp/mysql.sock [mysqld] port = 3306 default-storage-engine=My ...

  8. InetAddress问题

    InetAddress的方法 当输入InetAddress.getByAddress(new byte[]{127.0.0.1})的时候不会报错, 但是ip的各段值是0-255,当new byte[] ...

  9. PC上图标显示异常 白色框框处理方案

    步骤如下: 1.打开360安全卫士,点击图标显示异常的立即修复 2.修复完,图标就正常了 3.分析原因: 可能是我用了魔方优化大师(TweakerCube)优化了桌面快捷方式(去掉箭头)引起的,而且是 ...

  10. OCM_第十七天课程:Section7 —》GI 及 ASM 安装配置 _管理和配置 GRID /实施 ASM 故障组 /创建 ACFS 文件系统

    注:本文为原著(其内容来自 腾科教育培训课堂).阅读本文注意事项如下: 1:所有文章的转载请标注本文出处. 2:本文非本人不得用于商业用途.违者将承当相应法律责任. 3:该系列文章目录列表: 一:&l ...