显示属性 (Display property)

1. 值 (Notation)

类	效果	CSS方式
`.d-none`	该元素不会被显示	display: none;
`.d-inline`	该元素会被显示为内联元素, 元素前后没有换行符, 不允许设置元素高度和宽度	`display: inline;`
`.d-inline-block`	该元素会被显示为内联元素, 元素前后没有换行符, 允许设置元素高度和宽度	`display: inline-block;`
`.d-block`	该元素将显示为块级元素, 此元素前后会带有换行符, 即独占一行	`display: block;`
`.d-grid`	该元素将使用网格布局方式	`display: grid;`
`.d-table`	该元素会作为块级表格来显示( 类似 <table> ), 表格前后带有换行符	`display: table;`
`.d-table-cell`	该元素会作为一个表格单元格显示( 类似 <td> 和 &ltth> )	`display: table-cell;`
`.d-table-row`	该元素会作为块级表格行来显示( 类似 <tr> )	`display: table-row`
`.d-flex`	该元素将使用弹性布局方式	`display: flex;`
`.d-inline-flex`	该元素将使用弹性布局方式, 且为内联块级	`display: inline-flex;`

响应式

d-{断点}-{取值}

2. 元素的显示和隐藏 (Hiding elements)

屏幕尺寸	类
全部隐藏	`.d-none`
仅xs隐藏	`.d-none .d-sm-block`
仅sm隐藏	`.d-sm-none .d-md-block`
仅md隐藏	`.d-md-none .d-lg-block`
仅lg隐藏	`.d-lg-none .d-xl-block`
仅xl隐藏	`.d-xl-none .d-xxl-block`
仅xxl隐藏	`.d-xxl-none`
显示全部	`.d-block`
仅xs显示	`.d-block .d-sm-none`
仅sm显示	`.d-none .d-sm-block .d-md-none`
仅md显示	`.d-none .d-md-block .d-lg-none`
仅lg显示	`.d-none .d-lg-block .d-xl-none`
仅xl显示	`.d-none .d-xl-block .d-xxl-none`
仅xxl显示	`.d-none .d-xxl-block`

浮动流定位机制 (Float)

Bootstrap 5 官方文档

1. 左浮动 class = “float-start”

2. 右浮动 class = “float-end”

3. 不浮动 class = “float-none”

  <div class="float-start">Float start on all viewport sizes</div><br>
  <div class="float-end">Float end on all viewport sizes</div><br>
  <div class="float-none">Don't float on all viewport sizes</div>

CSS

div {
  height: 30px;
  width: 300px;
  background-color: greenyellow;
}

4. 响应式的

.float-start
.float-end
.float-none
.float-sm-start
.float-sm-end
.float-sm-none
.float-md-start
.float-md-end
.float-md-none
.float-lg-start
.float-lg-end
.float-lg-none
.float-xl-start
.float-xl-end
.float-xl-none
.float-xxl-start
.float-xxl-end
.float-xxl-none

文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/122812.html