boostsrap 图像与图标

最新推荐文章于 2022-08-18 21:39:46 发布

转载最新推荐文章于 2022-08-18 21:39:46 发布 · 1.1k 阅读

bootstrap 专栏收录该内容

10 篇文章

订阅专栏

（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>

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