Bootstrap框架之图片

Bootstrap框架中对于图像的样式风格提供以下几种风格：img-responsive：响应式图片，主要针对于响应式设计
img-rounded：圆角图片            img-circle：圆形图片              img-thumbnail：缩略图片

使用方法：使用方法非常简单，只需要在标签上添加对应的类名

  

    

      
      
默认图片
    
    

       
      
圆角图片
    
    

      
      
圆形图片
    
  
  

    

        
       
缩略图
    
    

        
       
响应式图片
    
  
 

图标一：Bootstrap框架中的图标都是字体图标，其实现原理就是通过@font-face属性加载了字体。/*源码请查看bootstrap.css文件第2357行～第2380行*/在Bootstrap框架中有一个fonts的目录，这个目录中提供的字体文件就是用于制作icon的字体文件。

自定义完字体之后，需要对icon设置一个默认样式，在Bootstrap框架中是通过给元素添加“glyphicon”类名来实现，然后通过伪元素“:before”的“content”属性调取对应的icon编码

.glyphicon {
position: relative;
top: 1px;
display: inline-block;
font-family: 'Glyphicons Halflings';
font-style: normal;
font-weight: normal;
line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.glyphicon-asterisk:before {
content: "\2a";
}

用法：

所有图标的附加样式类均以glyphicon-为前缀，具体名字可在http://getbootstrap.com/components/#glyphicons 链接查阅或根据bootstrap.css文件第2393行～第2992行查阅，除了使用glyphicon.com提供的图标之外，还可以使用第三方为Bootstrap框架设计的图标字体，如Font Awesome(http://www.bootcss.com/p/font-awesome/)。使用方法和上面介绍的一样，不过记得将字体下载到你本地