📌  相关文章
📜  引导映像

📅  最后修改于: 2020-12-19 02:49:30             🧑  作者: Mango

引导图像

Bootstrap支持映像。 Bootstrap中有三个类，可用于将一些简单样式应用于图像。

以下类为图像添加样式：

Classes Uses
.img-rounded It adds border-radius:6px to give the image rounded corners.
.img-circle It makes the entire image round by adding border-radius:500px.
.img-thumbnail It adds a bit of padding and a gray border.

Bootstrap映像取整示例

.img-rounded类用于向图像添加圆角(IE8不支持圆角)。

例：



 
   Bootstrap image





  
Rounded Corners
         
  abc

Bootstrap图像圆示例

.img-circle类用于将图像成形为圆形(IE8不支持圆角)。

例：

    

 
   Bootstrap image





  
Circle
      
  abc

Bootstrap缩略图图像示例

.img-thumbnail类用于将图像成形为缩略图。

例：



 
   Bootstrap image





  
Thumbnail
          
  abc

自举响应图像

响应图像可以自动调整自身以适合屏幕尺寸。您可以通过向标记添加.img响应类来创建响应图像。然后，图像将很好地缩放到父元素。

.img响应类适用于display：block;最大宽度：100％；和高度：自动；图片。

例：

  

 

  Bootstrap Example
  
  
  





  
Responsive Image

  abc

自举响应视频/嵌入

在Bootstrap中，您还可以添加视频并在任何设备上正确缩放它们。 .embed-sensitive-item类用于创建响应视频。类可以直接应用于

Bootstrap4图片

对齐图像用于使图像通过.float-right类向右浮动，或者通过.float-left类向左浮动。

例：




  Bootstrap Example
  
  
  
  
  
  





  
Aligning images Example

  
Use the float classes to float the image to the left or to the right:
 
  abc  
  abc