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

彭存
2023-12-01

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,如果方向有反转,在样式尾部追加reversebreakpoint的可选值有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/aroundbreakpoint的可选值有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/stretchbreakpoint的可选值有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工具样式-----边距相关》(快速通道)

 类似资料: