Bootstrap 工具类 #

<!-- 四边 -->
<div class="m-0">无外边距</div>
<div class="m-1">小外边距</div>
<div class="m-2">中等外边距</div>
<div class="m-3">较大外边距</div>
<div class="m-4">大外边距</div>
<div class="m-5">超大外边距</div>
<div class="m-auto">自动外边距</div>

<!-- 单边 -->
<div class="mt-3">上外边距</div>
<div class="mb-3">下外边距</div>
<div class="ms-3">左外边距</div>
<div class="me-3">右外边距</div>

<!-- 水平/垂直 -->
<div class="mx-3">左右外边距</div>
<div class="my-3">上下外边距</div>

<!-- 水平居中 -->
<div class="mx-auto">水平居中</div>

<!-- 四边 -->
<div class="p-0">无内边距</div>
<div class="p-1">小内边距</div>
<div class="p-2">中等内边距</div>
<div class="p-3">较大内边距</div>
<div class="p-4">大内边距</div>
<div class="p-5">超大内边距</div>

<!-- 单边 -->
<div class="pt-3">上内边距</div>
<div class="pb-3">下内边距</div>
<div class="ps-3">左内边距</div>
<div class="pe-3">右内边距</div>

<!-- 水平/垂直 -->
<div class="px-3">左右内边距</div>
<div class="py-3">上下内边距</div>

<div class="m-0 m-md-3 m-lg-5">
  响应式外边距
</div>

<div class="p-2 p-md-4">
  响应式内边距
</div>

<div class="border">四边边框</div>
<div class="border-top">上边框</div>
<div class="border-end">右边框</div>
<div class="border-bottom">下边框</div>
<div class="border-start">左边框</div>

<div class="border-0">无边框</div>
<div class="border-top-0">无上边框</div>
<div class="border-end-0">无右边框</div>
<div class="border-bottom-0">无下边框</div>
<div class="border-start-0">无左边框</div>

<div class="border border-primary">主要边框</div>
<div class="border border-secondary">次要边框</div>
<div class="border border-success">成功边框</div>
<div class="border border-danger">危险边框</div>
<div class="border border-warning">警告边框</div>
<div class="border border-info">信息边框</div>
<div class="border border-light">浅色边框</div>
<div class="border border-dark">深色边框</div>
<div class="border border-white">白色边框</div>

<div class="border border-1">1px 边框</div>
<div class="border border-2">2px 边框</div>
<div class="border border-3">3px 边框</div>
<div class="border border-4">4px 边框</div>
<div class="border border-5">5px 边框</div>

<div class="rounded">圆角</div>
<div class="rounded-top">上圆角</div>
<div class="rounded-end">右圆角</div>
<div class="rounded-bottom">下圆角</div>
<div class="rounded-start">左圆角</div>
<div class="rounded-circle">圆形</div>
<div class="rounded-pill">胶囊形</div>
<div class="rounded-0">无圆角</div>
<div class="rounded-1">小圆角</div>
<div class="rounded-2">默认圆角</div>
<div class="rounded-3">大圆角</div>
<div class="rounded-4">更大圆角</div>
<div class="rounded-5">最大圆角</div>

<div class="d-none">不显示</div>
<div class="d-inline">行内元素</div>
<div class="d-inline-block">行内块元素</div>
<div class="d-block">块级元素</div>
<div class="d-grid">网格容器</div>
<div class="d-table">表格</div>
<div class="d-table-row">表格行</div>
<div class="d-table-cell">表格单元格</div>

<!-- 在所有设备上隐藏 -->
<div class="d-none">隐藏</div>

<!-- 仅在 sm 设备上显示 -->
<div class="d-none d-sm-block">仅 sm 显示</div>

<!-- 仅在 md 设备上隐藏 -->
<div class="d-md-none">md 隐藏</div>

<!-- 仅在 lg 设备上显示 -->
<div class="d-none d-lg-block">仅 lg 显示</div>

<div class="d-print-none">打印时隐藏</div>
<div class="d-none d-print-block">仅打印时显示</div>

<div class="d-flex">Flex 容器</div>
<div class="d-inline-flex">行内 Flex 容器</div>

<div class="d-flex flex-row">水平排列（默认）</div>
<div class="d-flex flex-row-reverse">水平反向排列</div>
<div class="d-flex flex-column">垂直排列</div>
<div class="d-flex flex-column-reverse">垂直反向排列</div>

<div class="d-flex justify-content-start">起点对齐</div>
<div class="d-flex justify-content-end">终点对齐</div>
<div class="d-flex justify-content-center">居中对齐</div>
<div class="d-flex justify-content-between">两端对齐</div>
<div class="d-flex justify-content-around">环绕对齐</div>
<div class="d-flex justify-content-evenly">均匀对齐</div>

<div class="d-flex align-items-start">起点对齐</div>
<div class="d-flex align-items-end">终点对齐</div>
<div class="d-flex align-items-center">居中对齐</div>
<div class="d-flex align-items-baseline">基线对齐</div>
<div class="d-flex align-items-stretch">拉伸对齐</div>

<div class="d-flex">
  <div class="align-self-start">起点对齐</div>
  <div class="align-self-center">居中对齐</div>
  <div class="align-self-end">终点对齐</div>
</div>

<div class="d-flex flex-nowrap">不换行</div>
<div class="d-flex flex-wrap">换行</div>
<div class="d-flex flex-wrap-reverse">反向换行</div>

<div class="d-flex flex-wrap align-content-start">起点对齐</div>
<div class="d-flex flex-wrap align-content-center">居中对齐</div>
<div class="d-flex flex-wrap align-content-end">终点对齐</div>
<div class="d-flex flex-wrap align-content-between">两端对齐</div>
<div class="d-flex flex-wrap align-content-around">环绕对齐</div>
<div class="d-flex flex-wrap align-content-stretch">拉伸对齐</div>

<!-- 等宽 -->
<div class="d-flex">
  <div class="flex-fill">等宽项目</div>
  <div class="flex-fill">等宽项目</div>
</div>

<!-- 增长 -->
<div class="d-flex">
  <div class="flex-grow-1">增长填充</div>
  <div>固定宽度</div>
</div>

<!-- 收缩 -->
<div class="d-flex">
  <div class="flex-shrink-1">可收缩</div>
</div>

<!-- 自动边距 -->
<div class="d-flex">
  <div class="me-auto">自动推到右边</div>
  <div>项目</div>
</div>

<!-- 排序 -->
<div class="d-flex">
  <div class="order-3">第三个</div>
  <div class="order-1">第一个</div>
  <div class="order-2">第二个</div>
</div>

<p class="text-start">左对齐</p>
<p class="text-center">居中对齐</p>
<p class="text-end">右对齐</p>

<p class="text-wrap">自动换行</p>
<p class="text-nowrap">不换行</p>
<p class="text-break">强制断行</p>

<p class="text-lowercase">小写</p>
<p class="text-uppercase">大写</p>
<p class="text-capitalize">首字母大写</p>

<p class="fw-bold">加粗</p>
<p class="fw-bolder">更粗</p>
<p class="fw-normal">正常</p>
<p class="fw-light">轻量</p>
<p class="fw-lighter">更轻</p>

<p class="fst-italic">斜体</p>
<p class="fst-normal">正常</p>

<p class="fs-1">最大</p>
<p class="fs-2">较大</p>
<p class="fs-3">大</p>
<p class="fs-4">中等</p>
<p class="fs-5">小</p>
<p class="fs-6">最小</p>

<p class="lh-1">行高 1</p>
<p class="lh-sm">小行高</p>
<p class="lh-base">默认行高</p>
<p class="lh-lg">大行高</p>

<p class="text-decoration-none">无装饰</p>
<p class="text-decoration-underline">下划线</p>
<p class="text-decoration-line-through">删除线</p>

<div class="bg-primary">主要背景</div>
<div class="bg-secondary">次要背景</div>
<div class="bg-success">成功背景</div>
<div class="bg-danger">危险背景</div>
<div class="bg-warning">警告背景</div>
<div class="bg-info">信息背景</div>
<div class="bg-light">浅色背景</div>
<div class="bg-dark">深色背景</div>
<div class="bg-white">白色背景</div>
<div class="bg-transparent">透明背景</div>

<div class="bg-primary bg-gradient">渐变背景</div>

<div class="bg-primary bg-opacity-100">100%</div>
<div class="bg-primary bg-opacity-75">75%</div>
<div class="bg-primary bg-opacity-50">50%</div>
<div class="bg-primary bg-opacity-25">25%</div>
<div class="bg-primary bg-opacity-10">10%</div>

<div class="w-25">25% 宽度</div>
<div class="w-50">50% 宽度</div>
<div class="w-75">75% 宽度</div>
<div class="w-100">100% 宽度</div>
<div class="w-auto">自动宽度</div>

<div class="h-25">25% 高度</div>
<div class="h-50">50% 高度</div>
<div class="h-75">75% 高度</div>
<div class="h-100">100% 高度</div>
<div class="h-auto">自动高度</div>

<div class="mw-100">最大宽度 100%</div>
<div class="mh-100">最大高度 100%</div>
<div class="vw-100">视口宽度</div>
<div class="vh-100">视口高度</div>

<div class="position-static">静态定位</div>
<div class="position-relative">相对定位</div>
<div class="position-absolute">绝对定位</div>
<div class="position-fixed">固定定位</div>
<div class="position-sticky">粘性定位</div>

<div class="position-absolute top-0">顶部</div>
<div class="position-absolute bottom-0">底部</div>
<div class="position-absolute start-0">左侧</div>
<div class="position-absolute end-0">右侧</div>

<div class="position-absolute top-0 start-0">左上角</div>
<div class="position-absolute top-0 end-0">右上角</div>
<div class="position-absolute bottom-0 start-0">左下角</div>
<div class="position-absolute bottom-0 end-0">右下角</div>

<div class="position-absolute top-50 start-50 translate-middle">居中</div>

<div class="shadow-none">无阴影</div>
<div class="shadow-sm">小阴影</div>
<div class="shadow">默认阴影</div>
<div class="shadow-lg">大阴影</div>

<div class="opacity-100">100% 不透明</div>
<div class="opacity-75">75% 不透明</div>
<div class="opacity-50">50% 不透明</div>
<div class="opacity-25">25% 不透明</div>
<div class="opacity-0">完全透明</div>

<div class="overflow-auto">自动溢出</div>
<div class="overflow-hidden">隐藏溢出</div>
<div class="overflow-visible">可见溢出</div>
<div class="overflow-scroll">滚动溢出</div>

<div class="float-start">左浮动</div>
<div class="float-end">右浮动</div>
<div class="float-none">无浮动</div>

<div class="clearfix">
  <div class="float-start">左浮动</div>
  <div class="float-end">右浮动</div>
</div>

<div class="pointer-event-none">禁用鼠标事件</div>
<div class="pointer-event-auto">启用鼠标事件</div>

<div class="user-select-all">全选</div>
<div class="user-select-auto">自动</div>
<div class="user-select-none">禁止选择</div>

<div class="visible">可见</div>
<div class="invisible">不可见（占位）</div>

<div class="d-flex justify-content-center align-items-center vh-100">
  <div>垂直水平居中内容</div>
</div>

<div class="row g-4">
  <div class="col-md-4">
    <div class="card h-100 shadow-sm">
      <div class="card-body">
        <h5 class="card-title">卡片标题</h5>
        <p class="card-text">卡片内容</p>
      </div>
    </div>
  </div>
</div>

<div class="position-fixed bottom-0 start-0 end-0 bg-white border-top p-3">
  固定在底部的内容
</div>

<div class="position-relative d-inline-block">
  <span>消息</span>
  <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
    5
  </span>
</div>

<!-- 推荐：使用工具类 -->
<div class="mt-3 p-4 text-center bg-light rounded">

<!-- 不推荐：内联样式 -->
<div style="margin-top: 16px; padding: 24px; text-align: center;">

<!-- 移动优先 -->
<div class="text-center text-md-start">
  移动端居中，桌面端左对齐
</div>

<div class="d-flex justify-content-between align-items-center p-3 border rounded shadow-sm">
  <span>内容</span>
  <button class="btn btn-primary btn-sm">按钮</button>
</div>