Bootstrap3图像img标签为圆角边框和导航圆角边框的设置方法-惊讶

Bootstrap3图像img标签为圆角边框和导航圆角边框的设置方法

Bootstrap3图像img标签为圆角边框和导航圆角边框的设置方法

Bootstrap3图像img标签为圆角边框

在本教程中，我们将讨论三个 Bootstrap 3 的 class 来为图像添加样式。同时，我们也会讨论有关 Bootstrap 3 为响应式图像所提供的内容。

一般的样式
在我们讨论 Bootstrap 3 提供的定义图像样式的特殊的 class 之前，我们将看到 Bootstrap 3 提供的定义图像的一般的样式。

img {
  border: 0;
}

这是在 Bootstrap 3 的 CSS 中找到的第一个为图像定义的 CSS 规则，当图像呈现时用来移除边框。
然后，在打印的媒体查询内，规定了这些规则。

img {
    page-break-inside: avoid;
  }
img {
   max-width: 100% !important;
}

page-break-inside: avoid; 避免图像内的分页符。
max-width: 100% !important; 为图像定义的样式是显而易见的。这里它用于确定即使图像的宽度超出了容器，它也能被限制在容器内显示。它与 !important 一起使用，来覆盖其他任何破坏这种样式的样式。有时候，开发人员想让样式更好地支持移动设备上图像的友好呈现，会特别使用这两个规则。
这里还有另一个用于图像的规则

img {
  vertical-align: middle;
}

由于这条规则，一个图像会在 div 或者其他元素内垂直居中。
请注意，如果需要根据上下文垂直居中图像，则需要额外的样式。

特殊的样式
Bootstrap 3 提供了三个 class 用于呈现带有明确样式的图像。

img-rounded

您可以使用这个 class 来呈现带有圆角的图像。为了实现这点，Bootstrap 提供了 img-rounded class。该 class 的样式如下定义

.img-rounded {
  border-radius: 6px;
}

所以，它把 border-radius 属性设置为带有 6 像素值，用来定义相关图像的圆角。

img-thumbnail

这是另一个 Bootstrap 3 的 CSS class，它给图像添加了一个缩略图。该 class 的代码显示如下

.img-thumbnail {
  display: inline-block;
  height: auto;
  max-width: 100%;
  padding: 4px;
  line-height: 1.428571429;
  background-color: #ffffff;
  border: 1px solid #dddddd;
  border-radius: 4px;
  -webkit-transition: all 0.2s ease-in-out;
          transition: all 0.2s ease-in-out;
}

img-circle

通过使用 border-radius 属性，Bootstrap 3 创建了一个以圆形呈现的图像。img-circle class 的 CSS 代码如下

.img-circle {
  border-radius: 50%;
}

导航圆角边框的设置方法

导航栏默认有圆角边框，设置没有圆角，只需要移除导航的.navbar-fixed-top样式就可以去掉圆角边框啦。

为了防止导航栏与页面主体中的其他内容的顶部相交错，请向 <body> 标签添加至少 50 像素的内边距（padding），内边距的值可以根据您的需要进行设置。

感谢您的阅读，希望对您有帮助，本文版权归 #惊讶# 所有

6200 阅读 0 收藏发布于 2016年06月24日

点击加载更多...