图片（Images） · Bootstrap v5 中文文档 v5.3 |
您所在的位置：网站首页 › bootstrap响应尺寸 › 图片（Images） · Bootstrap v5 中文文档 v5.3 |
|
View on GitHub
图片（Images）
本文档及示例展示了如何让图片支持响应式行为（这样它们就不会超出父元素的宽度范围了）以及如何通过类（class）添加些许样式。 On this page 响应式图片通过 Bootstrap 所提供的 .img-fluid 类让图片支持响应式布局。其原理是将 max-width: 100%; 和 height: auto; 赋予图片，以便随父元素的宽度变化一起缩放。 PlaceholderResponsive image html 图片的缩略图除了我们提供的 border-radius utilities 外，你还可以使用 .img-thumbnail 使图片的外观具有 1px 宽度的圆形边框。 A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera200x200 html 对齐图片通过使用 helper float classes 或 text alignment classes 将图片对齐。块级（block-level）图片可以使用 the .mx-auto margin utility class 居中对齐。 Placeholder200x200 Placeholder200x200 html Placeholder200x200 html Placeholder200x200 html如果你使用 元素为某个 指定多个 元素的话，请确保将 .img-* 类添加到 元素而不是 元素上。 Sass VariablesVariables are available for image thumbnails. $thumbnail-padding: .25rem; $thumbnail-bg: var(--#{$prefix}body-bg); $thumbnail-border-width: var(--#{$prefix}border-width); $thumbnail-border-color: var(--#{$prefix}border-color); $thumbnail-border-radius: var(--#{$prefix}border-radius); $thumbnail-box-shadow: var(--#{$prefix}box-shadow-sm); |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |