Maison > interface Web > tutoriel HTML > Bootstrap全局css样式之图片_html/css_WEB-ITnose

Bootstrap全局css样式之图片_html/css_WEB-ITnose

WBOY
Libérer: 2016-06-24 11:39:44
original
1109 Les gens l'ont consulté

好久没有更新博客了,在这里跟大家分享一下生活的小乐趣,作为程序员,整天对着电脑是很不爽的,加班也是常有的,所以连续工作对身体是很不爽的,而且随着年龄的增加,程序员身体状况会越来越差,还是建议大家要常去锻炼下身体,拉伸下颈椎和肩部,等你去了,你会发现很爽的

(1)图片

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

如果需要让使用了 .img-responsive 类的图片水平居中,请使用 .center-block 类,不要用 .text-center。

SVG 图像和 IE 8-10

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

使用的方法如下:

<img src="..." class="img-responsive" alt="Responsive image">
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
图片的形状
Copier après la connexion

通过为 Bootstrap全局css样式之图片_html/css_WEB-ITnose 元素添加以下相应的类,可以让图片呈现不同的形状。

Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
跨浏览器兼容性

请时刻牢记:Internet Explorer 8 不支持 CSS3 中的圆角属性。

<img src="..." alt="..." class="img-rounded"> <img src="..." alt="..." class="img-circle"> <img src="..." alt="..." class="img-thumbnail">
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
其中img-rounded是以矩形显示图片,img-circle是圆形显示图片,img-thumbnail也是矩形显示图片,但四周跟边框会有空隙。
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
注:1,一般图片形状的类会与自适应这个类一起使用
Copier après la connexion
 2,在同一个网站下,两张图片显示的效果要一样,需要图片的像素也要一样或者不能相差太多,不然使用了自适应,展示的效果你会发现差好多。
Copier après la connexion
 3,将图片放在栅格系统属性类下面,你会发现图片左右都会有间隙,这时你就要修改它的css属性了,因为它默认是左右都有间隙的。
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
图片就到这了,希望对大家有帮助
Copier après la connexion

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal