Bootstrap4 图像形状

最新推荐文章于 2021-11-18 16:05:46 发布
最新推荐文章于 2021-11-18 16:05:46 发布
阅读量115 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45116096/article/details/107238399
版权

圆角图片
.rounded 类可以让图片显示圆角效果：
实例：

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>圆角图片</h2>
  <p>.rounded 类可以让图片显示圆角效果：</p>            
  <img src="https://static.runoob.com/images/mix/cinqueterre.jpg" class="rounded" alt="Cinque Terre" width="304" height="236"> 
</div>

</body>
</html>

在这里插入图片描述
椭圆图片
.rounded-circle 类可以设置椭圆形图片:

<DOCTYPE html>
<html>
<head>
  <title>Bootstrap 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>椭圆图片</h2>
  <p>.rounded-circle 类可以设置椭圆形图片:</p>            
  <img src="https://static.runoob.com/images/mix/cinqueterre.jpg" class="rounded-circle" alt="Cinque Terre"> 
</div>

</body>
</html>

在这里插入图片描述
缩略图
.img-thumbnail 类用于设置图片缩略图(图片有边框):

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>缩略图</h2>
  <p>.img-thumbnail 类用于设置图片缩略图(图片有边框):</p>            
  <img src="https://static.runoob.com/images/mix/cinqueterre.jpg" class="img-thumbnail" alt="Cinque Terre">
</div>

</body>
</html>

在这里插入图片描述
图片对齐方式
使用 .float-right 类来设置图片右对齐，使用 .float-left 类设置图片左对齐:

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>图片对齐方式</h2>
  <p>使用 .float-right 类来设置图片右对齐，使用 .float-left 类设置图片左对齐:</p>
  <img src="https://static.runoob.com/images/mix/paris.jpg" class="float-left"> 
  <img src="https://static.runoob.com/images/mix/cinqueterre.jpg" class="float-right">
</div>

</body>
</html>

在这里插入图片描述
响应式图片
图像有各种各样的尺寸，我们需要根据屏幕的大小自动适应。

我们可以通过在 标签中添加 .img-fluid 类来设置响应式图片。

.img-fluid 类设置了 max-width: 100%; 、 height: auto; :

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>响应式图片</h2>
  <p>.img-fluid 类可以设置响应式图片，重置浏览器大小查看效果:</p>
  <img src="https://static.runoob.com/images/mix/paris.jpg" class="img-fluid">
</div>

</body>
</html>

在这里插入图片描述

jhfsdhsgfsdggreqZa
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
bootstrap4 知识总结
m0_63341952的博客
11-19 1540
一.网格系统 1.工作原理 数据行（.row）必须包含在容器(.container)中，以便为其赋予合适的对齐方式和内距（padding）。 在行（.row）中可以添加列(.column)，但列数之和不能超过平分的总列数。 具体内容应放放置在列容器（column）之内，而且只有列（column）才可以作为行容器(.row)的直接子元素 ...
jQueryHTML5超炫全屏焦点图
07-13
jQueryHTML5超炫全屏焦点图,jQueryHTML5超炫全屏焦点图
Bootstrap4 图片形状——圆形实现
weixin_46096901的博客
04-26 3696
Bootstrap4 图像形状——圆形实现 突然用到了Bootstrap4，要实现一个card里面的用户头像，需要正圆，但是看了文档，只有 .rounded实现图片的圆角，我尝试加入border-radius: 50%;去改成圆，但是发现白瞎。 后来网络上查到.rounded-circle类可以设置椭圆形图片，卧槽，我要的是正圆啊老大，你个椭圆有啥用啊，但是看来看去，就只有这个是关于图片形状的了...
bootstrap4 常用类
齐枫的博客
02-05 2696
字体类 .lead { font-size: 1.25rem; font-weight: 300; } .display-1 { font-size: 6rem; font-weight: 300; line-height: 1.2; } .display-2 { font-size: 5.5rem; font-weight: 300; line-heig
bootstrap4中响应式图片自动缩放和图片居中
faleshi的专栏
09-15 2676
在BOOTSTRAP 4响应式布局中图片自动缩放用img-fluid,图片居中用d-block mx-auto 如下面形式， <img alt="" src="http://www.techan.world/media/upload/2020/08/20200808152753_84.jpg" class="img-fluid d-block mx-auto"> IMG标签中如果有style:with:500,height:500这种类似的写法，要用JQUERY清除掉 清除代码如下
抽象相册bootstrap模板
03-31
模板的抽象设计风格可能包含了非传统色彩搭配、几何形状以及创新的图像排列方式，以吸引观众的注意力并增强用户体验。 【标签】：“bootstrap 抽象 相册 整站” “bootstrap”：指的是这个模板是基于Bootstrap框架...
Bootstrap v3.3.7 中文文档
12-22
- 图像：包括响应式图像和图像形状的样式。 - 警告提示：如警告、信息、成功和危险提示框。 - 进度条：显示进度或填充状态的水平条。 - 路径导航：包括导航栏、面包屑、页脚和侧边栏导航。 2. JavaScript插件：...
创意设计bootstrap单页模板
04-02
创意设计方面，Bootstrap提供了丰富的预定义样式和组件，如导航栏、按钮、表单、警告框、图像和媒体对象等，可以用来创建独特而引人入目的设计。设计师可以通过修改这些组件的颜色、大小、形状和动画效果，以符合其...
抽象艺术作品bootstrap模板
04-01
4. **抽象艺术的应用**：在网页设计中，抽象艺术可以用于背景图像、图标、按钮和其他界面元素。它可以增强网站的独特性，提高视觉冲击力，同时也能引导用户的情绪反应。设计师需要考虑颜色搭配、形状组合以及如何将...
bootstrap整体架构图、组件类型、插件实现步骤
06-19
4. **按钮**：多种大小、颜色和形状的按钮，支持普通、带下划线链接样式和按钮组。 5. **导航**：包括导航栏（navbar）、面包屑（breadcrumb）、分页（pagination）、 pills和tabs等。 6. **警告与提示**：如警告框...
BootStrap 4种图片形式 image形式 img-rounded img-circle img-thumbnail img-responsive
tanzongbiao的专栏
11-18 732
img-rounded img-circle img-thumbnail img-responsive <img id="img" class="img-rounded" height="150px" src="">
bootstrap4轮播图指示器动画代码 - 轮播进度条
无数_Mirage的博客
05-20 1513
bootstrap4轮播图指示器进度条动画代码，banner指示器进度条动画
BootStrap4的用法
hefrankeleyn的博客
05-25 3297
一、Container BootStrap4 同样需要一个containing 元素包裹正文内容。 .container 提供了一个固定的宽；.container-fluid提供了一个易变的宽。 二、网格系统 BootStrap的网格系统是基于flexbox，允许至多12个纵列。如果不想单独使用12个纵列，可以将多个纵列组合在一起成为更宽的列。 网格系统是反映敏感的，列将自动的安排，根据...
原生js实现简单图片轮播效果+用bootstrap4框架实现轮播图 对比
没有名字适合我的博客
12-10 1369
原生js实现图片轮播 效果： 代码： html+css： &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html lang=&quot;en&quot;&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;meta name=&quot;viewpo
使用Bootstrap4中轮播效果做响应式轮播图
wuyuderen_lpt的博客
06-20 3131
Bootstrap4 轮播轮播是一个循环的幻灯片，创建了一个简单的图片轮播效果 ：注意：使用Bootstrap4时，&lt;script&gt; 标签放到页面底部的 &lt;/body&gt; 标签之前。注意顺序，jQuery 必须放在最前面，然后是 Popper.js，最后是我们自己的 JavaScript 插件。&lt;link rel="stylesheet" href="https://c...
b050闲置图书分享-springboot+vue+elementui.zip（可运行源码+sql文件+文档）
07-23
本次开发的闲置图书分享平台实现了收货地址管理、字典管理、公告管理、留言板管理、图书管理、图书收藏管理、图书评价管理、图书订单管理、用户管理、管理员管理等功能。系统用到了关系型数据库中王者MySql作为系统的数据库，有效的对数据进行安全的存储，有效的备份，对数据可靠性方面得到了保证。并且程序也具备程序需求的所有功能，使得操作性还是安全性都大大提高，让闲置图书分享平台更能从理念走到现实，确确实实的让人们提升信息处理效率。 管理图书的数据，此页面主要实现图书的增加、修改、删除、查看的功能。公告信息管理页面提供的功能操作有：新增公告，修改公告，删除公告操作。公告类型管理页面显示所有公告类型，在此页面既可以让管理员添加新的公告信息类型，也能对已有的公告类型信息执行编辑更新，失效的公告类型信息也能让管理员快速删除。
《大学生职业生涯规划与就业指导》大一阶段课程作业
最新发布
07-24
《大学生职业生涯规划与就业指导》大一阶段课程作业
开题报告潮汕特产直销系统 已通过开题答辩的.doc
07-23
随着互联网的高速发展，人们的生活方式发生了翻天覆地的变化，在过去，人们想要购买很远地方的东西会非常麻烦，因为是通信和交通都不是十分的方便，而现在网络购物成为了人们日常生活中不可或缺的一部分。在这样的背景下，互联网与传统行业的融合已经成为了一种不可阻挡的趋势。对于中国特色的潮汕特产来说，这一趋势也带来了巨大的变革和发展机遇[1]。
Python性能优化：掌握性能分析工具的实战指南
07-23
Python是一种广泛使用的高级编程语言，由Guido van Rossum于1989年底发明，第一个公开发行版发行于1991年。Python的设计哲学强调代码的可读性和简洁的语法（尤其是使用空格缩进来区分代码块，而不是使用大括号或关键词）。这使得Python被认为是一种易于学习的语言，同时具备强大的功能，适合初学者和经验丰富的程序员。 Python的主要特点包括： 1. **易于学习**：Python有相对较少的关键字，结构简单，和一个明确定义的语法。 2. **易于阅读**：Python代码定义的清晰度使得它像可执行伪代码。 3. **易于维护**：Python的成功在于它的源代码是相当容易维护的。 4. **广泛的标准库**：Python的标凑库很庞大，包含用于互联网通信、网络通信、数据压缩、加密、系统管理等的模块。 5. **跨平台**：Python可以在多种操作系统上运行，包括但不限于Windows、Mac OS X、Linux等。 6. **解释型语言**：Python是一种解释型语言，这意味着开发过程中没有编译步骤。 7. **动态类型系统**：Python不会在编写
Bootstrap 4入门与布局指南
《Bootstrap4 Cookbook》是一本专注于前端编程的实用指南，专为开发人员提供Bootstrap 4框架的深入理解和应用技巧。Bootstrap 4是流行的前端开发工具，它致力于简化网页设计与开发流程，使响应式布局和组件化开发变...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值