Bootstrap中文API文档
简介
Bootstrap 是一个用于开发响应式网站的前端框架，它提供了 HTML、CSS 和 JavaScript 组件，帮助开发者快速构建现代化的网页应用，Bootstrap 的 API 文档详细介绍了如何使用其各个组件及其参数设置，以下是一些常用的 Bootstrap 组件及其使用方法。
网格系统（Grid System）
容器类（Containers）
| Class | 描述 |
.container |
一个固定宽度并支持响应式布局的容器。 |
.container-fluid |
一个全宽的流体容器，用于需要占满整个视口的情况。 |
.container-sm |
小屏幕设备上的容器。 |
.container-md |
中等屏幕设备上的容器。 |
.container-lg |
大屏幕设备上的容器。 |
.container-xl |
超大屏幕设备上的容器。 |
栅格列（Grid Columns）
| Class | 描述 |
.col |
创建等宽的栅格列。.col-4 表示四列中的一列。 |
.col-sm |
针对小屏幕设备的栅格列。 |
.col-md |
针对中等屏幕设备的栅格列。 |
.col-lg |
针对大屏幕设备的栅格列。 |
.col-xl |
针对超大屏幕设备的栅格列。 |
偏移列（Offsetting Columns）
| Class | 描述 |
.offset |
创建偏移列。.offset-4 表示向右偏移四列。 |
.offset-sm |
针对小屏幕设备的偏移列。 |
.offset-md |
针对中等屏幕设备的偏移列。 |
.offset-lg |
针对大屏幕设备的偏移列。 |
.offset-xl |
针对超大屏幕设备的偏移列。 |
排版（Typography）
| Class | 描述 |
.h1 to.h6 |
不同级别的标题，从大到小分别是 h1 到 h6。 |
段落（Paragraphs）
| Class | 描述 |
.lead |
更大的段落文本，用于强调重要内容。 |
.blockquote |
块级引用，通常用于引用较长的文本。 |
表格（Tables）
基本表格（Basic Tables）
| Class | 描述 |
.table |
基础表格样式。 |
.table-striped |
带有条纹行的表格。 |
.table-bordered |
带有边框的表格。 |
.table-hover |
鼠标悬停时高亮的表格行。 |
.table-sm |
紧凑型表格，适用于小屏幕设备。 |
.table-dark |
深色主题的表格。 |
表格头部（Table Headers）
| Class | 描述 |
thead-dark |
深色主题的表头。 |
thead-light |
浅色主题的表头。 |
表单（Forms）
基本表单（Basic Forms）
| Class | 描述 |
.form-control |
表单控件的基本样式。 |
.form-group |
包含标签和控件的表单组。 |
.form-inline |
内联表单样式，使表单控件在同一行显示。 |
.form-row |
用于内联表单的行容器。 |
.form-check |
复选框和单选按钮的自定义样式。 |
输入组（Input Groups）
| Class | 描述 |
.input-group |
输入组的基本样式。 |
.input-group-prepend |
输入组的前缀元素。 |
.input-group-append |
输入组的后缀元素。 |
按钮（Buttons）
基本按钮（Basic Buttons）
| Class | 描述 |
.btn |
基础按钮样式。 |
.btn-primary |
主要动作按钮。 |
.btn-secondary |
次要动作按钮。 |
.btn-success |
成功按钮。 |
.btn-danger |
危险按钮。 |
.btn-warning |
警告按钮。 |
.btn-info |
信息按钮。 |
.btn-light |
轻量按钮。 |
.btn-dark |
深色按钮。 |
.btn-link |
链接样式按钮。 |
按钮大小（Button Sizes）
| Class | 描述 |
.btn-lg |
大号按钮。 |
.btn-sm |
小号按钮。 |
卡片（Cards）
基本卡片（Basic Cards）
| Class | 描述 |
.card |
卡片的基本样式。 |
.card-body |
卡片的主体部分。 |
.card-title |
卡片的标题部分。 |
.card-text |
卡片的文本部分。 |
卡片图像（Card Images）
| Class | 描述 |
.card-img |
卡片图像的基本样式。 |
.card-img-top |
顶部对齐的卡片图像。 |
.card-img-bottom |
底部对齐的卡片图像。 |
导航（Navigation）
基本导航（Basic Navigation）
| Class | 描述 |
.nav |
导航栏的基本样式。 |
.nav-item |
导航项的基本样式。 |
.nav-link |
导航链接的基本样式。 |
.nav-tabs |
标签页导航的基本样式。 |
.nav-pills |
药丸导航的基本样式。 |
模态框（Modals）
基本模态框（Basic Modals）
| Class | 描述 |
.modal |
模态框的基本样式。 |
.modal-dialog |
模态框对话框的基本样式。 |
.modal-content |
模态框内容的基本样式。 |
.modal-header |
模态框头部的基本样式。 |
.modal-title |
模态框标题的基本样式。 |
.modal-body |
模态框主体的基本样式。 |
.modal-footer |
模态框底部的基本样式。 |
轮播图（Carousel）
基本轮播图（Basic Carousels）
| Class | 描述 |
.carousel |
轮播图的基本样式。 |
.carousel-inner |
轮播图内部容器的基本样式。 |
.carousel-item |
轮播图项的基本样式。 |
.carousel-indicators |
轮播图指示器的基本样式。 |
.carousel-control |
轮播图控制的按钮样式。 |
CSS类参考表（CSS Class Reference Table）
这是一个简洁的CSS类参考表，涵盖了Bootstrap中最常用的一些CSS类，每个类别下都有详细的子类和说明，方便开发者快速查找和使用，希望这个参考表能够帮助你更好地理解和使用Bootstrap框架，如果你有任何问题或需要进一步的帮助，请随时联系我！
小伙伴们，上文介绍了“bootstrap中文api文档”的内容，你了解清楚吗？希望对你有所帮助，任何问题可以给我留言，让我们下期再见吧。
原创文章，作者：K-seo，如若转载，请注明出处：https://www.kdun.cn/ask/704910.html
微信扫一扫 