Bootstrap 图像.pdfVIP

Bootstrap 图像 Bootstrap 图像 ⽬标 在本教程中，我们将讨论三个 Bootstrap 3 的 class 来为图像添加样式。同时，我们也 会讨论有关 Bootstrap 3 为响应式图像 提供的内容。 ⼀般的样式 在我们讨论 Bootstrap 3 提供的定义图像样式的特殊的 class 之前，我们将看到 Bootstrap 3 提供的定义图像的⼀般的样式。 img { border: 0; } 这是在 Bootstrap 3 的 CSS 中找到的第⼀个为图像定义的 CSS 规则，当图像呈现时⽤ 来移除边框。 然后，在打印的媒体查询内，规定了这些规则。 img { break-inside: avoid; } img { max-width: 100% !important; } p age-break-inside: avoid; 避免图像内的分页符。 max-width: 100% !imp ortant; 为图像定义的样式是显⽽易见的。这⾥它⽤于确定即使图 像的宽度超出了容器，它也能被限制在容器内显⽰。它与 !imp ortant ⼀起使⽤，来覆 盖其他任何破坏这种样式的样式。有时候，开发⼈员想让样式更好地⽀持移动设备上 图像的友好呈现，会特别使⽤这两个规则。 这⾥还有另⼀个⽤于图像的规则 img { vertical-align: middle; } 由于这条规则，⼀个图像会在 div 或者其他元素内垂直居中。如下⾯实例 ⽰。 ! OCTYPE html html head titleexample of rendering images in Bootstrap 3/title meta name=viewport content=width=device-width, initial-sca !-- Bootstrap -- link href=dist/css/bootstrap.min.css rel=stylesheet media style body { padding: 50px } .mdl { background-color: silver; padding: 7px } /style !-- HTML5 Shim and Respond.js IE8 support of HTML5 elements a !-- WARNING: Respond.js doesnt work if you view the page via !--[if lt IE 9] script src=/li /head body p class=mdlimg src=icon-default-screenshot.pngLorem ipsum !-- jQuery (necessary for Bootstraps JavaScript plugins) -- script src=https://code.jquery .com/jquery .js/script !-- Include all compiled plugins (below), or include individu script src=dist/js/bootstrap.min.js/script /body /html 点击这⾥，在线查看演⽰。 请注意，如果需要根据上下⽂垂直居中图像，则需要额外的样式。 特殊的样式 Bootstrap 3 提供了三个 class ⽤于呈现带有明确样式的图像。 img-rounded 您可以使⽤这个 class 来呈现带有圆⾓的图像。为了实现这点，Bootstrap 提供了 img- rounded class 。该 class 的样式如下定义 .img-rounded { border-radius: 6px; } 以，它把 border-radius 属性设置为带有 6 像素值，⽤来定义相关图像的圆⾓。下⾯ 的实例演⽰了两个相同的图像，第⼀个图像不带 img-rounded class ，第⼆个图像带有 img-rounded class 。请注意，第⼆个图像是圆⾓的。您可以 点击这⾥，在线查看实 例。 ! OCTYP