学习 Bootstrap 5 之 Display property 和 Float

Posted 2022-02-08 _DiMinisH

学习 Bootstrap 5 之 显示属性 和 浮动流定位机制

• 显示属性 (Display property)
• • 1. 值 (Notation)
  • 2. 元素的显示和隐藏 (Hiding elements)
• 浮动流定位机制 (Float)
• • 1. 左浮动 class = "float-start"
  • 2. 右浮动 class = "float-end"
  • 3. 不浮动 class = "float-none"
  • 4. 响应式的

显示属性 (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> 和 &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