[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 ```