[TOC] ## 概述 每个类基本都支持 `sm`,`md`,`lg`,`xl` ## 边框 ``` rounded-0 rounded-sm rounded rounded-lg rounded-xl rounded-pill rounded-circle rounded-shaped ``` ## 显示 display 不指定设备默认为 xs - `.d-{value}`用于`xs` 指定设备 `.d-{breakpoint}-{value}`用于`sm`,`md`,`lg`和`xl` - `{breakpoint}` 值为 `sm`,`md`,`lg`和`xl` - `{value}` 值为 * `none` * `inline` * `inline-block` * `block` * `table` * `table-cell` * `table-row` * `flex` * `inline-flex` ## 深度（Elevation） `elevation-{1-24}` ## 弹性部门 启用 flex ``` .d-flex .d-inline-flex .d-sm-flex .d-sm-inline-flex .d-md-flex .d-md-inline-flex .d-lg-flex .d-lg-inline-flex .d-xl-flex .d-xl-inline-flex ``` ### Flex direction ``` flex-row flex-row-reverse flex-column flex-column-reverse ``` ### Flex justify ``` justify-start justify-end justify-center justify-space-between justify-space-around justify-space-evenly ``` ### Flex align 垂直位置 ``` align-start align-end align-center align-baseline align-stretch ``` ### Flex wrap 是否wrap ``` flex-nowrap flex-wrap flex-wrap-reverse ``` ## Flex align content flex中整个内容的排列方式 ``` align-content-start align-content-end align-content-center align-content-space-between align-content-space-around align-content-space-evenly align-content-stretch ``` ## 浮动 ``` float-left float-right float-start float-end float-none ``` ## 溢出（Overflow） ``` overflow-auto overflow-hidden overflow-visible overflow-x-auto overflow-x-hidden overflow-x-visible overflow-y-auto overflow-y-hidden overflow-y-visible ``` ## 高度 ``` h-auto height: auto h-screen height: 100dvh h-0 height: 0 h-25 height: 25% h-50 height: 50% h-75 height: 75% h-100 height: 100% ``` ## 宽度 ``` w-auto width: auto w-0 width: 0 w-25 width: 25% w-50 width: 50% w-75 width: 75% w-100 width: 100% ``` ## 间距 语法 ``` {property}{direction}-{size} ``` property ``` m - 应用 margin p - 应用 padding ``` dirction ``` t - top b - bottom l - left r - right x - let和right y - top 和bottom a - 在所有方向应用该间距 ``` size:4的倍数 ``` 0 - 通过设置为 0 来消除所有 margin 或 padding. 1 - 设置 margin 或 padding 为 4px 2 - 设置 margin 或 padding 为 8px 3 - 设置 margin 或 padding 为 12px 4 - 设置 margin 或 padding 为 16px 5 - 设置 margin 或 padding 为 20px 6 - 设置 margin 或 padding 为 24px 7 - 设置 margin 或 padding 为 28px 8 - 设置 margin 或 padding 为 32px 9 - 设置 margin 或 padding 为 36px 10 - 设置 margin 或 padding 为 40px 11 - 设置 margin 或 padding 为 44px 12 - 设置 margin 或 padding 为 48px 13 - 设置 margin 或 padding 为 52px 14 - 设置 margin 或 padding 为 56px 15 - 设置 margin 或 padding 为 60px 16 - 设置 margin 或 padding 为 64px n1 - 设置 margin 为 -4px n2 - 设置 margin 为 -8px n3 - 设置 margin 为 -12px n4 - 设置 margin 为 -16px n5 - 设置 margin 为 -20px n6 - 设置 margin 为 -24px n7 - 设置 margin 为 -28px n8 - 设置 margin 为 -32px n9 - 设置 margin 为 -36px n10 - 设置 margin 为 -40px n11 - 设置 margin 为 -44px n12 - 设置 margin 为 -48px n13 - 设置 margin 为 -52px n14 - 设置 margin 为 -56px n15 - 设置 margin 为 -60px n16 - 设置 margin 为 -64px auto - 设置间距为 auto ``` ## 文字大小 ``` text-h{1,7} text-subtitle-{1,2} text-body-{1,2} text-button text-caption text-overline ``` ## 字体粗细 ``` font-weight-black font-weight-bold font-weight-medium font-weight-regular font-weight-light font-weight-thin font-italic ``` ## 文字方向 ``` text-left text-right text-center text-justify text-start text-end ```