bootstrap(5)

1图片样式

---

Paste_Image.png

Paste_Image.png

响应式图片 img-responsive，呈现效果img-rounded img-circle img-thumbnail，居中center-block

2标题样式

---

Paste_Image.png

下划线标题 page-header

3辅助类样式

---

• 文本颜色类： text-muted（柔和的） 、text-primary 、text-success 、text-info 、text-warning 、text-danger

• 背景颜色类： bg-primary bg-success bg-info bg-warning bg-danger

• 三角符号：

三角符号.png

• 快速浮动类：pull-left pull-right

• 清除浮动：为父元素添加clearfix

• 让内容块网页居中：

4下拉菜单

---

• dropdown： 将下拉菜单触发器和下拉菜单包含在其中（下拉菜单父元素）
• data-toggle：下拉菜单触发器（取值为 dropdown）
• dropdown-menu：给ul指定下拉菜单的样式
• dropup：向上弹出的菜单（下拉菜单父元素）
• divider：为下拉菜单添加分割线
• disabled：禁用的菜单项

Paste_Image.png

Paste_Image.png

5按钮组

---

• btn-group：按钮组（可以实现将一组按钮放在同一行）
• btn-toolbar：按钮组工具栏（将多个按钮组放在其中）
• 按钮组的尺寸：btn-group-lg btn-group-sm btn-group-xs
• btn-group-verticle：垂直排列的按钮组

Paste_Image.png

Paste_Image.png

6按钮式下拉菜单

---

Paste_Image.png

Paste_Image.png