不二如是 发表于 2023-7-10 17:43:53

12 - 尺子工具类



尺寸工具类是按等级来划分的,一般分为 0~5 这 6 个等级。

需要特别注意的是,尺寸对应的单位是 rem,它是 CSS3 中为适配多终端的响应式设计而引入的新单位。

其含义是相对于页面中根元素(html 元素)的字体大小的倍数。

当前主流的浏览器通常默认 1rem 是 16px。

使用 rem 作为尺寸单位后,针对不同设备,只要设置了各自 html 元素的字体大小。

那么整个页面的所有属性就都可以以它为基准来计算和设置大小了。

因此,其特别适用于多终端的响应式页面。

常见的就是:“font-size、 width和height、padding和margin”,我们依次来说下。


font-size

表示字体大小的属性 font-size 的缩写是 fs,其有 6 个等级,单位是 rem:

.fs-1   /* 2.5rem   */
.fs-2   /* 2rem   */
.fs-3   /* 1.75rem*/
.fs-4   /* 1.5rem   */
.fs-5   /* 1.25rem*/
.fs-6   /* 1rem   */
不用记,用到查一下就好。


width和height

宽度工具类使用的单位是百分比,形如.w-{value},具体定义方式如下:

高度工具类和宽度工具类类似,包括.h-25、.h-50、.h-75、.h-100和.h-auto。此外还可以设置最大宽度和最大高度,例如:

.w-25 {
    width: 25%!important;}
.w-50 {
    width: 50%!important;}
.w-75 {
    width: 75%!important;}
.w-100{
    width: 100%!important;}
.w-auto {
    width: auto!important;}
高度工具类和宽度工具类类似,包括 .h-25、.h-50、.h-75、.h-100 和 .h-auto。

此外还可以设置最大宽度和最大高度,例如:

.mw-100 {
    max-width: 100%!important;}
.mh-100 {
    max-height: 100%!important;}


padding和margin

下面对内边距padding和外边距margin一起进行完整的讲解。它们的工具类的使用格式如下:

{property}{sides}-{size}
{property}{sides}-{breakpoint}-{size}
property 的取值中:


[*]m,表示margin
[*]p,表示padding

sides 的取值为:


[*]t,表示 margin-top 或 padding-top;
[*]b,表示 margin-bottom 或 padding-bottom;
[*]s,start 的缩写,表示margin-left 或 padding-left;
[*]e,end 的缩写,表示 margin-right 或 padding-right;
[*]x,表示同时设置 -left 和 -right;
[*]y,表示同时设置 -top 和 -bottom;
[*]无,用于在元素的四周设置 margin 或 padding

根据以上规则,可以创建大量的工具类,这里不一一介绍,只举几个具体的例子:

.pt-3      /*3级padding-top,即1rem*/
.px-1      /*1级水平方向的padding,即padding-left和padding-right,值为0.25rem*/
.ms-auto   /*margin-left,即auto*/
.mb-5      /*5级margin-bottom,即3rem*/
.pb-md-3   /*针对中号及以上的设备,设定3级padding-bottom,即1rem*/
.py-lg-1   /*针对大号及以上的设备,设定1级竖直方向的padding,即0.25rem*/
这里比较特殊的是水平方向的表示方法。

Bootstrap 没有使用我们习惯使用的 left 和 right,而是使用了 start 和 end。

这是因为 Bootstrap 还支持 RTL(right-to-left,从右向左)语言的排版。

阿拉伯文、希伯来文都是从右向左书写的。

在 RTL 语言中,start 表示 right,end 表示 left。

要让网页支持 RTL 语言的排版,需要在 <html> 标签上设置 <html lang="ar" dir="rtl">。

这位鱼油,如果喜欢本帖子,请订阅>>> 专辑 <<<(不喜欢更要订阅{:10_278:} )

官方 Web 课程:

https://www.bilibili.com/video/BV1QW411N762

歌者文明清理员 发表于 2023-7-10 17:57:48

xue qi lai

sfqxx 发表于 2023-7-10 18:06:07

学起来

Ewan-Ahiouy 发表于 2023-7-10 18:18:46

学起来

liuhongrun2022 发表于 2023-7-10 18:21:53

学起来

hornwong 发表于 2023-7-10 19:05:17

学起来

kerln888 发表于 2023-7-11 09:00:20

学起来

myqf123 发表于 2023-7-11 09:09:00

学起来

涛4091 发表于 2023-7-12 14:54:41

学起来

零之忆 发表于 2023-7-12 15:32:59

学起来

完熟マンゴー 发表于 2023-7-13 11:10:08

学起来

AbyssKing 发表于 2023-7-18 11:11:25

学起来

Wei-Yuanzhe 发表于 2023-8-11 16:48:33

学起来
页: [1]
查看完整版本: 12 - 尺子工具类