Bootstrap中文API文档在哪里可以找到?

小贝
预计阅读时长 10 分钟
位置: 首页 小红书 正文

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 输入组的后缀元素。
bootstrap中文api文档

按钮(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 轮播图控制的按钮样式。
bootstrap中文api文档

CSS类参考表(CSS Class Reference Table)

这是一个简洁的CSS类参考表,涵盖了Bootstrap中最常用的一些CSS类,每个类别下都有详细的子类和说明,方便开发者快速查找和使用,希望这个参考表能够帮助你更好地理解和使用Bootstrap框架,如果你有任何问题或需要进一步的帮助,请随时联系我!

小伙伴们,上文介绍了“bootstrap中文api文档”的内容,你了解清楚吗?希望对你有所帮助,任何问题可以给我留言,让我们下期再见吧。

-- 展开阅读全文 --
头像
如何为APP选择合适的域名?
« 上一篇 2024-12-05
如何进行短域名绑定?
下一篇 » 2024-12-05
取消
微信二维码
支付宝二维码

发表评论

暂无评论,1人围观

头像 贾涛 说道:
2024-08-23 · Google Chrome 86.0.4240.198 Windows 10 x64

刚看了一圈京东自营的商品,怎么辨真假?入驻流程又是啥?关键步骤得弄明白啊!

目录[+]