14、图像

最新推荐文章于 2021-11-18 16:05:46 发布

来杯茶的ni

最新推荐文章于 2021-11-18 16:05:46 发布

阅读量325

点赞数

分类专栏： Bootstrap

本文链接：https://blog.csdn.net/QilanAllen/article/details/106379539

版权

Bootstrap 专栏收录该内容

27 篇文章 2 订阅

订阅专栏

图像在网页制作中也是常要用到的元素，在Bootstrap框架中对于图像的样式风格提供以下几种风格：

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>
   <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> 
</body>
</html>

效果

来杯茶的ni

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
14、图像

图像在网页制作中也是常要用到的元素，在Bootstrap框架中对于图像的样式风格提供以下几种风格：1、img-responsive：响应式图片，主要针对于响应式设计2、img-rounded：圆角图片3、img-circle：圆形图片4、img-thumbnail：缩略图片使用方法：使用方法非常简单，只需要在<img>标签上添加对应的类名例如<!doctype html><html lang="en"><head> <m
复制链接

扫一扫

专栏目录