常用类别 - 间距
间距
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>