目录搜索
Getting startedAccessibility(无障碍)Browsers and devices(浏览器和设备)Build tools(构建工具)Contents(内容)Download(下载)JavaScriptTheming Bootstrap(主题Bootstrap)WebpackComponents: AlertsAlerts(警报)Components: BadgesBadges(徽章)Components: BreadcrumbBreadcrumbComponents: Button groupButton group(按钮组)Components: ButtonsButtons(按钮)Components: CardsComponents: CarouselCards(卡)Carousel(圆盘传送带)Components: CollapseCollapse(折叠)Components: DropdownsDropdowns(下拉菜单)Components: FormsForms(表单)Components: Input groupInput group(输入群组)Components: Input groupJumbotron(广告大屏幕)Components: List groupList group(列表组)Components: ModalModal(互动视窗)Components: NavbarNavbar(导航栏)Components: NavsNavs(导航栏)Components: PaginationPagination(分页)Components: PopoversPopovers(弹出框)Components: ProgressProgress(进度条)Components: ScrollspyScrollspy(滚动监听)Components: TooltipsTooltips(提示工具)ContentCode(代码)Figures(图片区)Images(图片)Reboot(重置)Tables(表格)Typography(排版)LayoutGrid(网格)Layout(布局)Media object(多媒体对象)Utilities for layout(排版通用类别)MigrationMigrating to v4(迁移到v4)UtilitiesBorders(边框)Clearfix(清除浮动)Close icon(关闭图标)Colors(颜色)Display property(显示属性)Embeds(内嵌)Flex(弹性)Float(浮动)Image replacement(图像替换)Position(位置)Screenreaders(荧幕阅读器)Sizing(尺寸)Spacing(间隔)Text(文本)Vertical alignment(垂直对齐)Visibility(能见度)
文字

文档和示例用于选择图像为响应行为%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授权的文档。

上一篇:下一篇: