20201104冯佳丽

四、工具类

1、边框（Borders）

边框方向：

​ border:四周边框

​ border-top：上边框

​ border-bottom:下边框

​ border-left:左边框

​ border-right：左边框

边框颜色：

​ border-XXX:XXX是颜色的样式

边框角度：

​ rounded 0.25rem的圆角

​ rounded-top 设置上圆角为0.25rem

​ rounded-right 设置右圆角为0.25rem

​ rounded-bottom 设置下圆角为0.25rem

​ rounded-left 设置左圆角为0.25rem

​ rounded-circle 50%的圆角

​ rounded-pill 胶囊圆角

​ rounded-0 清除圆角

圆角的大小

​ rounded-sm：小圆角

​ rounded-lg：大圆角

2、颜色（Colors）

背景颜色

​ .bg-XXX：加颜色的样式，构成了背景的颜色

 <div class="p-3 mb-2 bg-primary text-white">.bg-primary</div>
<div class="p-3 mb-2 bg-secondary text-white bg-gradient-danger">.bg-secondary</div>
<div class="p-3 mb-2 bg-success text-white">.bg-success</div>
<div class="p-3 mb-2 bg-danger text-white">.bg-danger</div>
<div class="p-3 mb-2 bg-warning text-dark">.bg-warning</div>
<div class="p-3 mb-2 bg-info text-white">.bg-info</div>
<div class="p-3 mb-2 bg-light text-dark">.bg-light</div>
<div class="p-3 mb-2 bg-dark text-white">.bg-dark</div>
<div class="p-3 mb-2 bg-white text-dark">.bg-white</div>
<div class="p-3 mb-2 bg-transparent text-dark">.bg-transparent</div>

文本颜色

​ text-XXX:加颜色的样式，构成了文本的颜色

<p class="text-secondary">.text-secondary</p>
<p class="text-success">.text-success</p>
<p class="text-danger">.text-danger</p>
<p class="text-warning">.text-warning</p>
<p class="text-info">.text-info</p>
<p class="text-light bg-dark">.text-light</p>
<p class="text-dark">.text-dark</p>
<p class="text-body">.text-body</p>
<p class="text-muted">.text-muted</p>
<p class="text-white bg-dark">.text-white</p>
<p class="text-black-50">.text-black-50</p>
<p class="text-white-50 bg-dark">.text-white-50</p>
<p class="text-primary">.text-primary</p>

3、Display属性

​ d-inline： 把块级元素转化为行内元素

​ d-block：把行内元素转化为块级元素

列印显示

.d-print-none

.d-print-inline

.d-print-inline-block

.d-print-block

.d-print-table

.d-print-table-row

.d-print-table-cell

.d-print-flex

.d-print-inline-flex

<div class="d-print-none">一直显示</div>
<div class="d-none d-print-block">一直就没有</div>
<div class=" d-md-none d-block">响应显示1</div>
<div class="d-none d-md-block d-print-block">响应显示2</div>

4、溢出（Overflow）

overflow-auto:当文本溢出出现水平、垂直滚动条

overflow-hidden：当本溢出，就会隐藏

5、阴影（Shadow）

​ shadow-none：无阴影

​ shadow-sm：小阴影

​ shadow：一般阴影

​ shadow-lg：大阴影

6、尺寸（Sizing）

宽度：

​ w-25：宽度25%

​ w-50：宽度50%

​ w-75：宽度75%

​ w-100：宽度100%

​ w-auto：自动适应，靠内容撑开

高度：

​ h-25：高度25%

​ h-50：高度50%

​ h-75：高度75%

​ h-100：高度100%

​ h-auto：自动适应，靠内容撑开

最大高度和宽度

mw-100:最大宽度100%；同max-width: 100%;

mh-100:最大高度100%；同max-height: 100%;

相对于视口

它的宽度和高度相对于屏幕的改变而发生响应的变化

<div class="min-vw-100 bg-primary">Min-width 100vw</div>
<div class="min-vh-100 bg-warning">Min-height 100vh</div>
<div class="vw-100 bg-primary">Width 100vw</div>
<div class="vh-100 bg-warning">Height 100vh</div>

7、文本（Text）

文本属性

​ text-wrap：到达容器宽度，文本自动换行

​ text-nowrap:到达容器宽度，文本不换行

​ text-justify：文本两端对齐

​ text-left：左对齐

​ text-center：居中对齐

​ text-right：右对齐

对于响应式：

​ text--left、text--right等（先确定本身的位置，在改变响应式位置）

​ 例如：

<p class="text-right text-md-left">Left aligned text on viewports sized MD (medium) or wider.</p>

​ text-truncate：将文本截断并添加省略号，但必须是 display: inline-block 或 display: block 类型

​ text-break：单词中断（将长字符串设置为 overflow-wrap: break-word 属性，可以防止长字符串破坏你的组件布局）

​ 注意：

​ 和text-justify差距：

​ 右边还是有间距，而text-justify没有间距。

大小写转化：

​ text-lowercase:转为小写的文本

​ text-uppercase:转为大写的文本

​ text-capitalize：转为首字母大写的文本

字体粗细和斜体：

​ font-weight-bold：粗体

​ font-weight-bolder：粗体（相对于父元素）

​ font-weight-normal：一般重量文本

​ font-weight-light：较亮的文本

​ font-weight-lighter：较亮的文本（相对于父元素）

​ font-italic：斜体

     <p class="font-weight-bold">Bold text.</p>
     <p class="font-weight-bolder">Bolder weight text (relative to the parent element).</p>
     <p class="font-weight-normal">Normal weight text.</p>
     <p class="font-weight-light">Light weight text.</p>
     <p class="font-weight-lighter">Lighter weight text (relative to the parent element).</p>
     <p class="font-italic">Italic text.</p>

等宽字体：

​ text-monospace：所选内容更改为等宽字体

着重颜色

​ text-muted：着重颜色

​ text-reset：重置文本或链接的颜色

文字装饰

​ text-decoration-none：去除文字的装饰

8、垂直对齐

例

    <span class="align-baseline">baseline</span>
    <span class="align-top">top</span>
     <span class="align-middle">middle</span>
     <span class="align-bottom">bottom</span>
     <span class="align-text-top">text-top</span>
     <span class="align-text-bottom">text-bottom</span>

9、清除浮动（Clearfix）

clearfix：清除浮动

​ 此案例中，如果不清楚浮动就会遇到高度坍塌的问题，背景颜色覆盖不了，从而破坏整个布局。

例

<div class="bg-info clearfix">
        <button type="button" class="btn btn-secondary float-left">向左浮动（float）的按钮</button>
        <button type="button" class="btn btn-secondary float-right">向右浮动（float）的按钮</button>
    </div>

10、弹性布局（flex）

重点

1、d-flex:建一个弹性盒子容器

     <div class="container mt-3">
        <h2>Flex</h2>
        <p>使用 d-flex 类创建一个弹性盒子容器，并设置三个弹性子元素：</p>
        <div class="d-flex p-3 bg-secondary text-white">  
          <div class="p-2 bg-info">Flex item 1</div>
          <div class="p-2 bg-warning">Flex item 2</div>
          <div class="p-2 bg-primary">Flex item 3</div>
        </div>
      </div>

运行结果：

2、 d-inline-flex:创建显示在同一行上的弹性盒子容器

      <div class="container mt-3">
        <h2>行内 Flex</h2>
        <p>创建显示在同一行上的弹性盒子容器可以使用 d-inline-flex 类:</p>
        <div class="d-inline-flex p-3 bg-secondary text-white">  
          <div class="p-2 bg-info">Flex item 1</div>
          <div class="p-2 bg-warning">Flex item 2</div>
          <div class="p-2 bg-primary">Flex item 3</div>
        </div>
      </div>

运行结果

3、 flex-row:设置弹性子元素水平显示

flex-row-reverse:设置右对齐方向

     <div class="container mt-3">
        <h2>水平方向</h2>
        <p>使用 .flex-row 类设置弹性子元素水平显示：</p>
        <div class="d-flex flex-row bg-secondary mb-3">
          <div class="p-2 bg-info">Flex item 1</div>
          <div class="p-2 bg-warning">Flex item 2</div>
          <div class="p-2 bg-primary">Flex item 3</div>
        </div>
        <p>.flex-row-reverse 设置右对齐方向:</p>
        <div class="d-flex flex-row-reverse bg-secondary">
          <div class="p-2 bg-info">Flex item 1</div>
          <div class="p-2 bg-warning">Flex item 2</div>
          <div class="p-2 bg-primary">Flex item 3</div>
        </div>
      </div>

运行结果

​ flex-column:设置弹性子元素垂直方向显示

​ flex-column-reverse:设置弹性子元素垂直方向翻转显示

元素的排列方式：

​ justify-content-* 类用于修改弹性子元素的排列方式

​ 允许的值有：start (默认), end, center, between 或 around

​ justify-content-start:默认方式

​ justify-content-end：右靠齐

​ justify-content-center：中间靠齐

​ justify-content-between：均匀弹开，且不留白

​ justify-content-around：弹开后，且留白

      <div class="container mt-3">
        <h2>内容排列方式</h2>
        <p> .justify-content-* 类用于修改弹性子元素的排列方式，* 号允许的值有：start (默认), end, center, between 或 around:</p>
        <div class="d-flex justify-content-start bg-secondary mb-3">
          <div class="p-2 bg-info">Flex item 1</div>
          <div class="p-2 bg-warning">Flex item 2</div>
          <div class="p-2 bg-primary">Flex item 3</div>
        </div>
        <div class="d-flex justify-content-end bg-secondary mb-3">
          <div class="p-2 bg-info">Flex item 1</div>
          <div class="p-2 bg-warning">Flex item 2</div>
          <div class="p-2 bg-primary">Flex item 3</div>
        </div>
        <div class="d-flex justify-content-center bg-secondary mb-3">
          <div class="p-2 bg-info">Flex item 1</div>
          <div class="p-2 bg-warning">Flex item 2</div>
          <div class="p-2 bg-primary">Flex item 3</div>
        </div>
        <div class="d-flex justify-content-between bg-secondary mb-3">
          <div class="p-2 bg-info">Flex item 1</div>
          <div class="p-2 bg-warning">Flex item 2</div>
          <div class="p-2 bg-primary">Flex item 3</div>
        </div>
        <div class="d-flex justify-content-around bg-secondary mb-3">
          <div class="p-2 bg-info">Flex item 1</div>
          <div class="p-2 bg-warning">Flex item 2</div>
          <div class="p-2 bg-primary">Flex item 3</div>
        </div>
      </div>

运行结果：

内容对齐：

​ .align-content-* 来控制子元素在垂直方向的对齐方式

​ align-content-start(默认)：靠上对齐的；

​ align-content-end：靠下对齐的，也就是父元素的结尾

​ align-content-center：紧靠中间对齐，也就是居中的

​ align-content-around：上下弹开，上下留白

​ align-content-stretch：元素均等分开，上下占满父级元素，但是里面的内容并不居中

  <div class="container mt-3">
    <h2>内容对齐</h2>
    <p>我们可以使用 .align-content-* 来控制子元素在垂直方向的对齐方式。</p>
    <p><strong>注意:</strong> 这个实例在小型设备上效果不好。这些类在只有一行的弹性子元素中是无效的。</p>
    <p>.align-content-start (默认):</p>
    <div class="d-flex flex-wrap align-content-start bg-light" style="height:300px">
        

      <div class="p-2 border">Flex item 1</div>
      <div class="p-2 border">Flex item 2</div>
      <div class="p-2 border">Flex item 3</div>
      <div class="p-2 border">Flex item 4</div>
      <div class="p-2 border">Flex item 5</div>
      <div class="p-2 border">Flex item 6</div>
      <div class="p-2 border">Flex item 7</div>
      <div class="p-2 border">Flex item 8</div>
      <div class="p-2 border">Flex item 9</div>
      <div class="p-2 border">Flex item 10</div>
      <div class="p-2 border">Flex item 11</div>
      <div class="p-2 border">Flex item 12</div>
      <div class="p-2 border">Flex item 13 </div>
      <div class="p-2 border">Flex item 14</div>
      <div class="p-2 border">Flex item 15</div>
      <div class="p-2 border">Flex item 16</div>
      <div class="p-2 border">Flex item 17</div>
      <div class="p-2 border">Flex item 18</div>
      <div class="p-2 border">Flex item 19</div>
      <div class="p-2 border">Flex item 20</div>
      <div class="p-2 border">Flex item 21</div>
      <div class="p-2 border">Flex item 22</div>
      <div class="p-2 border">Flex item 23</div>
      <div class="p-2 border">Flex item 24</div>
      <div class="p-2 border">Flex item 25</div>
    </div>
    <br>
    <p>.align-content-end:</p>
    <div class="d-flex flex-wrap align-content-end bg-light" style="height:300px">
      <div class="p-2 border">Flex item 1</div>
      <div class="p-2 border">Flex item 2</div>
      <div class="p-2 border">Flex item 3</div>
      <div class="p-2 border">Flex item 4</div>
      <div class="p-2 border">Flex item 5</div>
      <div class="p-2 border">Flex item 6</div>
      <div class="p-2 border">Flex item 7</div>
      <div class="p-2 border">Flex item 8</div>
      <div class="p-2 border">Flex item 9</div>
      <div class="p-2 border">Flex item 10</div>
      <div class="p-2 border">Flex item 11</div>
      <div class="p-2 border">Flex item 12</div>
      <div class="p-2 border">Flex item 13 </div>
      <div class="p-2 border">Flex item 14</div>
      <div class="p-2 border">Flex item 15</div>
      <div class="p-2 border">Flex item 16</div>
      <div class="p-2 border">Flex item 17</div>
      <div class="p-2 border">Flex item 18</div>
      <div class="p-2 border">Flex item 19</div>
      <div class="p-2 border">Flex item 20</div>
      <div class="p-2 border">Flex item 21</div>
      <div class="p-2 border">Flex item 22</div>
      <div class="p-2 border">Flex item 23</div>
      <div class="p-2 border">Flex item 24</div>
      <div class="p-2 border">Flex item 25</div>
    </div>
    <br>
    <p>.align-content-center:</p>
    <div class="d-flex flex-wrap align-content-center bg-light" style="height:300px">
      <div class="p-2 border">Flex item 1</div>
      <div class="p-2 border">Flex item 2</div>
      <div class="p-2 border">Flex item 3</div>
      <div class="p-2 border">Flex item 4</div>
      <div class="p-2 border">Flex item 5</div>
      <div class="p-2 border">Flex item 6</div>
      <div class="p-2 border">Flex item 7</div>
      <div class="p-2 border">Flex item 8</div>
      <div class="p-2 border">Flex item 9</div>
      <div class="p-2 border">Flex item 10</div>
      <div class="p-2 border">Flex item 11</div>
      <div class="p-2 border">Flex item 12</div>
      <div class="p-2 border">Flex item 13 </div>
      <div class="p-2 border">Flex item 14</div>
      <div class="p-2 border">Flex item 15</div>
      <div class="p-2 border">Flex item 16</div>
      <div class="p-2 border">Flex item 17</div>
      <div class="p-2 border">Flex item 18</div>
      <div class="p-2 border">Flex item 19</div>
      <div class="p-2 border">Flex item 20</div>
      <div class="p-2 border">Flex item 21</div>
      <div class="p-2 border">Flex item 22</div>
      <div class="p-2 border">Flex item 23</div>
      <div class="p-2 border">Flex item 24</div>
      <div class="p-2 border">Flex item 25</div>
    </div>
    <br>
    <p>.align-content-around:</p>
    <div class="d-flex flex-wrap align-content-around bg-light" style="height:300px">
      <div class="p-2 border">Flex item 1</div>
      <div class="p-2 border">Flex item 2</div>
      <div class="p-2 border">Flex item 3</div>
      <div class="p-2 border">Flex item 4</div>
      <div class="p-2 border">Flex item 5</div>
      <div class="p-2 border">Flex item 6</div>
      <div class="p-2 border">Flex item 7</div>
      <div class="p-2 border">Flex item 8</div>
      <div class="p-2 border">Flex item 9</div>
      <div class="p-2 border">Flex item 10</div>
      <div class="p-2 border">Flex item 11</div>
      <div class="p-2 border">Flex item 12</div>
      <div class="p-2 border">Flex item 13 </div>
      <div class="p-2 border">Flex item 14</div>
      <div class="p-2 border">Flex item 15</div>
      <div class="p-2 border">Flex item 16</div>
      <div class="p-2 border">Flex item 17</div>
      <div class="p-2 border">Flex item 18</div>
      <div class="p-2 border">Flex item 19</div>
      <div class="p-2 border">Flex item 20</div>
      <div class="p-2 border">Flex item 21</div>
      <div class="p-2 border">Flex item 22</div>
      <div class="p-2 border">Flex item 23</div>
      <div class="p-2 border">Flex item 24</div>
      <div class="p-2 border">Flex item 25</div>
    </div>
    <br>
    <p>.align-content-stretch:</p>
    <div class="d-flex flex-wrap align-content-stretch bg-light" style="height:300px;width: 400px;">
      <div class="p-2 border">Flex item 1</div>
      <div class="p-2 border">Flex item 2</div>
      <div class="p-2 border">Flex item 3</div>
      <div class="p-2 border">Flex item 4</div>
      <div class="p-2 border">Flex item 5</div>
      <div class="p-2 border">Flex item 6</div>
      <div class="p-2 border">Flex item 7</div>
      <div class="p-2 border">Flex item 8</div>
      <div class="p-2 border">Flex item 9</div>
      <div class="p-2 border">Flex item 10</div>
      <div class="p-2 border">Flex item 11</div>
      <div class="p-2 border">Flex item 12</div>
      <div class="p-2 border">Flex item 13 </div>
      <div class="p-2 border">Flex item 14</div>
      <div class="p-2 border">Flex item 15</div>
      <div class="p-2 border">Flex item 16</div>
      <div class="p-2 border">Flex item 17</div>
      <div class="p-2 border">Flex item 18</div>
    </div>
    <br>
  </div>

运行结果：

子元素对齐：

​ 设置单行的子元素对齐可以使用 .align-items-* 类来控制

​ align-items-start：靠上对齐

​ align-items-end：靠下对齐

​ align-items-center：中间对齐

​ align-items-baseline：

​ align-items-stretch (默认)：把负级元素上下撑开

  <div class="container mt-3">
    <h2>子元素对齐</h2>
    <p>如果要设置单行的子元素对齐可以使用 .align-items-* 类来控制。</p>
    <p>.align-items-start:</p>
    <div class="d-flex align-items-start bg-light" style="height:150px">
      <div class="p-2 border">Flex item 1</div>
      <div class="p-2 border">Flex item 2</div>
      <div class="p-2 border">Flex item 3</div>
    </div>
    <br>
    <p>.align-items-end:</p>
    <div class="d-flex align-items-end bg-light" style="height:150px">
      <div class="p-2 border">Flex item 1</div>
      <div class="p-2 border">Flex item 2</div>
      <div class="p-2 border">Flex item 3</div>
    </div>
    <br>
    <p>.align-items-center:</p>
    <div class="d-flex align-items-center bg-light" style="height:150px">
      <div class="p-2 border">Flex item 1</div>
      <div class="p-2 border">Flex item 2</div>
      <div class="p-2 border">Flex item 3</div>
    </div>
    <br>
    <p>.align-items-baseline:</p>
    <div class="d-flex align-items-baseline bg-light" style="height:150px">
      <div class="p-2 border">Flex item 1</div>
      <div class="p-2 border">Flex item 2</div>
      <div class="p-2 border">Flex item 3</div>
    </div>
    <br>
    <p>.align-items-stretch (默认):</p>
    <div class="d-flex align-items-stretch bg-light" style="height:150px">
      <div class="p-2 border">Flex item 1</div>
      <div class="p-2 border">Flex item 2</div>
      <div class="p-2 border">Flex item 3</div>
    </div>
    <br>
  </div>

运行结果：

Align Self

​ 要设置指定子元素对齐对齐可以使用 .align-self-* 类来控制

​ align-self-start:靠上对齐

​ align-self-end：靠下对齐

​ align-self-center:居中对齐

​ align-self-stretch：填充

  <div class="container mt-3">
    <h2>Align Self</h2>
    <p>如果要设置指定子元素对齐对齐可以使用 .align-self-* 类来控制。</p>
    <p>.align-self-start:</p>
    <div class="d-flex bg-light" style="height:150px">
      <div class="p-2 border">Flex item 1</div>
      <div class="p-2 border align-self-start">Flex item 2</div>
      <div class="p-2 border align-self-md-start">Flex item 3</div>
    </div>
    <br>
    <p>.align-self-end:</p>
    <div class="d-flex bg-light" style="height:150px">
      <div class="p-2 border">Flex item 1</div>
      <div class="p-2 border align-self-end">Flex item 2</div>
      <div class="p-2 border">Flex item 3</div>
    </div>
    <br>
    <p>.align-self-center:</p>
    <div class="d-flex bg-light" style="height:150px">
      <div class="p-2 border">Flex item 1</div>
      <div class="p-2 border align-self-center">Flex item 2</div>
      <div class="p-2 border">Flex item 3</div>
    </div>
    <br>
    <p>.align-self-baseline:</p>
    <div class="d-flex bg-light" style="height:150px">
      <div class="p-2 border">Flex item 1</div>
      <div class="p-2 border align-self-baseline">Flex item 2</div>
      <div class="p-2 border">Flex item 3</div>
    </div>
    <br>
    <p>.align-self-stretch (默认):</p>
    <div class="d-flex bg-light" style="height:150px">
      <div class="p-2 border">Flex item 1</div>
      <div class="p-2 border align-self-stretch">Flex item 2</div>
      <div class="p-2 border">Flex item 3</div>
    </div>
    <br>
  </div>

运行结果：

等宽：

​ flex-fill 类强制设置各个弹性子元素的宽度是一样的

      <div class="container mt-3">
        <h2>等宽</h2>
        <p>.flex-fill 类强制设置各个弹性子元素的宽度是一样的:</p>
        <div class="d-flex mb-3">
          <div class="p-2 flex-fill bg-info">Flex item 1</div>
          <div class="p-2 flex-fill bg-warning">Flex item 2</div>
          <div class="p-2 flex-fill bg-primary">Flex item 3</div>
        </div>
        <p>不使用 .flex-fill 类实例:</p>
        <div class="d-flex mb-3 bg-secondary">
          <div class="p-2 bg-info">Flex item 1</div>
          <div class="p-2 bg-warning">Flex item 2</div>
          <div class="p-2 bg-primary">Flex item 3</div>
        </div>
      </div>

运行结果：

收缩：

​ flex-grow-1 用于设置子元素使用剩下的空间

      <div class="container mt-3">
        <h2>扩展</h2>
        <p>.flex-grow-1 用于设置子元素使用剩下的空间：</p>
        <div class="d-flex mb-3">
          <div class="p-2 bg-info">Flex item 1</div>
          <div class="p-2 bg-warning">Flex item 2</div>
          <div class="p-2 flex-grow-1 bg-primary">Flex item 3</div>
        </div>
        <p>不使用 .flex-grow-1 实例:</p>
        <div class="d-flex mb-3 bg-secondary">
          <div class="p-2 bg-info">Flex item 1</div>
          <div class="p-2 bg-warning">Flex item 2</div>
          <div class="p-2 bg-primary">Flex item 3</div>
        </div>
      </div>

排序：

​ order 类可以设置弹性子元素的排序，从 .order-1 到 .order-12，数字越低权重越高

​ 注：

​ 在动态布局中，关于响应式布局先布局，再进行响应式的变化

     <div class="container mt-3">
        <h2>排序</h2>
        <p>.order 类可以设置弹性子元素的排序，从 .order-1 到 .order-12，数字越低权重越高:</p>
        <div class="d-flex mb-3">
          <div class="p-2 order-3 bg-info">Flex item 1</div>
          <div class="p-2 order-2 bg-warning">Flex item 2</div>
          <div class="p-2 order-1 bg-primary">Flex item 3</div>
        </div>
      </div>

外边距：

​ .mr-auto 类可以设置子元素右外边距为 auto

​ .ml-auto 类可以设置子元素左外边距为 auto

      <div class="container mt-3">
        <h2>外边距</h2>
        <p>.mr-auto 类可以设置子元素右外边距为 auto，.ml-auto 类可以设置子元素左外边距为 auto，</p>
        <div class="d-flex mb-3 bg-secondary">
          <div class="p-2 mr-auto bg-info">Flex item 1</div>
          <div class="p-2 bg-warning">Flex item 2</div>
          <div class="p-2 bg-primary">Flex item 3</div>
        </div>
        <div class="d-flex mb-3 bg-secondary">
          <div class="p-2  bg-info">Flex item 1</div>
          <div class="p-2 bg-warning">Flex item 2</div>
          <div class="p-2 ml-auto bg-primary">Flex item 3</div>
        </div>
      </div>

包裹弹性子元素：

​ 可以使用以下三个类：

​ .flex-nowrap (默认):不换行，在一行排列

​ .flex-wrap:换行

​ .flex-wrap-reverse:翻转

      <div class="container mt-3">
        <h2>包裹</h2>
        <p>弹性容器中包裹弹性子元素可以使用以下三个类： .flex-nowrap (默认), .flex-wrap 或 .flex-wrap-reverse:</p>
        <p><code>.flex-wrap:</code></p>
        <div class="d-flex flex-wrap bg-light">
          <div class="p-2 border">Flex item 1</div>
          <div class="p-2 border">Flex item 2</div>
          <div class="p-2 border">Flex item 3</div>
          <div class="p-2 border">Flex item 4</div>
          <div class="p-2 border">Flex item 5</div>
          <div class="p-2 border">Flex item 6</div>
          <div class="p-2 border">Flex item 7</div>
          <div class="p-2 border">Flex item 8</div>
          <div class="p-2 border">Flex item 9</div>
          <div class="p-2 border">Flex item 10</div>
          <div class="p-2 border">Flex item 11</div>
          <div class="p-2 border">Flex item 12</div>
          <div class="p-2 border">Flex item 13 </div>
          <div class="p-2 border">Flex item 14</div>
          <div class="p-2 border">Flex item 15</div>
          <div class="p-2 border">Flex item 16</div>
          <div class="p-2 border">Flex item 17</div>
          <div class="p-2 border">Flex item 18</div>
          <div class="p-2 border">Flex item 19</div>
          <div class="p-2 border">Flex item 20</div>
          <div class="p-2 border">Flex item 21</div>
          <div class="p-2 border">Flex item 22</div>
          <div class="p-2 border">Flex item 23</div>
          <div class="p-2 border">Flex item 24</div>
          <div class="p-2 border">Flex item 25</div>
        </div>
        <br>
        <p><code>.flex-wrap-reverse:</code></p>
        <div class="d-flex flex-wrap-reverse bg-light">
          <div class="p-2 border">Flex item 1</div>
          <div class="p-2 border">Flex item 2</div>
          <div class="p-2 border">Flex item 3</div>
          <div class="p-2 border">Flex item 4</div>
          <div class="p-2 border">Flex item 5</div>
          <div class="p-2 border">Flex item 6</div>
          <div class="p-2 border">Flex item 7</div>
          <div class="p-2 border">Flex item 8</div>
          <div class="p-2 border">Flex item 9</div>
          <div class="p-2 border">Flex item 10</div>
          <div class="p-2 border">Flex item 11</div>
          <div class="p-2 border">Flex item 12</div>
          <div class="p-2 border">Flex item 13 </div>
          <div class="p-2 border">Flex item 14</div>
          <div class="p-2 border">Flex item 15</div>
          <div class="p-2 border">Flex item 16</div>
          <div class="p-2 border">Flex item 17</div>
          <div class="p-2 border">Flex item 18</div>
          <div class="p-2 border">Flex item 19</div>
          <div class="p-2 border">Flex item 20</div>
          <div class="p-2 border">Flex item 21</div>
          <div class="p-2 border">Flex item 22</div>
          <div class="p-2 border">Flex item 23</div>
          <div class="p-2 border">Flex item 24</div>
          <div class="p-2 border">Flex item 25</div>
        </div>
        <br>
        <p><code>.flex-nowrap:</code></p>
        <div class="d-flex flex-nowrap bg-light">
          <div class="p-2 border">Flex item 1</div>
          <div class="p-2 border">Flex item 2</div>
          <div class="p-2 border">Flex item 3</div>
          <div class="p-2 border">Flex item 4</div>
          <div class="p-2 border">Flex item 5</div>
          <div class="p-2 border">Flex item 6</div>
          <div class="p-2 border">Flex item 7</div>
          <div class="p-2 border">Flex item 8</div>
          <div class="p-2 border">Flex item 9</div>
          <div class="p-2 border">Flex item 10</div>
          <div class="p-2 border">Flex item 11</div>
          <div class="p-2 border">Flex item 12</div>
          <div class="p-2 border">Flex item 13 </div>
          <div class="p-2 border">Flex item 14</div>
          <div class="p-2 border">Flex item 15</div>
          <div class="p-2 border">Flex item 16</div>
          <div class="p-2 border">Flex item 17</div>
          <div class="p-2 border">Flex item 18</div>
          <div class="p-2 border">Flex item 19</div>
          <div class="p-2 border">Flex item 20</div>
          <div class="p-2 border">Flex item 21</div>
          <div class="p-2 border">Flex item 22</div>
          <div class="p-2 border">Flex item 23</div>
          <div class="p-2 border">Flex item 24</div>
          <div class="p-2 border">Flex item 25</div>
          <div class="p-2 border">Flex item 26</div>
          <div class="p-2 border">Flex item 27</div>
          <div class="p-2 border">Flex item 28</div>
          <div class="p-2 border">Flex item 29</div>
          <div class="p-2 border">Flex item 30</div>
          <div class="p-2 border">Flex item 31</div>
          <div class="p-2 border">Flex item 32</div>
          <div class="p-2 border">Flex item 33</div>
          <div class="p-2 border">Flex item 34</div>
          <div class="p-2 border">Flex item 35</div>
        </div>
        <br>
      </div>

      <div class="p-2 border">Flex item 6</div>
      <div class="p-2 border">Flex item 7</div>
      <div class="p-2 border">Flex item 8</div>
      <div class="p-2 border">Flex item 9</div>
      <div class="p-2 border">Flex item 10</div>
      <div class="p-2 border">Flex item 11</div>
      <div class="p-2 border">Flex item 12</div>
      <div class="p-2 border">Flex item 13 </div>
      <div class="p-2 border">Flex item 14</div>
      <div class="p-2 border">Flex item 15</div>
      <div class="p-2 border">Flex item 16</div>
      <div class="p-2 border">Flex item 17</div>
      <div class="p-2 border">Flex item 18</div>
      <div class="p-2 border">Flex item 19</div>
      <div class="p-2 border">Flex item 20</div>
      <div class="p-2 border">Flex item 21</div>
      <div class="p-2 border">Flex item 22</div>
      <div class="p-2 border">Flex item 23</div>
      <div class="p-2 border">Flex item 24</div>
      <div class="p-2 border">Flex item 25</div>
    </div>
    <br>
  </div>

运行结果：

11、浮动（float）

​ float-left:左浮动

​ float-right：右浮动

​ float-none：不浮动

​ float-*-left：响应式

​ float-*-right: 响应式

12、用户交互（Interaction）

​ user-select-all：当用户单击该段时，将完全选中该段。

​ user-select-auto：本段具有默认的选择行为。

​ user-select-none：用户单击时将无法选择该段落

<p class="user-select-all">当用户单击该段时，将完全选中该段。</p>
<p class="user-select-auto">本段具有默认的选择行为。</p>
<p class="user-select-none">用户单击时将无法选择该段落</p>

13、间距（Spacing）

外边距可以为负值：

​ mx-n1:水平方向间距-1（也可以取1、2、3、4、5）

​ mx-*-n1:响应式

​ mx-auto：水平居中

​ m -设置的类 margin

​ p -设置的类 padding

​ t-设置margin-top或padding-top

​ b -设置margin-bottom或padding-bottom

​ l -设置margin-left或padding-left

​ r -对于设置margin-right或padding-right

​ x -同时设置-left和-right

​ y -同时设置-top和-bottom

间距：

​ 0-对于消除margin或padding通过将其设置为的类0

​ 1- （默认情况下）的类时，设置margin或padding以$spacer * .25

​ 2- （默认情况下）的类时，设置margin或padding以$spacer * .5

​ 3- （默认情况下）的类时，设置margin或padding以$spacer

​ 4- （默认情况下）的类时，设置margin或padding以$spacer * 1.5

​ 5- （默认情况下）的类时，设置margin或padding以$spacer * 3

​ auto-对于将设置margin为自动的类

14、拉伸链接（Stretch）

​ 在链接按钮处添加一个stretched-link，在整个区域没拖动鼠标会出现按钮拉伸链接的情况

​ 注：

​ 拉伸链接不建议使用多个链接和点击目标。

​ 然而，一些position和z-index风格可以帮助这应该是必需

15、可见性

visible：可见

invisible：不可见