Bootstrap 5 Spinners Margin

Bootstrap 5 Spinners Margin是用来创建不同边距的spinners。对于边距旋转器，我们将使用.m类，有五种不同的尺寸，从0到5。另外，auto被用于margin auto。对于不同的边距，我们将使用t（代表顶部）、b（代表底部）、s（代表开始）、e（代表结束）、x（代表左边和右边）、y（代表顶部和底部）和空白（代表所有边）。

下面的语法在各个类中用于添加间距。

(property)(sides)-(size) for xs
(property)(sides)-(breakpoint)-(size) for sm, md, lg, and xl.

属性：有两种为元素添加间距的方法。

m:这个属性定义了保证金。边距提供了一个边缘或边界。

侧面：这允许用户在任何需要的地方将内容的间距添加到特定的侧面。

t: margin-top/padding-top。
b: margin-bottom/padding-bottom。
l: margin-left/padding-left。
r: margin-right/padding-right。
x: 用于padding-left和padding-right/margin-left和 margin-right。
y: 用于padding-top和padding-bottom/margin-top和 margin-bottom。
blank: 元素四边的边距/填充。

大小：这允许用户在关卡中添加特定数量的间隔。

0 – 0px margin/padding.
1 – 4px margin/padding。
2 – 8px margin/padding。
3 – 16px margin/padding。
4 – 24px margin/padding。
5 – 48px margin/padding。
auto —- auto margin。

例子1：在这个例子中，我们将为spinners元素添加一个空白。

<!DOCTYPE html>
<html>
  
<head>
    <title>Bootstrap 5 Spinners Margin</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
        rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
        crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
        crossorigin="anonymous">
    </script>
</head>
  
<body>
    <div class="container text-center">
        <h1 class="text-success">
            GeeksforGeeks
        </h1>
  
        <h2>Bootstrap 5 Spinners Margin</h2>
  
        <h3>Spinners without Margin</h3>
        <div class="spinner-border spinner-border"
            role="status">
            <span class="visually-hidden">Loading...</span>
        </div>
        <div class="spinner-grow spinner-grow" role="status">
            <span class="visually-hidden">Loading...</span>
        </div>
        <br><br>
  
        <h3>Spinners with Margin</h3>
        <div class="spinner-border spinner-border m-5"
            role="status">
            <span class="visually-hidden">Loading...</span>
        </div>
        <div class="spinner-grow spinner-grow m-5" role="status">
            <span class="visually-hidden">Loading...</span>
        </div>
    </div>
</body>
  
</html>

输出:

Bootstrap 5 Spinners Margin

例子2：在这个例子中，我们将为spinners元素添加一个空白。

<!DOCTYPE html>
<html>
  
<head>
    <title>Bootstrap 5 Spinners Margin</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
        rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
        crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
        crossorigin="anonymous">
    </script>
</head>
  
<body>
    <div class="container text-center">
        <h1 class="text-success">
            GeeksforGeeks
        </h1>
  
        <h2>Bootstrap 5 Spinners Margin</h2>
  
        <h3>Spinners without Margin</h3>
        <button class="btn btn-success" type="button">
            <span class="spinner-grow text-white
                spinner-grow-sm" role="status"></span>
            <span class="visually-hidden">Loading...</span>
        </button>
  
        <button class="btn btn-success" type="button">
            <span class="spinner-border spinner-border-sm"
                role="status"></span>
            <span class="visually-hidden">Loading...</span>
        </button>
        <br><br>
  
        <h3>Spinners with Margin</h3>
        <button class="btn btn-primary m-4" type="button">
            <span class="spinner-grow text-white
                spinner-grow-md" role="status"></span>
            <span class="visually-hidden">Loading...</span>
        </button>
  
        <button class="btn btn-primary m-4" type="button">
            <span class="spinner-border spinner-border-md"
                role="status"></span>
            <span class="visually-hidden">Loading...</span>
        </button>
    </div>
</body>
  
</html>