前端开发框架之Bootstrap4的学习分享
一．文字排版
在Bootstrap4中文字默认大小为16px，line-height:1.5,font-family为：“Helvetica Neue”,所有的p元素margin-top:0,margin-bottom:lrem(16px)。
Display标题类有四种样式：display-1/display-2/display-3/display-4.
<small>用于创建字号更小，颜色更浅的文本
<mark>为黄色背景及有一定的内边距
<abbr>元素的样式为显示一条虚线边框
<blockquote>引用的内容可以添加.blockquote类
例如：
<blockquote class=”blockquote”>
.......
</bolckquote>
<dl>用于定义自定义列表
<code>用于定义一些需要显示的代码之类
二．颜色
在前端培训中框架bootstrap4中用于表示文字颜色的可以用到下面这些类
text-primary/text-success/text-info/text-warning/text-danger/text-secondary/text-white/text-dark
例如：
<p class=”text-primary”>好好好</p>//在链接中的文字也可以使用
背景颜色可以使用下面这些类：bg-primary/bg-success/bg-info/bg-warning/bg-danger等等
例如：
<p class=”bg-primary text-primary”>好好好</p>
背景颜色和文字颜色是不同的颜色，需要区分
三．表格
在bootstrap4中通过.table来表示表格类的样式，使用：
<table class=”table”>
<thead>
<tr>
<td></td>
</tr>
</thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
如果想要给表格添加边框可以使用.table-bordered类，想要给每一行添加一个鼠标悬停状态表格可以使用.table-hover类（鼠标悬停时为灰色背景），为表格添加灰色背景使用：.table-dark类，为表格添加条纹可以使用.table-dark,.table-striped来创建黑色条纹背景，在表格中用于描述颜色的类也有下面这些：.table-success,.table-primary,.table-danger,.table-info等等，表头的颜色可以使用下面这样的类：thead-dark,thead-light等等创建响应式表格可以使用下面的类.table-responsive类在屏幕宽度小于992px时会创建水平滚动条，如果可视区域大于992px则显示不同效果（没有滚动条）还可以通过指定设备屏幕显示滚动条
|
类名 |
屏幕宽度 |
|
.table-responsive-sm |
<576px |
|
.table-responsive-md |
<768px |
|
.table-responsive-lg |
<992px |
|
.table-responsive-xl |
<1200px |
四．图像形状
圆角图片可以使用.rounded类，椭圆图片使用.rounded-circle类，伸缩图可以使用.img-thumbnail类，图片的对齐方式可以使用.float-right,.float-left来设置，响应式图片可以使用img-fluid类来设置。
例如：
<img src=”..” alt=”图片” class=”img-fluid”>