按钮
按钮是用来触发一些动作。通常用在表单、对话框、菜单上面。好的按钮设计能够引导用户高效的达到目的。
使用方法
使用 .btn
类来获得按钮的外观和交互体验,通常用在元素 <button>
或 <a>
上。
配合丰富的CSS 工具类来实现不同按钮的外观。
图标按钮
按钮配合图标组件一起使用时,自动呈现为图标按钮。
外观
外观类型
配合使用CSS 工具类来实现不同按钮的外观。下面展示各种工具类的外观效果。
链接按钮
使用 .btn-link
类来获得链接按钮的外观。
按钮圆角
搭配 CSS 工具类 rounded-*
为按钮应用不同的圆角样式。
按钮阴影效果
搭配 CSS 工具类 shadow-*
为按钮应用不同的阴影样式。
尺寸
除了默认大小,按钮还提供了额外的 4 种预设尺寸。
形状
正方形按钮
通过工具类 square
可以让按钮获得正方形外观,通常作为图标按钮使用。
圆形按钮
当与工具类 circle
与 square
一起使用时则获得圆形按钮。
状态
禁用状态
为按钮提供 disabled="disabled"
属性或 disabled
工具类来禁用按钮。被禁用的按钮将无法响应点击事件。
激活状态
为按钮添加 active
类启用激活状态。
加载中状态
为按钮提供动画图标实现加载中状态。
CSS 类
按钮提供了如下 CSS 类:
类 | 类型 | 作用 |
---|---|---|
btn | 实体类 | 元素作为按钮组件 |
btn-link | 修饰类 | 使用链接按钮外观 |
square | 工具类 | 按钮使用正方形外观 |
size-xs | 工具类 | 按钮使用超小号尺寸 |
size-sm | 工具类 | 按钮使用小号尺寸 |
size-lg | 工具类 | 按钮使用大号尺寸 |
size-xl | 工具类 | 按钮使用超大号尺寸 |
CSS 变量
变量名称 | 变量含义 |
---|---|
--btn-radius | 按钮圆角 |
--btn-bg | 按钮背景颜色 |
--btn-border-color | 按钮边框颜色 |
--btn-height | 按钮高度 |