Bootstrap框架中对于图像的样式风格提供以下几种风格:img-responsive:响应式图片,主要针对于响应式设计
img-rounded:圆角图片 img-circle:圆形图片 img-thumbnail:缩略图片
使用方法:使用方法非常简单,只需要在<img>标签上添加对应的类名
<div class="container">
<div class="row">
<div class="col-sm-4">
<img alt="140x140" src="http://placehold.it/140x140">
<div>默认图片</div>
</div>
<div class="col-sm-4">
<img class="img-rounded" alt="140x140" src="http://placehold.it/140x140">
<div>圆角图片</div>
</div>
<div class="col-sm-4">
<img class="img-circle" alt="140x140" src="http://placehold.it/140x140">
<div>圆形图片</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<img class="img-thumbnail" alt="140x140" src="http://placehold.it/140x140">
<div>缩略图</div>
</div>
<div class="col-sm-6">
<img class="img-responsive" alt="140x140" src="http://placehold.it/140x140">
<div>响应式图片</div>
</div>
</div>
</div>
图标一: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";
}
用法:
<span class="glyphicon glyphicon-search"></span>
<span class="glyphicon glyphicon-asterisk"></span>
<span class="glyphicon glyphicon-plus"></span>
<span class="glyphicon glyphicon-cloud"></span>
所有图标的附加样式类均以glyphicon-为前缀,具体名字可在http://getbootstrap.com/components/#glyphicons 链接查阅或根据bootstrap.css文件第2393行~第2992行查阅,除了使用glyphicon.com提供的图标之外,还可以使用第三方为Bootstrap框架设计的图标字体,如Font Awesome(http://www.bootcss.com/p/font-awesome/)。使用方法和上面介绍的一样,不过记得将字体下载到你本地