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-none
仅在xs上隐藏 .d-none .d-sm-block
仅在sm上隐藏 .d-sm-none .d-md-block
仅在md上隐藏 .d-md-none .d-lg-block
仅在lg隐藏 .d-lg-none .d-xl-block
仅在xl上隐藏 .d-xl-none
所有人可见 .d-block
仅在xs上可见 .d-block .d-sm-none
仅在sm上可见 .d-none .d-sm-block .d-md-none
仅在md上可见 .d-none .d-md-block .d-lg-none
仅在lg上可见 .d-none .d-lg-block .d-xl-none
仅在xl上可见 .d-none .d-xl-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:不可见

标签

评论

this is is footer