本次内容总结了Bootstrap4中的一些API归总,并不是关于Bootstrap4的一个系统性的教学:
这次总结是方便各位集中记忆,使之在实战中使用这些API更加得心应手:
目录:
1,网格布局
2,文字排版
3,Bootstrap4文字颜色
4,Bootstrap4背景颜色
5,Bootstrap4表格及样式
6,Bootstrap4表格背景颜色
想使用Bootstrap4除了引用4中给我们的CDN,别忘记引用viewport视口(显示网页的区域)
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
(假如你使用的是sublime等编译器,可以使用meta:vp快速扩展。)
viewport中还有一个视口规定:
1.布局视口=设备视觉视口
2.不可缩放
语句解读:
1.width=device-width:布局视口等于设备视觉视口。
2.initial-scale:初始缩放比例。
3.maximun-scale:最大缩放比例。
4.minimum-scale:最小缩放比例。
5.user-scalable:禁止用户缩放。
Bootstrap 4 网格系统有以下 5 个类:
类别 | 描述 |
---|---|
.col- | 针对所有设备 |
.col-sm- | 平板 - 屏幕宽度等于或大于 576px |
.col-md- | 桌面显示器 - 屏幕宽度等于或大于 768px |
.col-lg- | 大桌面显示器 - 屏幕宽度等于或大于 992px |
.col-xl- | 超大桌面显示器 - 屏幕宽度等于或大于 1200px |
Bootstrap4 网格系统规则: |
---|
网格每一行需要放在设置了 .container (固定宽度) 或 .container-fluid (全屏宽度) 类的容器中,这样就可以自动设置一些外边距与内边距。 |
使用行来创建水平的列组。 |
12列格网布局:最多分为12列,随着屏幕设备或视口尺寸变化 |
格网布局由行(row)和列(column)构成。 |
用户将内容填充到格网布局的格子里面。 |
内容需要放置在列中,并且只有列可以是行的直接子节点。 |
预定义的类如 .row 和 .col-sm-4 可用于快速制作网格布局。 |
列通过填充创建列内容之间的间隙。 这个间隙是通过 .rows 类上的负边距设置第一行和最后一列的偏移。 |
网格列是通过跨越指定的 12 个列来创建。 例如,设置三个相等的列,需要使用用三个.col-sm-4 来设置。 |
Bootstrap 3 和 Bootstrap 4 最大的区别在于 Bootstrap 4 现在使用 flexbox(弹性盒子) 而不是浮动。 Flexbox 的一大优势是,没有指定宽度的网格列将自动设置为等宽与等高列 。 |
注意: .container (固定宽度) 和 .container-fluid (全屏宽度) 在样式上是有差异的,大家可以自己动手尝试一下。
开始正题:
像.col-,它其实就是列column的缩写。
针对不同端的屏幕大小可区分为:
- sm(平板,width>=576px)
- md(桌面显示器,width>=768px)
- lg(大桌面显示器,width>=992px)
- xl(超大桌面显示器,width>=1200px)
所以根据你想要适配什么样的PC端,移动端。就分别设置在对应端屏幕宽度下你想要网页所呈现的形式。
现在,我希望网页的某块区域在大于等于sm下呈现2,8,2的区域划分,小于sm让它根据屏幕宽度三等分:
<div class="row">
<div class="col col-sm-2" style="background-color:blue">第一块</div>
<div class="col col-sm-8" style="background-color:orange">第二块</div>
<div class="col col-sm-2" style="background-color:red">第三块</div>
</div>
在device-width>=576px时效果如下:
在device-width<576px时效果如下:
假如你想兼容更多屏幕宽度的样式,自己根据需求在相应的区域添加对应的.col-*-*属性即可。
另外,我们还可以在col后面增加偏移列(offset-*-*),这里我就不仔细介绍了,附上一段代码,各位自己理解一下应该就懂得偏移列的含义了:
<div class="container-fluid" style="border:1px solid black">
<div class="row">
<div class="col-md-4 col-sm-3 offset-md-2 offset-sm-3 bg-success">col-md-4/col-sm-3</div>
<div class="col-md-4 col-sm-3 offset-md-2 offset-sm-3 bg-warning">col-md-4/col-sm-3