Bootstrap笔记(十四) 常用类别 - 间距

最新推荐文章于 2024-06-15 08:22:26 发布

XI_MILU

最新推荐文章于 2024-06-15 08:22:26 发布

阅读量3.1k

点赞数 13

分类专栏： Bootstrap 文章标签： bootstrap html

本文链接：https://blog.csdn.net/XI_MILU/article/details/120312829

版权

Bootstrap 专栏收录该内容

18 篇文章 2 订阅

订阅专栏

常用类别 - 间距

- - - 间距

间距

Bootstrap提供的间距类别可以套用到 xs ~ xxl 等响应式断点，命名形式如下:

xs的间距类别: {property} {sides} - {size}
sm、md、lg、xl、xxl的间距类别: {property} {sides} - {breakpoint} - {size}

property(属性)的设定值如下:

m : 边界 (margin)
p : 留白 (padding)

sides(边)的设定值如下:

t : 上方 (ex. .mt 表示margin-top，.pt 表示padding-top)
b : 下方 (ex. .mb 表示margin-bottom，.pb 表示padding-bottom)
s : 左方 (ex. .ms 表示margin-left，.ps 表示padding-left)
e : 右方 (ex. .me 表示margin-right，.pe 表示padding-right)
x : 左右方 (ex. .mx 表示左右边界，.px 表示左右留白)
y :上下方 (ex. .my 表示上下边界，.py 表示上下留白)
blank : 四周 (ex. .m 表示四周边界，.p 表示四周留白)

size(大小)的设定值如下:

0 : 将margin或padding的大小设定为 0 。(ex. .m-0 表示将四周margin大小设定为0)
1 : 将margin或padding的大小设定为变数 $spacer * 0.25。
2 : 将margin或padding的大小设定为变数 $spacer * 0.5。
3 : 将margin或padding的大小设定为变数 $spacer 。(ex. .mt-3 代表将上方margin大小设定为变数 $spacer)
4 : 将margin或padding的大小设定为变数 $spacer * 1.5。
5 : 将margin或padding的大小设定为变数 $spacer * 3。(ex. .px-5 表示将左右padding大小设定为变数 $spacer * 3)
auto : 将margin或padding的大小设定为自动平分。

範例: 利用.mx-auto实现区块置中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap CDN -->
    <!-- CSS only -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
    <!-- JavaScript Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
    <title>間距</title>
</head>
<body>
	<!-- .mx-auto 自动平分左右两边margin大小 -->
    <div class="mx-auto" style="width: 300px; background-color: orange;">
        <h1>Hello World!</h1>
    </div>
</body>
</html>

在这里插入图片描述

XI_MILU

关注

13
点赞
踩
16

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap笔记(十四) 常用类别 - 间距

常用类别 - 间距间距间距Bootstrap提供的间距类别可以套用到 xs ~ xxl 等响应式断点，命名形式如下:xs的间距类别命名形式为 {property} {sides} - {size}sm、md、lg、xl、xxl的间距类别命名形式为 {property} {sides} - {breakpoint} - {size}property(属性)的设定值如下:m : 边界 (margin)p : 留白 (padding)sides(边)的设定值如下:t : 上方 (ex.
复制链接

扫一扫