bootstrap常用class汇总

2024年2月8日发(作者：)

bootstrap常用class汇总

Bootstrap 是一个非常流行的前端开发框架，提供了丰富的样式和组件，能够快速构建响应式的网页和应用程序。以下是一些 Bootstrap 常用 class 的汇总：

1. Container

- `.container`：定义一个固定宽度的容器，居中显示内容。

- `.container-fluid`：定义一个宽度为100%的容器，充满整个视口。

2. Grid System

- `.row`：定义一个行，用于包裹列。

- `.col-{breakpoint}-{size}`：定义一个列，根据断点显示不同的大小。例如 `.col-md-4` 表示在md断点下宽度为4的列。

3. Typography

-`.h1`到`.h6`：定义不同大小的标题。

- `.lead`：为段落增加领先（lead）的样式。

- `.text-{alignment}`：文本对齐方式，如 `.text-center` 居中对齐。

4. Buttons

- `.btn`：定义一个基础按钮。

- `.btn-{color}`：定义不同颜色的按钮，如 `.btn-primary`。

- `.btn-lg` 和 `.btn-sm`：定义大号和小号的按钮。

- `.btn-block`：使按钮宽度充满父容器。

5. Forms

- `.form-control`：为输入框、文本域和下拉菜单添加样式。

- `.form-check`：定义复选框和单选框样式。

6. Navs

- `.nav`：定义一个导航菜单。

- `.nav-link`：定义一个导航链接。

- `.nav-item`：定义一个导航项。

- `.navbar`：定义一个导航栏。

7. Alerts

- `.alert`：定义一个警告提示框。

- `.alert-{color}`：定义不同颜色的提示框，如 `.alert-success` 成功提示框。

- `.alert-dismissible`：添加一个可关闭的提示框。

8. Badges

- `.badge`：定义一个徽章，用于显示一些标识或计数。

- `.badge-{color}`：定义不同颜色的徽章。

9. Cards

- `.card`：定义一个卡片。

- `.card-body`：定义一个卡片的内容。

- `.card-title`：定义一个卡片的标题。

- `.card-text`：定义一个卡片的文字描述。

- `.card-header` 和 `.card-footer`：定义卡片的头部和底部。

10. Modals

- `.modal`：定义一个模态框。

- `.modal-header`、`.modal-body` 和 `.modal-footer`：定义模态框的头部、内容和底部。

- `.modal-dialog` 和 `.modal-content`：定义模态框的对话框和内容区域。

11. Carousel

- `.carousel`：定义一个轮播组件。

- `.carousel-item`：定义一个轮播项。

- `.carousel-control-prev` 和 `.carousel-control-next`：定义轮播的前一个和后一个按钮。

12. Utilities

- `.d-{value}`：控制元素的显示和隐藏。

- `.p-{value}` 和 `.m-{value}`：设置元素的内边距和外边距。

- `.text-{color}`：设置元素的文本颜色。

- `.bg-{color}`：设置元素的背景颜色。

这里只列举了一些常用的 Bootstrap class，还有更多其他 class

可以参考 Bootstrap 官方文档。Bootstrap 提供了大量的样式和组件来帮助开发者构建出精美的网页和应用程序。