Bootstrap 4 常用工具类速查表

• 文本与字体控制

  1. 加粗：font-weight-bold（对应 font-weight: 700）

  2. 斜体：font-italic

  3. 对齐方式：text-left、text-center、text-right、text-justify

• 大小写转换：

  1. text-lowercase → 全部小写

  2. text-uppercase → 全部大写

  3. text-capitalize → 首字母大写

• 文本截断：text-truncate（配合固定宽度使用，超出部分显示省略号）

• 外边距（Margin）：

  1. m-0 ~ m-5：设置上下左右外边距（0=0px, 1=0.25rem, 2=0.5rem, ..., 5=3rem）

  2. mt-3：仅上边距

  3. mb-2：仅下边距

  4. ml-auto：左边距自动（常用于右对齐）

  5. mr-auto：右边距自动（常用于左对齐）

• 内边距（Padding）：

  1. p-0 ~ p-5：设置上下左右内边距

  2. pt-4：仅上内边距

  3. pb-1：仅下内边距

  4. pl-3：仅左内边距

  5. pr-2：仅右内边距

• 响应式显示：

  1. d-none：默认隐藏

  2. d-block：块级显示

  3. d-inline：行内显示

  4. d-flex：弹性盒布局

  5. d-grid：网格布局

• 响应式断点控制：

  1. d-md-none：在中等屏幕及以上隐藏

  2. d-lg-block：在大屏幕及以上显示为块级

  3. d-sm-flex：在小屏幕及以上显示为弹性盒

• 文字颜色：

  text-primary、text-secondary、text-success、text-danger、text-warning、text-info、text-light、text-dark、text-muted

• 背景颜色：

  bg-primary、bg-secondary、bg-success、bg-danger、bg-warning、bg-info、bg-light、bg-dark、bg-white、bg-transparent

• 边框：

  1. border：添加默认边框 2. border-top、border-bottom、border-left、border-right：单边边框 3. border-0`：移除所有边框

• 圆角：

  1. rounded：默认圆角

  2. rounded-top、rounded-bottom、rounded-left、rounded-right：单边圆角

  3. rounded-circle：圆形（需正方形图片）

  4. rounded-pill：胶囊形（两端半圆）

• 尺寸与定位

  1. 宽度/高度：

  w-25、w-50、w-75、w-100：宽度百分比

  h-25、h-50、h-75、h-100：高度百分比

  mw-100：最大宽度100%

  mh-100：最大高度100%

  2. 定位：

  position-static、position-relative、position-absolute、position-fixed、position-sticky、 fixed-top、fixed-bottom、sticky-top

  3. 栅格系统（核心布局）

  容器：

  container：固定宽度居中容器

  container-fluid：全宽流体容器

• 行与列：

  1. row：行容器（必须包裹列）

  2. col：自动等宽列

  3. col-6：占6列（共12列）

  4. col-md-4：在中等屏幕及以上占4列

  5. offset-md-2：在中等屏幕及以上向右偏移2列

• Flexbox 弹性布局工具类

  Bootstrap 4 基于 Flexbox 构建，提供了大量无需编写自定义 CSS 即可控制对齐和排列的类

  1. 方向控制：flex-row、flex-column、flex-row-reverse、flex-column-reverse

  2. 主轴对齐：justify-content-start、justify-content-end、justify-content-center、justify-content-between、justify-content-around

  3. 交叉轴对齐：align-items-start、align-items-end、align-items-center、align-items-baseline、align-items-stretch

  4. 换行控制：flex-wrap、flex-nowrap、flex-wrap-reverse

  5. 增长与收缩：flex-grow-0、flex-grow-1、flex-shrink-0、flex-shrink-1

• 定位与浮动工具类

  用于快速调整元素在页面中的位置：

  1. 定位方式：position-static、position-relative、position-absolute、position-fixed、position-sticky

  2. 快捷定位：fixed-top、fixed-bottom、sticky-top

  3. 位移控制：top-0、bottom-0、left-0、right-0（常与 position-absolute 配合使用）

  4. 浮动：float-left、float-right、float-none（响应式变体如 float-md-right）

• 尺寸与溢出控制

  精确控制元素的宽高及内容溢出行为：

  1. 百分比尺寸：w-25、w-50、w-75、w-100、w-auto（高度同理 h-*）

  2. 视口尺寸：vw-100（宽度100%视口）、vh-100（高度100%视口）

  3. 最大尺寸：mw-100、mh-100

  4. 溢出处理：overflow-auto、overflow-hidden、overflow-visible、overflow-scroll

• 可见性与交互状态

  控制元素的视觉呈现和用户交互：

  1. 可见性切换：visible、invisible（注意：invisible 仍占据空间，而 d-none 不占空间）

  2. 鼠标指针：cursor-pointer、cursor-default、cursor-not-allowed

  3. 用户选择：user-select-all、user-select-auto、user-select-none

  4. 禁用状态：disabled（通常用于按钮或链接，需配合 JS 或 pointer-events: none 彻底禁用）

• 链接与列表样式

  快速统一链接和列表的视觉风格：

  1. 链接颜色：link-primary、link-secondary、link-success、link-danger 等（悬停时自动变色）

  2. 链接重置：stretched-link（让父容器变为可点击区域，常用于卡片）

  3. 列表样式：list-unstyled（移除默认列表样式）、list-inline / list-inline-item（水平排列列表项）