bootstrap 初次接触

网格系统

将要进行布局的内容放在一个叫row的容器中,默认row中有12个单位。
7col-md-7：网格系统的示例，表示在桌面显示器上此容器显示为占满row中的7个格子，row共有12个格子，如果只写col则表示自动布局；

row格栅系统

1. lx超大桌面显示器，屏幕宽度等于或大于1200px的屏幕； boostrap4中新加入
2. lg大桌面显示器，屏幕宽度等于或大于992px的屏幕；
3. md桌面显示器，屏幕宽度等于或大于768px的屏幕；
4. sm平板设备，屏幕宽度等于或大于576px的屏幕；

相较于bootstrap3尺寸有改动

格栅系统偏移操作

1. container:自适应居中；
2. push：往左推；
3. pull：往右拉；
4. push和pull后边跟数字，表示往左或者右移动几个格子，通过相对定位实现，当超出max-width的宽度时不会换行；offset超出宽度后会换行；
5. offset:偏移，通过margin-left实现,offset也可以搭配大小使用，比如offset-md-7，在桌面显示器上往右偏移7个格子；

###

文字排版

bootstrap中重新定义了h1~h6的默认样式

1. h1(2.5rem=40px);
2. h2(2rem=32px);
3. h3(1.75rem=28px);
4. h4(1.5rem=24px);
5. h5(1.25rem=20px);
6. h6(1rem=16px);

Display 标签类
在bootstrap中提供四级标题：display-1_{display-4，只需要在容器中添加display1}display-4的类名；

1. display-1 (6rem=96px);
2. display-2 (5.5rem 88px);
3. display-3 (4.5rem 72px);
4. display-4 (3.5rem 56px);

em与rem

1. em是取之于祖先元素所设置的font-size，默认为16px;
2. 取值优先级为自身然后从父级往上级找，如果自身元素没有设置font-size属性，则会一直往上级元素找，直至找到根元素html标签，html标签默认为16px；
3. em的取值为font-size，margin和padding也会根据取值计算；
4. rem是直接取值为html根标签，1rem默认取值为16px；如果对html标签进行了font-zise值得修改，则会对修改后的值进行取值；

small标签
一般用于副标题

1. 创建一个字号更小颜色更前浅的文本
2. 字体为祖先元素font-size值得80%；字体粗细为font-sidth：400；

mark标签
拥有淡黄色背景色，有一定内边距，内联元素；

1. 内边距为0.2em
2. 背景颜色 #fcf8e3;

abbr标签
在bootstrap4中abbr标记默认设置为元素底部一条虚线；

1. 鼠标为 cursor：help；

blockquote标签
引用文字，给blockquote标签添加blockquote类；
1.font-size为1.25rem，margin-bottom为1rem；

dl标签
bootstrap4中重新定义了dl&dt的样式

1. 将dt进行了文字加粗处理

code标签
可以将一些代码放在code标签内，使用了word-break属性；

1. 字体大小为87.5%，字体颜色为#e83e8c
2. word-break在半角空格和连字符处换行；

kbd标签
黑色背景白色文字，有少许圆角

1. padding值上下为0.2rem左右为0.4rem；
2. font-size为87.5%；
3. color为#FFF
4. 背景颜色为test
5. border-radius:为0.2rem；

pre标签
bootstrap4中定义了pre标签的样式

1. font-size为87.5%；
2. display：block；
3. color：#212529；

文字排版类文件

1. font-size-blod 加粗文本；
2. font-size-normal 普通文本；
3. font-size-light 更细的文本；
4. font-italic 倾斜的文本；
5. lead 让段落更突出；font-size:1.25rem font-width:300；
6. small 父级元素文字的85%；
7. text-left:左对齐；
8. text-center 文本居中对齐；
9. text-right 右对齐；
10. text-justify 设定文本对齐，段落中超出屏幕部分文字自动换行；
11. text-nowrap 段落超出屏幕高度不换行；
12. text-lowercase 将文本设置为小写；
13. text-uppercase 将文本设置为大写；
14. text-capitalize 单子首字母大写；
15. initialism 将在abbr标签的内容以小字显示并转换成大写；
16. list-unstyled bootstrap4中重新定义的ul和ol的样式；
17. list-inline 将列表放在一行内；在ul中添加list-inline在li标签中添加list-inline-item；
18. pre-scrollable 在pre标签中文字高度超出340px时，会在y轴出现滚动条；

###

颜色

颜色类
bootstrap4中提供的一些字体颜色类；

1. tetx-muted 柔和的文本；灰色
2. text-primary 重要的文本；蓝色
3. text-success 执行成功的文本；绿色
4. text-info 信息文本链接； 孔雀蓝
5. text-warning 警告的文本链接； 橙色
6. text-danger 危险的文本链接； 红色
7. text-secondary 副标题文本链接； 灰色
8. text-dark 深灰色的链接；深灰色
9. text-linght 浅灰色的文本；浅灰色
10. text-write 纯白色的文本；白色

背景类
bootstrap4中提供的一些背景颜色类；

1. bg-primary 重要的背景颜色；蓝色
2. bg-success 执行成功的文本；绿色
3. bg-info 信息提示背景颜色；孔雀蓝
4. bg-warning 警告提示的背景颜色；黄色
5. bg-danger 危险提示的背景颜色；红色
6. bg-secondary 副标题背景颜色；灰色
7. bg-dark 深灰色标题；深灰色
8. bg-light 浅灰色标题；浅灰色

图像形状

bootstrap4中提供的一些图片样式类；

1. rounded 圆角图片
2. rounded-circle 椭圆图片
3. img-thumbnail 缩略图；有边框
4. img-fluid 响应式图片；设置了宽度max-width：100%；height：auto;

jumbotron

jumbotron只是一个背景框

1. 在元素中添加.jumbotron类名来调用背景框；
2. 浅灰色背景略带圆角；

信息提示框

信息提示框类名

1. 在元素中首先加入alert类
2. alert-success 成功的提示信息 浅绿色
3. alert-info 请注意的信息 浅蓝色
4. alert-warning 警告的信息 浅黄色
5. alert-danger 错误的信息 浅红色
6. alert-primary 重要信息 兰色
7. alert-secondary 次要的信息 浅灰色
8. alert-dark 深灰色的信息 深灰色