图片 - BootStrap 前端UI库

返回介绍

图片

发布于 2017-07-27 字数1992 浏览 1239 评论 0

Bootstraps优化图片,添加了响应式的行为(因此它们绝不会大过其父元素),并通过样式类给它添加轻量级的样式。

响应式图片

在 Bootstrap 中,给图片应用.img-reponsive类以及 max-width: 100%height:auto; 样式,使其具有响应性,并根据父元素的大小缩放。

<img src="..." class="img-responsive" alt="Responsive image">

SVG图片以及 IE 9-10

在IE9和IE10浏览器中,带着.img-responsive类的SVG图片是尺寸不均称的。为了修正它,在必要的地方添加width: 100% \9属性。由于它会导致其它图片格式的混乱,所以Bootstrap没有自动应用它。

图片形状

向一个<img>元素添加类,轻松地在项目中样式化图片。

图片

<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">

对齐图片

使用浮动助手类或者文本对齐类可以实现图片对齐。一个简单的居中类也可以用在block块级图片上。

图片

<img src="..." class="img-rounded pull-left" alt="...">
<img src="..." class="img-rounded pull-right" alt="...">

居中对齐

<img src="..." class="img-rounded center-block" style="display: block;" alt="...">
<div class="text-center">
  <img src="..." class="img-rounded" alt="...">
</div>

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!