bootstrap框架的图片

响应式图片,图片的形状。

操作方法

  • 01

    响应式图片 在 Bootstrap 版本 3 中,通过为图片添加 .img-responsive 类可以让图片支持响应式布局。其实质是为图片设置了 max-width: 100%;、 height: auto; 和 display: block; 属性,从而让图片在其父元素中更好的缩放。

  • 02

    如果需要让使用了 .img-responsive 类的图片水平居中,请使用 .center-block 类,不要用 .text-center。 请参考助手类章节 了解更多关于 .center-block 的用法。

  • 03

    SVG 图像和 IE 8-10 在 Internet Explorer 8-10 中,设置为 .img-responsive 的 SVG 图像显示出的尺寸不匀称。为了解决这个问题,在出问题的地方添加 width: 100% \9; 即可。Bootstrap 并没有自动为所有图像元素设置这一属性,因为这会导致其他图像格式出现错乱。

  • 04

    图片形状 通过为 <img> 元素添加以下相应的类,可以让图片呈现不同的形状。

  • 05

    跨浏览器兼容性 请时刻牢记:Internet Explorer 8 不支持 CSS3 中的圆角属性。

  • 06

    图片效果图:

(0)

相关推荐

  • 快速使用前端bootstrap框架

    前端bootstrap框架,简单,快捷,方便,视觉舒服,很容易学会. 操作方法 01 进入官网下载"bootstrap"文件包. 02 打开开发工具"dw",新 ...

  • Bootstrap框架语言简介二

    简要介绍 Bootstrap,以及如何下载.使用,还有基本模版和案例,等等. 操作方法 01 需要下载用于生产环境的Bootstrap.Bootstrap源码以及Sass项目. (去bootstrap ...

  • Bootstrap框架按钮二

    可作为按钮使用的标签或元素,预定义样式,按钮尺寸,按钮激活状态,链接元素,禁用状态,button元素. 操作方法 01 尺寸 需要让按钮具有不同尺寸吗?使用 .btn-lg..btn-sm 或 .bt ...

  • 10个Bootstrap热门的前端框架网站案例

    Bootstrap框架能让开发者快速的搭建一个时尚的网站,并且能兼容响应式,可以在桌面或移动平台上浏览网页都有良好的表现.下面整理10个很有创意的使用Bootstrap来搭建的网站,希望从中你能获得更 ...

  • Bootstrap模版框架怎么用

    Bootstrap是现在很流行的一套前端框架,美观大方而且用起来非常方便,可能很多做前端开发的新手朋友还不知道 Bootstrap模版框架怎么用,今天小编就来向大家介绍一下Bootstrap的用法. ...

  • 实例讲解Bootstrap前端框架的使用技巧

    Bootstrap跟Dreamweaver一样也是开发网站常用的前端框架,而且Bootstrap框架比Dreamweaver框架更常使用.利用前端框架都可以非常快速的开发出一个网站的前端出来,因此深受 ...

  • 干货集锦——20个最佳Bootstrap着陆页模板,快速网页设计不是事儿

    着陆页是网站上的一个至关重要的页面,一个好的着陆页,可以引导访客在登陆你的网站时进行一系列操作,进而达成注册,购买或者其他转化.因此,设计师们都必须精心设计着陆页,因为只有精心设计的页面才可以增加转化 ...

  • CSS样式图片下载助手(仿站助手)使用说明教程

    一、CSS样式图片下载助手简介: CSS样式图片下载助手是一款仿站助手软件,他是为解决当你发现了一款你很喜欢的网站风格的时候,但当你复制了它的css样式表的时候,里面某些框架使用图片做的,显示不出来, ...

  • bootstrap入门教程,按钮、按钮风格、下拉菜单

    bootstrap入门教程,按钮.按钮风格.下拉菜单等 本教程演示: bootstrap框架的按钮.按钮大小.按钮风格.按钮组.下拉菜单制作等. 使用的版本:Bootstrap v2.3.2 . 下面 ...