|
|
马上注册，结交更多好友，享用更多功能^_^
您需要 登录 才可以下载或查看，没有账号？立即注册
x
尺寸工具类是按等级来划分的，一般分为 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 的取值中：
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">。
这位鱼油，如果喜欢本帖子，请订阅>>> 专辑 <<<（ 不喜欢更要订阅 ）
官方 Web 课程：
|
|
( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)
狗仔卡
发表于 2023-7-10 17:43:53
置顶卡
千斤顶
显身卡
发表于 2023-7-10 17:57:48
发表于 2023-7-10 18:18:46