directory search
Getting started Accessibility(无障碍) Browsers and devices(浏览器和设备) Build tools(构建工具) Contents(内容) Download(下载) JavaScript Theming Bootstrap(主题Bootstrap) Webpack Components: Alerts Alerts(警报) Components: Badges Badges(徽章) Components: Breadcrumb Breadcrumb Components: Button group Button group(按钮组) Components: Buttons Buttons(按钮) Components: Cards Components: Carousel Cards(卡) Carousel(圆盘传送带) Components: Collapse Collapse(折叠) Components: Dropdowns Dropdowns(下拉菜单) Components: Forms Forms(表单) Components: Input group Input group(输入群组) Components: Input group Jumbotron(广告大屏幕) Components: List group List group(列表组) Components: Modal Modal(互动视窗) Components: Navbar Navbar(导航栏) Components: Navs Navs(导航栏) Components: Pagination Pagination(分页) Components: Popovers Popovers(弹出框) Components: Progress Progress(进度条) Components: Scrollspy Scrollspy(滚动监听) Components: Tooltips Tooltips(提示工具) Content Code(代码) Figures(图片区) Images(图片) Reboot(重置) Tables(表格) Typography(排版) Layout Grid(网格) Layout(布局) Media object(多媒体对象) Utilities for layout(排版通用类别) Migration Migrating to v4(迁移到v4) Utilities Borders(边框) Clearfix(清除浮动) Close icon(关闭图标) Colors(颜色) Display property(显示属性) Embeds(内嵌) Flex(弹性) Float(浮动) Image replacement(图像替换) Position(位置) Screenreaders(荧幕阅读器) Sizing(尺寸) Spacing(间隔) Text(文本) Vertical alignment(垂直对齐) Visibility(能见度)
characters

文档和示例用于选择图像为响应行为%28,这样它们就不会比父元素%29大,并向它们添加轻量级样式--所有这些都是通过类实现的。

响应图像

引导带中的图像是通过以下方式做出响应的.img-fluid...max-width: 100%;height: auto;应用于图像,使其与父元素进行缩放。

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

SVG图像和IE 10

在InternetExplorer 10中,SVG图像与.img-fluid不成比例的大小。若要修复此问题,请添加width: 100% \9;必要的时候。这个修复错误地调整了其他图像格式的大小,所以Bootstrap不会自动应用它。

图像缩略图

除了我们边界半径公用事业,你可以用.img-thumbnail若要使图像呈现圆形1 px边框,请执行以下操作。

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

对齐图像

对齐图像与辅助浮点数类或文本对齐类...block-级别图像可以使用大.mx-auto边际效用类...

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


<img src="..." class="rounded mx-auto d-block" alt="...">


<div class="text-center">  <img src="..." class="rounded" alt="..."></div>

图片

如果您使用的是<picture>元素指定多个<source>特定元素的元素。<img>,确保添加.img-*类的<img>而不是去<picture>标签。

<picture>  <source srcset="..." type="image/svg+xml">  <img src="..." class="img-fluid img-thumbnail" alt="..."></picture>
 © 2011–2017 Twitter, Inc.

©2011-2017自带作者

根据麻省理工学院的许可授权的代码。

根据CreativeCommonsAttributionLicense v3.0授权的文档。

Previous article: Next article: