Bootstrap中文API文档在哪里可以找到?
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文档”的内容,你了解清楚吗?希望对你有所帮助,任何问题可以给我留言,让我们下期再见吧。
-- 展开阅读全文 --
刚看了一圈京东自营的商品,怎么辨真假?入驻流程又是啥?关键步骤得弄明白啊!