bootstrap学习笔记<七>（图标，图像）

图像

bootstrap为图像预加载提供了很简洁的样式。（CDN：http://placehold.it/140x140；）

PS：该CDN链接后的140x140可以根据网站需要更换合适的尺寸。例如：1024x960,1250x1600等等

<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 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>
</div>

View Code

bootstrap提供一下几种风格：

1、img-responsive：响应式图片，主要针对于响应式设计
2、img-rounded：圆角图片
3、img-circle：圆形图片
4、img-thumbnail：缩略图片

5、img-responsive：响应式图片

效果图

图标

bootstrap还提供了丰富的图标资源。

风格：glyphicon glyphicon-cloud（样式名称）

<span class="glyphicon glyphicon-search"></span>
    <span class="glyphicon glyphicon-asterisk"></span>
    <span class="glyphicon glyphicon-plus"></span>
    <span class="glyphicon glyphicon-cloud"></span>
    <p class="glyphicon glyphicon-home"></p>
    <a class="glyphicon glyphicon-remove"></a>
    <button class="glyphicon glyphicon-star"></button>

View Code

代码效果

图标列表