关于前端:前端开发框架之Bootstrap4的学习分享

26次阅读

共计 1234 个字符,预计需要花费 4 分钟才能阅读完成。

一.文字排版
在 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.
用于创立字号更小,色彩更浅的文本
<mark> 为黄色背景及有肯定的内边距
<abbr> 元素的款式为显示一条虚线边框
<blockquote> 援用的内容能够增加.blockquote 类
例如:
<blockquote class=”blockquote”>
…….
</bolckquote>
<dl> 用于定义自定义列表
用于定义一些须要显示的代码之类

二.色彩
在前端培训中框架 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-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 则显示不同成果(没有滚动条)还能够通过指定设施屏幕显示滚动条

四.图像形态
圆角图片能够应用.rounded 类,椭圆图片应用.rounded-circle 类,伸缩图能够应用.img-thumbnail 类,图片的对齐形式能够应用.float-right,.float-left 来设置,响应式图片能够应用 img-fluid 类来设置。
例如:
<img src=”..”alt=”图片”class=”img-fluid”>

正文完
 0