Bootstrap4 教程
1. Bootstrap4 教程 2. Bootstrap4 安装使用 3. Bootstrap4 网格系统 4. Bootstrap4 文字排版 5. Bootstrap4 颜色 6. Bootstrap4 图像形状 7. Bootstrap4 Jumbotron 8. Bootstrap4 信息提示框 9. Bootstrap4 按钮 10. Bootstrap4 按钮组 11. Bootstrap4 徽章(Badges) 12. Bootstrap4 进度条 13. Bootstrap4 分页 14. Bootstrap4 列表组 15. Bootstrap4 卡片 16. Bootstrap4 下拉菜单 17. Bootstrap4 折叠 18. Bootstrap4 导航 19. Bootstrap4 导航栏 20. Bootstrap4 表单 21. Bootstrap4 表单控件 22. Bootstrap4 轮播 23. Bootstrap4 模态框 24. Bootstrap4 提示框 25. Bootstrap4 弹出框 26. Bootstrap4 滚动监听 27. Bootstrap4 小工具 28. Bootstrap 4 Flex(弹性)布局 29. Bootstrap 4 多媒体对象 30. Bootstrap4 创建一个网页

Bootstrap4 图像形状

Bootstrap4 图像形状

圆角图片

.rounded 类可以让图片显示圆角效果:

实例

<img src="cinqueterre.jpg" class="rounded" alt="Cinque Terre">

55面试教程网 »

椭圆图片

.rounded-circle 类可以设置椭圆形图片:

实例

<img src="cinqueterre.jpg" class="rounded-circle" alt="Cinque Terre">

55面试教程网 »

缩略图

.img-thumbnail 类用于设置图片缩略图(图片有边框):

实例

<img src="cinqueterre.jpg" class="img-thumbnail" alt="Cinque Terre">

55面试教程网 »

图片对齐方式

使用 .float-right 类来设置图片右对齐,使用 .float-left 类设置图片左对齐:

实例

<img src="paris.jpg" class="float-left"> <img src="cinqueterre.jpg" class="float-right">

55面试教程网 »

响应式图片

图像有各种各样的尺寸,我们需要根据屏幕的大小自动适应。

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

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

实例

<img class="img-fluid" src="img_chania.jpg" alt="Chania">

55面试教程网 »