admin管理员组文章数量:1530518
2024年7月26日发(作者：)
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 提供了大量的样式和组件来
帮助开发者构建出精美的网页和应用程序。
版权声明：本文标题：bootstrap常用class汇总 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://m.elefans.com/dongtai/1721998903a909768.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论