基本用法
格式：.d-{value} 或 .d-{breakpoint}-{value}
| 类名 | 效果 |
|---|
.d-none | 隐藏元素 |
.d-inline | 行内显示 |
.d-inline-block | 行内块级 |
.d-block | 块级显示 |
.d-grid | CSS Grid |
.d-inline-grid | 行内 Grid |
.d-table | 表格显示 |
.d-table-cell | 表格单元格 |
.d-table-row | 表格行 |
.d-flex | 弹性盒 |
.d-inline-flex | 行内弹性盒 |
<div class="d-block">块级元素（默认）</div>
<span class="d-inline-block p-3 bg-light border">行内块级</span>
<div class="d-flex">弹性盒容器</div>
<div class="d-none">隐藏元素</div>
响应式隐藏
结合断点控制元素在不同屏幕尺寸下的显隐：
<div class="d-none d-md-block">仅在中等屏幕及以上显示</div>
<div class="d-lg-none">在大屏幕隐藏</div>
<div class="d-block d-sm-none">仅在超小屏幕显示</div>
<div class="d-none d-md-flex">中等屏幕以上显示为弹性盒</div>
打印显示
| 类名 | 用途 |
|---|
.d-print-none | 打印时隐藏 |
.d-print-inline | 打印时行内显示 |
.d-print-block | 打印时块级显示 |
.d-print-flex | 打印时弹性盒 |
<div class="d-print-none">此区域打印时隐藏</div>
<div class="d-none d-print-block">仅在打印时显示</div>