Bootstrap中的间距与实例

Bootstrap中的间距与实例

Bootstrap有许多类的设施,可以轻松地在HTML中对元素进行造型。它包括各种响应式的填充和边距类,用于修改元素的外观。间距工具没有应用于断点的断点符号。
以下语法用于在各种类别中添加间距。

  • (属性)(边)-(大小)为xs
  • (property)(sides)-(breakpoint)-(size)为sm, md, lg和xl。

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

  • m : 这个属性定义了保证金。边距提供了一个边缘或边界。
  • p :这个属性定义了padding。填充属性用于在内容周围产生空间。

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

  • 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。

断点:断点是网站内容可以根据设备进行调整的点,并允许向用户展示最佳布局。

  • sm、md、lg和xl是以下断点。

语法:

  • 对于断点 – xs:
<div class="mt-4">
  • 对于断点 – md。
<div class="mt-md-4">
  • 对于断点 – lg:
<div class="mt-lg-4">
  • 对于断点 – xl:
<div class="mt-xl-4">

响应式间隔表:

屏幕尺寸 类别
出现在所有 .ml-3
只出现在 xs .ml-3 .ml-sm-0 上。
只出现在sm .ml-sm-3 .ml-md-0上。
只出现在md上 .ml-md-3 .ml-lg-0
只出现在lg上 .ml-lg-3 .d-xl-0
只出现在xl .ml-xl-3上

示例 1:

<!DOCTYPE html>
<html>
    <head>
     
        <!-- Link Bootstrap CSS -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
         
        <!-- Link Bootstrap Js and Jquery -->
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
 
        <title>
            GeeksForGeeks Bootstrap Spacing Example
        </title>
    </head>
     
    <body>
        <br>
        <tab>
        <h3>Padding And Margin</h3>
         
        <div class="container text-white">
            <br><br>
             
            <div class="pt-5 bg-success">
                GeeksForGeeks
            </div>
            <br>
             
            <div class="p-4 bg-success">
                GeeksForGeeks
            </div>
             
            <div class="m-4 pb-5 bg-success">
                GeeksForGeeks
            </div>
        </div>
    </body>
</html>

输出:

Bootstrap中的间距与实例

示例 2:

<!DOCTYPE html>
<html>
<head>
    <!-- Link bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
     
    <!-- Link bootstrap JS and Jquery -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
 
    <title>
        GeeksforGeeks Bootstrap Spacing Example
    </title>
</head>
 
<body>
 
    <div class="container"><br>
        <h4 style="color:green;">
            GeeksforGeeks is a regularly spaced.
        </h4>
         
        <h4 class="ml-5 ml-lg-0"style="color:green;">
            GFG Geeks1 has left margin visible on
            xs, sm and md displays.
        </h4>
    </div>
     
</body>
</html>                                       

输出:

Bootstrap中的间距与实例

示例 3:

<!DOCTYPE html>
<html>
<head>
    <!-- Link Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
     
    <!-- Link Bootstrap JS and Jquery -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
 
    <title>
        GeeksForGeeks Bootstrap Spacing Example
    </title>
</head>
 
<body>
    <div class="container"><br>
        <div class="mx-auto" style="width:300px;
                            background-color:green;">
            <h3 style="color:white;">GeeksForGeeks</h3>
        </div>
    </div>
</body>
</html>                   

输出:

Bootstrap中的间距与实例

支持的浏览器:

  • Google Chrome
  • Internet Explorer
  • Firefox
  • Opera
  • Safari

Python教程

Java教程

Web教程

数据库教程

图形图像教程

大数据教程

开发工具教程

计算机教程

Bootstrap教程