Bootstrap 学习之 (五) ------ 图片及辅助类

响应式图片

在 Bootstrap 版本 3 中，通过为图片添加 .img-responsive 类可以让图片支持响应式布局。其实质是为图片设置了 max-width: 100%; 和 height: auto; 属性，从而让图片在其父元素中更好的缩放。

SVG 图像和 IE 8-10

在 Internet Explorer 8-10 中，设置为 .img-responsive 的 SVG 图像显示出的尺寸不匀称。为了解决这个问题，在出问题的地方添加 width: 100% \9; 即可。Bootstrap 并没有自动为所有图像元素设置这一属性，因为这会导致其他图像格式出现错乱。

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

图片形状

通过为 <img> 元素添加以下相应的类，可以让图片呈现不同的形状。

跨浏览器兼容性

请时刻牢记：Internet Explorer 8 不支持 CSS3 中的圆角属性。

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

辅助类
 
 

  
  文本字体颜色类:
 
 
 
 

  
  
<span style="font-size:18px;"><p class="text-muted">...</p>
<p class="text-primary">...</p>
<p class="text-success">...</p>
<p class="text-info">...</p>
<p class="text-warning">...</p>
<p class="text-danger">...</p></span>
  
  
文本背景颜色类:
 
 
 
 

  
  
<span style="font-size:18px;"><p class="bg-primary">...</p>
<p class="bg-success">...</p>
<p class="bg-info">...</p>
<p class="bg-warning">...</p>
<p class="bg-danger">...</p></span>
  
  

  
  
关闭按钮
  
  
通过使用一个象征关闭的图标，可以让模态框和警告框消失。
  
  
<button type="button" class="close"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
  
  


  
  
三角符号
通过使用三角符号可以指示某个元素具有下拉菜单的功能。注意，向上弹出式菜单中的三角符号是反方向的。
<span class="caret"></span>

  
  
快速浮动
  
  
<div class="pull-left">...</div>
<div class="pull-right">...</div>
  
  

 
 
显示与隐藏
 
 

  
  
<div class="show">...</div>
<div class="hidden">...</div>