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

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

上一篇：BootstrapVue的使用《安装与通用典型属性举例》（快速通道）

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

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

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

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

  指定为流元素

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

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

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

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

  .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类型，官方文档（快速通道），常见有：
  指定为流类型的盒子

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

  指定为流类型的盒子单元

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

  为流类型指定流方向：

  <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}的情况下才生效

  .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轴方向）对齐方式：
  居中对齐：

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

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

  .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轴方向）对齐方式：

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

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

  .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相关的样式，暂时写到这了。
下一篇：BootstrapVue的使用《关于Bootstrap工具样式-----边距相关》（快速通道）