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. .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>

在这里插入图片描述

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

常用类别 - 间距

间距

相关推荐