技术无忧-Bootstrap4 教程-Bootstrap4 图形形状

技术无忧

www.js51.top

Bootstrap4 教程

Bootstrap4 教程简介 Bootstrap4 安装使用 Bootstrap4 网格系统 Bootstrap4 文字排版 Bootstrap4 颜色 Bootstrap4 表格 Bootstrap4 图形形状 Bootstrap4 Jumbotron Bootstrap4 信息提示框 Bootstrap4 按钮 Bootstrap4 按钮组 Bootstrap4 徽章 Bootstrap4 进度条 Bootstrap4 分页 Bootstrap4 列表组 Bootstrap4 卡片 Bootstrap4 下拉菜单 Bootstrap4 折叠 Bootstrap4 导航 Bootstrap4 导航栏 Bootstrap4 面包屑导航 Bootstrap4 表单 Bootstrap4 表单控件 Bootstrap4 输入框组 Bootstrap4 自定义表单 Bootstrap4 轮播 Bootstrap4 模态框 Bootstrap4 提示框 Bootstrap4 弹出框 Bootstrap4 滚动监听 Bootstrap4 小工具 Bootstrap4 Flex布局 Bootstrap4 多媒体对象

Bootstrap4 图像形状

圆角图片

.rounded 类可以让图片显示圆角效果：
```
<img src="qiao.jpg" alt="qiao.jpg" class="rounded">
                
```
效果：

椭圆图片

.rounded-circle 类可以设置椭圆形图片：
```
<img src="qiao.jpg" alt="qiao.jpg" class="rounded-circle">
                
```
效果：

缩略图

.img-thumbnail 类用于设置图片缩略图(图片有边框)：
```
<img src="qiao.jpg" alt="qiao.jpg" class="img-thumbnail">
                
```
效果：

图片对齐方式

使用 .float-left 类设置图片左对齐，使用 .float-right 类来设置图片右对齐：
```
<img class="float-left" src="qiao.jpg" alt="qiao.jpg">
<img class="float-right" src="qiao.jpg" alt="qiao.jpg">
                
```
效果：

响应式图片

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

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

.img-fluid 类设置了 max-width: 100%;、height: auto;：
```
<img class="img-fluid" src="qiao.jpg" alt="qiao.jpg">
                
```
效果：
- Bootstrap4 表格
- Bootstrap4 Jumbotron
发表评论