logoOutUI

⌘ K
  • 指南
  • 组件
  • 工具类
  • 其他
v5.3.x
  • 组件总览
  • 通用
    • Color 色彩
    • Icon 图标
    • Button 按钮
    • Text 文本
    • Link 链接
    • Typography 排版
  • 布局
    • Grid 栅格
    • Layout 布局
    • Stack 堆栈
  • 表单
    • Input 输入框
    • Select 选择器
    • Radio 单选框
    • Checkbox 复选框
    • Input group 输入组
    • Float label 浮动标签
    • ColorPicker 颜色选择器
    • Slider 滑块
    • Switch 开关
    • Upload 文件上传
    • Form 表单
  • 导航
    • Affix 固钉
    • Breadcrumb 面包屑
    • Dropdown 下拉菜单
    • NavBar 导航栏
    • NavMenu 导航菜单
    • Tabs 标签页
    • Pagination 分页
  • 数据
    • Table 表格
    • Tag 标签
    • Progress 进度条
    • Badge 徽章
    • Avatar 头像

Avatar 头像

最后更新时间：
Badge 徽章
Copyright © 2021-present 粤ICP备2021136339号
‌
‌
‌
‌

Avatar 头像 用图标、图片或者字符的形式展示用户或事物信息。

基本用法

使用 rounded-circle 类来创建一个圆形头像：

方形头像

默认情况下，图像会显示为方形：

调整大小

可以使用 w-* 和 h-* 类来调整头像的宽度和高度：

文字头像

可以使用 text-* 类来创建一个文字头像：

使用图标库

如果你使用的是 Bootstrap Icons 或其他图标库，也可以创建一个图标作为头像：

组合使用

可以将头像与其他元素组合使用，例如在导航栏或卡片中：

卡片中头像

个人主页头像