bootstrap 初次接触
网格系统
将要进行布局的内容放在一个叫row的容器中,默认row中有12个单位。
7col-md-7：网格系统的示例，表示在桌面显示器上此容器显示为占满row中的7个格子，row共有12个格子，如果只写col则表示自动布局；
row格栅系统
- lx超大桌面显示器，屏幕宽度等于或大于1200px的屏幕； boostrap4中新加入
- lg大桌面显示器，屏幕宽度等于或大于992px的屏幕；
- md桌面显示器，屏幕宽度等于或大于768px的屏幕；
- sm平板设备，屏幕宽度等于或大于576px的屏幕；
相较于bootstrap3尺寸有改动
格栅系统偏移操作
- container:自适应居中；
- push：往左推；
- pull：往右拉；
- push和pull后边跟数字，表示往左或者右移动几个格子，通过相对定位实现，当超出max-width的宽度时不会换行；offset超出宽度后会换行；
- offset:偏移，通过margin-left实现,offset也可以搭配大小使用，比如offset-md-7，在桌面显示器上往右偏移7个格子；
###
文字排版
bootstrap中重新定义了h1~h6的默认样式
- h1(2.5rem=40px);
- h2(2rem=32px);
- h3(1.75rem=28px);
- h4(1.5rem=24px);
- h5(1.25rem=20px);
- h6(1rem=16px);
Display 标签类
在bootstrap中提供四级标题：display-1display-4，只需要在容器中添加display1display-4的类名；
- display-1 (6rem=96px);
- display-2 (5.5rem 88px);
- display-3 (4.5rem 72px);
- display-4 (3.5rem 56px);
em与rem
- em是取之于祖先元素所设置的font-size，默认为16px;
- 取值优先级为自身然后从父级往上级找，如果自身元素没有设置font-size属性，则会一直往上级元素找，直至找到根元素html标签，html标签默认为16px；
- em的取值为font-size，margin和padding也会根据取值计算；
- rem是直接取值为html根标签，1rem默认取值为16px；如果对html标签进行了font-zise值得修改，则会对修改后的值进行取值；
small标签
一般用于副标题
- 创建一个字号更小颜色更前浅的文本
- 字体为祖先元素font-size值得80%；字体粗细为font-sidth：400；
mark标签
拥有淡黄色背景色，有一定内边距，内联元素；
- 内边距为0.2em
- 背景颜色 #fcf8e3;
abbr标签
在bootstrap4中abbr标记默认设置为元素底部一条虚线；
- 鼠标为 cursor：help；
blockquote标签
引用文字，给blockquote标签添加blockquote类；
1.font-size为1.25rem，margin-bottom为1rem；
dl标签
bootstrap4中重新定义了dl&dt的样式
- 将dt进行了文字加粗处理
code标签
可以将一些代码放在code标签内，使用了word-break属性；
- 字体大小为87.5%，字体颜色为#e83e8c
- word-break在半角空格和连字符处换行；
kbd标签
黑色背景白色文字，有少许圆角
- padding值上下为0.2rem左右为0.4rem；
- font-size为87.5%；
- color为#FFF
- 背景颜色为test
- border-radius:为0.2rem；
pre标签
bootstrap4中定义了pre标签的样式
- font-size为87.5%；
- display：block；
- color：#212529；
文字排版类文件
- font-size-blod 加粗文本；
- font-size-normal 普通文本；
- font-size-light 更细的文本；
- font-italic 倾斜的文本；
- lead 让段落更突出；font-size:1.25rem font-width:300；
- small 父级元素文字的85%；
- text-left:左对齐；
- text-center 文本居中对齐；
- text-right 右对齐；
- text-justify 设定文本对齐，段落中超出屏幕部分文字自动换行；
- text-nowrap 段落超出屏幕高度不换行；
- text-lowercase 将文本设置为小写；
- text-uppercase 将文本设置为大写；
- text-capitalize 单子首字母大写；
- initialism 将在abbr标签的内容以小字显示并转换成大写；
- list-unstyled bootstrap4中重新定义的ul和ol的样式；
- list-inline 将列表放在一行内；在ul中添加list-inline在li标签中添加list-inline-item；
- pre-scrollable 在pre标签中文字高度超出340px时，会在y轴出现滚动条；
###
颜色
颜色类
bootstrap4中提供的一些字体颜色类；
- tetx-muted 柔和的文本；灰色
- text-primary 重要的文本；蓝色
- text-success 执行成功的文本；绿色
- text-info 信息文本链接； 孔雀蓝
- text-warning 警告的文本链接； 橙色
- text-danger 危险的文本链接； 红色
- text-secondary 副标题文本链接； 灰色
- text-dark 深灰色的链接；深灰色
- text-linght 浅灰色的文本；浅灰色
- text-write 纯白色的文本；白色
背景类
bootstrap4中提供的一些背景颜色类；
- bg-primary 重要的背景颜色；蓝色
- bg-success 执行成功的文本；绿色
- bg-info 信息提示背景颜色；孔雀蓝
- bg-warning 警告提示的背景颜色；黄色
- bg-danger 危险提示的背景颜色；红色
- bg-secondary 副标题背景颜色；灰色
- bg-dark 深灰色标题；深灰色
- bg-light 浅灰色标题；浅灰色
图像形状
bootstrap4中提供的一些图片样式类；
- rounded 圆角图片
- rounded-circle 椭圆图片
- img-thumbnail 缩略图；有边框
- img-fluid 响应式图片；设置了宽度max-width：100%；height：auto;
jumbotron
jumbotron只是一个背景框
- 在元素中添加.jumbotron类名来调用背景框；
- 浅灰色背景略带圆角；
信息提示框
信息提示框类名
- 在元素中首先加入alert类
- alert-success 成功的提示信息 浅绿色
- alert-info 请注意的信息 浅蓝色
- alert-warning 警告的信息 浅黄色
- alert-danger 错误的信息 浅红色
- alert-primary 重要信息 兰色
- alert-secondary 次要的信息 浅灰色
- alert-dark 深灰色的信息 深灰色