网格系统
将要进行布局的内容放在一个叫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 深灰色的信息 深灰色