BootStrap

2021年8月10日

1.响应式所具有的特点

（1）网页的宽度自动调整

（2）尽量少用绝对宽度

（3）字体要使用rem、em做为单位

（4）布局要使用浮动、弹性布局

2.规则

@chartset 定义编码

@import 引入css文件(css模块化）

@font-face 自定义字体

@keyframes animation里的关键帧

@media 媒体查询

媒体查询是根据一个或者多个基于设备类型、具体特点和环境来应用的样式@media

3.媒体类型

all 所有设备

print 打印机设备

screen 彩色的电脑屏幕

speech 听觉设备（针对有视力障碍的人士，可以把页面的内容以语音的方式呈现的设备）

4.媒体特性

width 宽度

min-width 最小宽度，宽度只能比这个打

max-width 最大宽度，宽度只能比这个小

height 高度

min-width 最小高度，高度只能比这个大

max-width 最大的高度，高度只能比这个小

orientation 方向

landscape 横屏（宽度大于高度）

portrait 竖屏（高度大于宽度）

aspect-ratio 宽度比

-webkit-device-pixel-ratio 像素比（webkit内核的私有属性）

5.逻辑运算符 用来做条件判断

and 合并多个媒体查询（并且的意思）

, 匹配某个媒体查询（或者的意思）

not 对媒体查询的结果取反

only 仅在媒体查询匹配成功后应用的样式（防范老旧游览器）

2021年8月11日

1.bs4.ntp.org.cn 是BootStrap4的中文文档

2.BootStrap的html内容需要写在<div class="container-fluid">是将屏幕尺寸设置为100%</div>或<div class="container">当用户屏幕大则class设置的屏幕大，用户屏幕小则class设置的屏幕小</div>中

3.BootStrap中栅格系统中的行<div class="row"></div>

4.BootStrap中的栅格系统中的列<div class="col-xl-1"，当class的名字后的数字是几就代表占几列，最多12列

5.col-xl-3;x1为超大屏，屏幕宽度>=1200，容器的宽度固定为1140px，一行可以设置12列。屏幕尺寸<1200的时候，一行只能设置一列

6.col-lg-3;lg为大屏，屏幕宽度>=992px，容器的宽度固定为960px;一行可设置12列

2021年8月12日

1.col-md-3;md为中等屏，屏幕宽度>=768px，容器的宽度固定为720px;一行可设置12列

2021年8月13日

1.col-sm-3;sm为小屏，屏幕宽度>=576px，容器的宽度固定为540px，一行可以设置12列。屏幕尺寸<576的时候，一行只能设置1列

2.col-4;col为超小屏，屏幕宽度<576px，容器的宽度为auto，一行永远可以设置12列

3.设置等宽列，在class中加入名称col，有几个列就将父级的行分成相等的几份，断开等宽需要在断开的col元素后面加上一个元素并且class设置为w-100；

4.设置根据内容调整列的宽度，使用.col-{xl/lg/md/sm}-auto当满足大括号中的要求自动撑成一行

5.2021年8月14日

1.垂直对齐

(1)行的对齐方式

align-items-start 顶对齐

align-items-center 中间对齐

align-items-end 底部对齐

(2)列的单独对齐方式

align-self-start 顶对齐

align-self-center 中间对齐

align-self-end 底对齐

2.水平对齐

（1）justify-content-start 左对齐

（2）justify-content-center 居中对齐

（3）justify-content-end 右对齐

（4）justify-content-around 分散居中对齐（每个元素两侧的间距是相等的）

（5）justify-content-between 左右两端对齐（元素之间的间距是自动平分的）

3.列排序，使用col order-数字,其中数字是几就表示在12列中的第几位，数字越大越靠后，order-first设置第一位，order-last设置最后一位

4.元素偏移.col-{xl/lg/md/sm}-5;相关屏幕中偏移5列

5.mr--{xl/lg/md/sm}-auto使右侧的列远离到最右边

ml--{xl/lg/md/sm}-auto使左侧的列远离到最左侧

6.col-auto宽度由内容撑开，

2021年8月15日

1.Bootstrap框架默认会有清除样式，如table表格想要重置样式需要在加入class="table"

2.<pre></pre>设置带格式的标签

3.副标题标签small，在p标签的class中加上名称h1/h2……h6，将P标签设置成标题样式

4.给标题设置比h1更大的字体，在class中加入名称display-1到4

5.引言在class中加入名字lead用来突出段落

6.给文字加重样式用mark标签，表现删除文字用del标签，表现插入文本用ins标签，表现文字小一点用small标签，表现文本加粗用strong标签，斜体文本用em标签，可以用class名称.mark代替mark,用.small代替small标签

7.缩写标签，用abbr标签，里面有一个属性title=“全称”，class中填入.initialism可以让字体变得小一点

8.引用跟署名使用blockquote标签包裹在并且class中加入.blockquote，引用的人名加上footer标签，并且class中加入.blockquote-footer

9.文字内容对齐在class中加入.text-left/.text-center/.text-right让文字左/居中/右对齐

10.无特效列表，在ul的class中加入.list-unstyled，清除ul.li标签中的默认样式

11.让超出的内容变成省略号，class中加入text-truncate

12.给文字添加颜色code标签

13.代码放在code里，再放到pre标签里，给pre标签上来一个pre-scrollable的class，就会显示一个340px高的框，超过之后就会出现滚动条

14.按钮标签在按钮两个字上加上<kbd></kbd>文字就会出现按钮的形状

15.响应式图片，给图片class添加一个img-fluid

16.给图片设置成缩略图（响应式），给class添加img-thumbnail

17.给图片设置圆角给图片的class加上rounded

18.给元素设置浮动，左浮动在class中加入.float-left，右浮动在class中加入.float-right

2021年8月16日

1.根据不同的尺寸加载不同的图片运用picture标签，主要结构如下

<picture>

<source media="(min-width:1200px)" srcset="images/1140.jpg">

<source media="(min-width:992px)" srcset="image/960px.jpg">

<sorce media="(min-width:768px)" srcset="image/720px.jpg">

<img src="image/img_01.jpg" alt=""><!--当尺寸小于576的时候会显示这个图片-->

</picture>

2.webp格式的图片，体积比jpg小很多倍但是是高清图片；

3.table表格进行颜色添加，隔行换色在table中的class中加入table-strped

4.去除table表格边框.table-borderless;给table添加鼠标高亮显示.table-hover，更小的表格.table-sm

2021年8月17日

1.变成响应式的弹性盒模型 d-{breakpoint}-flex/inline-flex

2.响应式弹性盒模型的子元素排列方向

（1）flex-row 正序水平排列

（2）flex-row-reverse 倒叙水平排列

（3）flex-column 正序垂直排列

（4）flex-column-reverse 倒叙垂直排列