Bootstrap 5-按钮

按钮

 • btn

代码图

按钮关闭图标

• btn-close

代码图

 效果图

---

按钮颜色

 • btn（默认，白色）

 • btn-primary（主要，蓝色）

 • btn-secondary（次要，灰色）

 • btn-success（成功，绿色）

 • btn-info（信息，天蓝色）

 • btn-warning（警告，黄色）

 • btn-danger（危险，红色）

 • btn-dark（深色，黑色）

 • btn-light（浅色，浅白色）

 • btn-link（链接按钮）

所有的按钮颜色的效果图

代码图

效果图

按钮轮廓

• btn-outline

代码图

按钮轮廓颜色

 • btn-outline-（默认，白色）

 • btn-outline-primary（主要，蓝色）

 • btn-outline-secondary（次要，灰色）

 • btn-out1ine-success（成功，绿色）

 • btn-out1ine-info（信息，天蓝色）

 • btn-outline-warning（警告，黄色）

 • btn-outline-danger（危险，红色）

 • btn-out1ine-dark（深色，深绿）

 • btn-outline-light text-dark（浅色，浅白色）

所有的按钮轮廓颜色的效果图

代码图

效果图

按钮尺寸

 • btn-lg（大型按钮） 

 • btn-sm（小型按钮）

代码图

效果图

块级/全宽按钮

特征:块级按钮是全宽的，占页面某一部全部宽度

块级/全宽按钮容器

 • d-grid

代码图

全宽按钮

 • btn-block

代码图

效果图

---

块级按钮间距

• gap-1~5

代码图

效果图

活动/禁用按钮

 • active（活动，显示按下状态）

 • disabled（禁用，显示不可点击）

代码图

效果图