boostsrap 图像与图标

来源：互联网发布：go java 对比编辑：程序博客网时间：2024/06/02 05:27

（1）图像

图像提供了4种风格的样式

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

只需要在<img>上加上指定的类名即可

<!doctype html><html lang="en"><head>    <meta charset="UTF-8"><title>图像</title><link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"></head><body><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> </body></html>

（2）图标

添加class：glyphicon+指定图标即可

<!doctype html><html lang="en"><head>    <meta charset="UTF-8"><title>图标</title><link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"></head><body><span class="glyphicon glyphicon-search"></span><span class="glyphicon glyphicon-asterisk"></span><span class="glyphicon glyphicon-plus"></span><span class="glyphicon glyphicon-cloud"></span>    </body></html>

图标名称可以从名称上查找
如果需要定制，则可以在图标上查找

0 0