学习 Bootstrap 5 之 显示属性 和 浮动流定位机制
显示属性 (Display property)
Bootstrap 5 官方文档
设置元素如何显示
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> 和 <th> ) | 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)
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