11.4 冯娜

学习日志

工具类:

一、边框:

1、border 四周边框、 -top上 、-right右、-bottom下、-left左

2、border-0 无边框、-top-0无上 、-right-0无右、-bottom-0无下、-left-0无左

3、border-primary 边框颜色 (9种)

4、边框圆角:rounded、 -top上 、-right右、-bottom下、-left左、-circle圆、-pill椭圆、-0无边框圆角

5、边框圆角大小:rounded-sm小、rounded-lg大

二、关闭图标:

1、 使用通用的关闭图标来解除模态框(modal)和警告框(alert)等内容 。

2、

<button type="button" class="close" aria-label="关闭">
  <span aria-hidden="true">&times;</span>
</button>
三、颜色

1、文本颜色:text-primary(13种)

2、链接文本颜色:Primary link(10种)

3、背景颜色:bg-primary(10种)注意:bg-transparent(透明)、bg-white(白色)

4、背景渐变: 当$enable-gradients设置为时true(默认为false) , 使用.bg-gradient- primary(8种)

四、Display属性

1、显示属性

2、属性:none:不会被显示、block:显示为块级元素,该元素前后有换行符、inline:默认,显示为行内元素,该元素前后没有换行符、inline-block:行内块元素、list-item:元素作为列表显示、table: 此元素会作为块级表格来显示(类似

),表格前后带有换行符、 inline-table : 此元素会作为内联表格来显示(类似

),表格前后没有换行符、 table-row : 此元素会作为一个表格行显示(类似

)、 table-cell : 此元素会作为一个表格单元格显示(类似

) 、 inherit : 从父元素继承 display 属性的值。

五、内嵌

1、通过创建在任何设备上缩放的固有比率,根据父对象的宽度创建自适应视频或网页等嵌入。

2、 用.embed-responsive和宽高比将任何嵌入内容像父元素一样包裹起来 。

3、长宽比:

21:9: embed-responsive-21by9;

16:9:embed-responsive-16by9;

4:3:embed-responsive-4by3;

1:1:embed-responsive-1by1

六、浮动

1、实现块级元素在同一行显示。float-left(左浮动)、float-right(右浮动)、float-none(无浮动)

2、浮动原理: 使当前元素脱离普通流,相当于浮动起来一样,浮动的框可以左右移动,直至它的外边缘遇到包含框或者另一个浮动框的边缘 。

3、浮动的影响: 因为浮动元素脱离了普通流,会出现一种高度坍塌的现象:原来的父容器高度是当前元素A撑开的,但是当A元素浮动后,脱离普通流浮动起来,那父容器的高度就坍塌(前提是父容器高度小于A元素高度) 。

、响应式变化:float-sm-left、float-md-left、float-lg-left、float-xl-left

七、清除浮动:

1、 通过添加 clearfix 工具类,可以快速轻松地清除容器中浮动的内容 ,不会清除浮动本身。

2、

        1234

         4567

    

八、交互

1、 更改用户与之交互时选择内容的方式 。

2、 当用户单击该段时,将完全选中该段:user-select-all;

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

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

九、溢出

1、是内容溢出元素框时发生的事情。

2、overflow-auto: 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。

3、overflow-hidden: 内容会被修剪,并且其余内容是不可见的 。

十、定位

1、position-static:默认值,元素处于正常的文档流中, 会忽略left、top、right、bottom和z-index属性。

2、position:relative:相对定位, 是指给元素设置相对于原本位置的定位,元素并不脱离文档流,因此元素原本的位置会被保留,其他的元素位置不会受到影响 。

3、position:absolute:绝对定位,指给元素设置绝对的定位,相对定位的对象可以分为两种情况:

  1) 设置了absolute的元素如果存在有祖先元素设置了position属性为relative或者absolute,则这时元素的定位对象为此已设置position属性的祖先元素。

  2) 如果并没有设置了position属性的祖先元素,则此时相对于body进行定位。

4、position:fixed:固定定位,相对于body定位的。将元素固定在页面的某个位置,不会随着页面滚动条发生位置变化,一直固定在可视区域,脱离文档流,不占据页面空间,会变为块级元素,永远都是相对于浏览器实现位置初始化。

5、position:sticky:设置了sticky的元素,在屏幕范围(viewport)时该元素的位置并不受到定位影响(设置是top、left等属性无效),当该元素的位置将要移出偏移范围时,定位又会变成fixed,根据设置的left、top等属性成固定位置的效果。

6、fixed-top:固定在浏览器页面顶部。

7、fixed-bottom:固定在浏览器页面底部。

8、sticky-top:固定在浏览器页面的顶部。

十、阴影

1、shadow-none:无阴影

2、shadow-sm:小阴影

3、shadow:一般阴影

4、shadow-lg:大阴影

十一、尺寸

1、w- 宽度 、p-内边距、w-auto:宽度自动

2、h-高度、d-inline-block:行内块元素、h-auto:高度自动

3、mh-最大高度

4、相对于视口:min-vw- 、min-vh、vw-、vh-

十二、间距

1、m-:margin

2、p-:padding

3、t-:margin-top/padding-top

4、b-:margin-bottom/margin-bottom

5、l-:margin-left/padding-left

6、r-:margin-right/padding-right

7、x-:-left/-right

8、y-:-top/-bottom

9、0-:消除margin/padding

10、间距有1-5的取值范围

11、auto:设置margin为自动类

12、 mx-auto类,用于通过将水平边距设置为来将定宽块级内容(即具有display: block和一width组的内容)水平居中auto

13、负边距: margin属性可以使用负值(padding不能) 。

十三、拉伸链接

1、 添加.stretched-link到链接以使其包含块。 包含带有.stretched-link类链接的元素是可单击的。

2、卡片中添加:stretched-link

3、

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card with stretched links</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <p class="card-text">
      <a href="#" class="stretched-link text-danger" style="position: relative;">Stretched link will not work here, because <code>position: relative</code> is added to the link</a>
    </p>
    <p class="card-text bg-light" style="transform: rotate(0);">
      This <a href="#" class="text-warning stretched-link">stretched link</a> will only be spread over the <code>p</code>-tag, because a transform is applied to it.
    </p>
  </div>
</div>
十四、文本

1、文本对齐:text-left、text-center、text-right

2、文字换行:text-wrap、text-nowrap

3、文字溢出: text-truncate 类将文本截断并添加省略号 ,但必须是 display: inline-block 或 display: block 类型。

4、单词中断: 可以防止长字符串破坏布局。 text-break 将长字符串设置为 overflow-wrap: break-word 属性。

5、文本转换:text-lowercase:转为小写的文本;text-uppercase:转为大写的文本;text-capitalize:转为首字母大写的文本。

6、字体粗细和斜体:font-weight-bold 粗体、font-weight-bolder 粗体粗体文本(相对于父元素)、font-weight-normal 普通重量文本、font-weight-light 重量轻的文本、font-weight-lighter较轻的文本(相对于父元素) 、font-italic斜体文字

7、等宽字体: text-monospace 类将所选内容更改为等宽字体 。

8、重置颜色: text-reset 类重置文本或链接的颜色,以便从父元素继承颜色属性 。

9、文字装饰: text-decoration-none 类去除文字的装饰。

十五、垂直对齐

1、align-baseline 基线 、align-top 顶部 、align-middle 中部 、align-bottom 底部 、align-text-top 文本顶部 、align-text-bottom 文本底部

2、还可以在表格中使用。

十六、可见性:

1、 visible :可见

2、 invisible :不可见

十七、flex布局:

1、d-flex:flexbox容器;d-inline-flex:嵌入式flexbox容器

2、d-flex有响应式变化,d-sm-flex…

3、方向:flex-row 水平左对齐、flex-row-reverse水平右对齐

flex-column 垂直对齐、 flex-column-reverse 开始从相对侧上的垂直方向 。 也存在的响应式变体

4、内容水平对齐方式:justify-content-start 左对齐、justify-content-end 右对齐、justify-content-center 居中对齐、justify-content-between 两端对齐、justify-content-around 两端留白对齐,具有响应式。

5、内容垂直对齐方式:align-items-start 上对齐、align-items-end 下对齐、align-items-center 居中对齐、align-items-baseline 上对齐、align-items-stretch 占满整个父元素的高度上对齐,具有响应式。

6、布局:具有响应式

<div class="align-self-start">Aligned flex item</div>
<div class="align-self-end">Aligned flex item</div>
<div class="align-self-center">Aligned flex item</div>
<div class="align-self-baseline">Aligned flex item</div>
<div class="align-self-stretch">Aligned flex item</div>

7、使内容填充满整个容器:flex-fill。具有响应式。

8、撑开:flex-grow-1: flex-grow-1元素使用其可能的所有可用空间,同时为其余两个flex项目留出必要的空间 。

9、收缩: flex-shrink-1: flex-shrink-1被迫将其内容包装到新行中,“缩小”以为之前的flex项目留出更多空间 。

10、自动边距:mr-auto 右边、ml-auto左边

11、对齐项目:mb-auto下边、mt-auto上边

12、换行: flex-wrap 、不换行: flex-nowrap 、对侧换行:flex-wrap-reverse。具有响应式。

13、order:响应式下显示模块的顺序。例如:order-2 、order-1、order-3。顺序为:中、左、右。在布局页面时很方便。

14、对齐内容(混合使用):align-content-start flex-wrap 上对齐换行、align-content-end flex-wrap下对齐换行、align-content-center flex-wrap居中对齐换行、align-content-between flex-wrap 上下对齐换行、align-content-around flex-wrap 上下留白居中对齐、align-content-stretch flex-wrap 占满父元素上下对齐。

标签

评论

this is is footer