Bootstrap5 小工具6

简介: 间距设置通过 {property}{sides}-{size} 或 {property}{sides}-{breakpoint}-{size} 的格式来调整元素的 margin 和 padding,适用于不同屏幕尺寸。property 包括 m(margin)和 p(padding),sides 定义方向,size 控制大小。示例展示了如何使用这些类来控制元素的布局和间距。

间距
间距设置语法如下:

{property}{sides}-{size} // 适用 xs(<=576px)
{property}{sides}-{breakpoint}-{size} // 适用 sm (>=576px), md (>=768px), lg (>=992px), xl (>=1200px) 或 xxl (>=1400px)
breakpoints 指的是屏幕宽度: xs (<=576px), sm (>=576px), md (>=768px), lg (>=992px), xl (>=1200px) 或 xxl (>=1400px)。

property 代表属性,包含:

m - 用来设置 margin
p - 用来设置 padding
sides 主要指方向:

t - 用来设置 margin-top 或 padding-top
b - 用来设置 margin-bottom 或 padding-bottom
s - 用来设置 margin-left 或 padding-left
e - 用来设置 margin-right 或 padding-right
x - 用来设置 -left 和 -right
y - 用来设置 -top 和 -bottom
blank - 用来设置元素在四个方向的 margin 或 padding
size 指的是边距的大小:

0 - 设置 margin 或 padding 为 0
1 - 设置 margin 或 padding 为 $spacer .25
2 - 设置 margin 或 padding 为 $spacer
.5
3 - 设置 margin 或 padding 为 $spacer
4 - 设置margin 或 padding 为 $spacer 1.5
5 - 设置 margin 或 padding 为 $spacer
3
auto - 设置 margin 为 auto
看下部分边距的源码设置:

.mt-0 {
margin-top: 0 !important;
}

.ml-1 {
margin-left: ($spacer * .25) !important;
}

.px-2 {
padding-left: ($spacer .5) !important;
padding-right: ($spacer
.5) !important;
}

.p-3 {
padding: $spacer !important;
}
实例


元素设置居中




设置 margin-top:


颜色:



相关文章
|
开发框架 前端开发 JavaScript
Bootstrap5 小工具3
`rounded` 类及其变体用于为图像或元素添加圆角效果。包括 `rounded`(标准圆角)、`rounded-circle`(圆形)、`rounded-pill`(药丸形)等。此外,`rounded-0` 至 `rounded-3` 可调整圆角的半径大小。示例代码展示了不同圆角效果的应用。
|
4天前
|
前端开发 容器
Bootstrap5 小工具7
Bootstrap5 引入了基于 CSS3 弹性盒子(Flexbox)的布局方式,通过 `d-flex` 和 `d-inline-flex` 等类轻松实现响应式设计。此布局模式比传统的浮动布局更灵活、强大,但需注意 IE9 及以下版本不支持。示例展示了如何使用这些类创建水平排列的弹性盒子容器。
Bootstrap5 小工具5
使用 .mx-auto 类可使元素水平居中;宽度和高度分别通过 w-* 和 h-* 类设定,支持百分比和自动调整,示例展示了不同宽度和高度的 div。
Bootstrap5 小工具4
使用 .float-start 和 .float-end 类可使元素分别向左和向右浮动,.clearfix 类用于清除浮动影响。此外,可根据屏幕尺寸设置浮动效果,如 .float-sm-end 表示在小屏幕及以上尺寸向右浮动。示例展示了不同屏幕尺寸下的浮动效果及清除浮动的用法。
Bootstrap5 小工具2
通过使用 `border` 及其相关类,可以灵活地为元素添加边框,包括控制边框的宽度、颜色和具体哪一侧显示边框。例如,`.border-1` 至 `.border-5` 设置不同宽度,`.border-primary` 等设置不同颜色。
|
6天前
|
前端开发
Bootstrap5 小工具1
Bootstrap 5 提供了多种背景颜色类(如 .bg-primary、.bg-success 等),搭配 .text-* 类可调整文本颜色,确保对比度和可读性。同时,使用 .bg-gradient 类可轻松实现背景渐变效果。示例展示了不同背景色及其渐变版本的应用。
|
开发框架 前端开发 JavaScript
教你快速安装Bootstrap
教你快速安装Bootstrap
|
前端开发
Bootstrap——安装
Bootstrap——安装
124 0
|
JavaScript 前端开发 开发者
Bootstrap-插件|学习笔记
快速学习 Bootstrap-插件
172 0
Bootstrap-插件|学习笔记