BootstrapVue的使用《关于Bootstrap工具样式-----display相关》

Bootstrap官方出品：BootstrapVue去官网看看吧

关于工具样式，官方文档（快速通道）

display常用工具样式举例（Bootstrap版本>=v4）

• 关于display，指定元素的渲染出框的类型，官方文档（快速通道），常见的有：
  指定为行内元素

  1	<div class="d-inline">d-inline</div>

  指定为流元素

  1	<div class="d-flex">d-flex</div>

  可选项可以在_variables.scss中找到如下定义，关于如何找这个文件，见上一篇博文：

  1	$displays: none, inline, inline-block, block, table, table-row, table-cell, flex, inline-flex !default;

  用法：value的可选值为上述scss中定义的类别，breakpoint的可选值有sm,md,lg,xl，意为在{breakpoint}的情况下才生效

  1 2	.d-{value} for xs .d-{breakpoint}-{value} for sm, md, lg, and xl.

  举例如下：

  渲染效果	样式
  隐藏	.d-none
  只在屏幕大小满足xs的情况下隐藏	.d-none .d-sm-block
  只在屏幕大小满足sm的情况下隐藏	.d-sm-none .d-md-block
  只在屏幕大小满足xl的情况下隐藏	.d-xl-none
  可见	.d-block
  只在屏幕大小满足lg的情况下可见	.d-none .d-lg-block .d-xl-none

• 关于display中的flex类型，官方文档（快速通道），常见有：
  指定为流类型的盒子

  1	<div class="d-flex">I'm a flexbox container!</div>

  指定为流类型的盒子单元

  1	<div class="d-inline-flex">I'm an inline flexbox container!</div>

  为流类型指定流方向：

  1 2 3 4 5

  <div class="d-flex flex-row"> <div>Flex item 1</div> <div>Flex item 2</div> <div>Flex item 3</div> </div>

  用法：value的可选值为row/column，如果方向有反转，在样式尾部追加reverse，breakpoint的可选值有sm,md,lg,xl，意为在{breakpoint}的情况下才生效

  1 2	.flex-{value} for xs .flex-{breakpoint}-{value} for sm, md, lg, and xl.

  举例如下：

  渲染效果	样式
  水平方向	.flex-row
  反转水平方向	.flex-row-reverse
  反转竖直方向	.flex-column-reverse
  只在屏幕像素大小满足sm情况下竖直方向	.flex-sm-column
  只在屏幕像素大小满足sm情况下反转竖直方向	.flex-sm-column-reverse

  为流类型指定主轴（x轴，y轴方向）对齐方式：
  居中对齐：

  1	<div class="d-flex justify-content-center">...</div>

  用法：value的可选值为start/end/center/between/around，breakpoint的可选值有sm,md,lg,xl，意为在{breakpoint}的情况下才生效

  1 2	.justify-content-{value} for xs .justify-content-{breakpoint}-{value} for sm, md, lg, and xl.

  渲染效果	样式
  居中对齐	.justify-content-center
  只在屏幕像素大小满足sm情况下居中对齐	.justify-content-sm-center

  为流类型指定交叉轴（x轴，y轴方向）对齐方式：

  1	<div class="d-flex align-items-start">...</div>

  用法：value的可选值为start/end/center/baseline/stretch，breakpoint的可选值有sm,md,lg,xl，意为在{breakpoint}的情况下才生效

  1 2	.align-items-{value} for xs .align-items-{breakpoint}-{value} for sm, md, lg, and xl.

  渲染效果	样式
  居中对齐	.align-items-center
  只在屏幕像素大小满足sm情况下居中对齐	.align-items-sm-center

  注：对主轴和交叉轴不太清楚的，可以查看此篇博文：Flutter中MainAxisAlignment和CrossAxisAlignment详解（快速通道），这个大佬写得很详细，有兴趣的可以细看。

常用的display相关的样式，暂时写到这了。

---

• ← Previous Post
• Next Post →

---

---