BootStrap4工具类之间距

爱喝水的qdy

于 2019-12-04 22:01:55 发布

阅读量358

点赞数

分类专栏： BootStrap4 文章标签： bootstrap4 工具类间距

本文链接：https://blog.csdn.net/qq_32617703/article/details/103395239

版权

BootStrap4 专栏收录该内容

26 篇文章 1 订阅

订阅专栏

官方地址

https://getbootstrap.com/docs/4.4/utilities/spacing/

其它文档地址

https://getbootstrap.net
- https://getbootstrap.net/docs/utilities/spacing/
http://bs4.vx.link
- http://bs4.vx.link/index.html?tmpui_page=/pages/utilities

如何运作

赋予一个缩写 class 使 margin 或 padding 值在一个元素上或其中一个边缘上 (包含响应式)。

包含支援单一个边缘属性或全部边缘、垂直边缘、水平边缘上。

Class 来自于 Sass map，范围从 .25rem 到 3rem.

命名

正值margin

所有断点：.{property}{sides}-{size}
特定断点：.{property}{sides}-{breakpoint}-{size}

负值margin

所有断点：.{property}{sides}-n{size}
特定断点：.{property}{sides}-{breakpoint}-n{size}

属性property

属性{property} 设定:

m 这个 class 会设定 margin
p 这个 class 会设定 padding

边缘sides

边缘{sides} 设定:

t 这个 class 会设定 margin-top 或 padding-top
b 这个 class 会设定 margin-bottom 或 padding-bottom
l 这个 class 会设定 margin-left 或 padding-left
r 这个 class 会设定 margin-right 或 padding-right
x 这个 class 会设定 both *-left 和*-right
y 这个 class 会设定 both *-top 和*-bottom
空白 - 如果边缘 class 未加入则会设定 margin或 padding 在元素的四个边缘。

尺寸size

尺寸{size} 设定：

0 - 这个 class 会设定 margin 或 padding 样式值为 0
1 - (预设时) 这个 class 会设定 margin 或 padding 于 $spacer * .25rem
2 - (预设时) 这个 class 会设定 margin 或 padding 于 $spacer * .5rem
3 - (预设时) 这个 class 会设定 margin 或 padding 于 $spacer
4 - (预设时) 这个 class 会设定 margin 或 padding 于 $spacer * 1.5rem
5 - (预设时) 这个 class 会设定 margin 或 padding 于 $spacer * 3rem
auto 这个 class 会设定 the margin to auto

整体代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no"/>
    <title>14间距</title>
    <!--<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">-->

    <!-- 新 Bootstrap4 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
<pre class="pre-scrollable">

</pre>

<div class="container">
    <h1>命名</h1>
    <ul>
        <li>
            所有断点：<code>.{property}{sides}-{size}</code>
        </li>

        <li>
            特定断点：<code>.{property}{sides}-{breakpoint}-{size}</code>
        </li>
    </ul>
    <hr />
    <h1>负值margin</h1>
    <ul>
        <li>
            所有断点：<code>.{property}{sides}-<u>n</u>{size}</code>
        </li>

        <li>
            特定断点：<code>.{property}{sides}-{breakpoint}-<u>n</u>{size}</code>
        </li>
    </ul>
</div>

<div class="container">
    <p>属性{property} 设定:</p>
    <ul>
        <li><code class="highlighter-rouge">m</code> 这个 class 会设定 <code class="highlighter-rouge">margin</code></li>
        <li><code class="highlighter-rouge">p</code> 这个 class 会设定 <code class="highlighter-rouge">padding</code></li>
    </ul>
    <p>边缘{sides} 设定:</p>
    <ul>
        <li><code class="highlighter-rouge">t</code> 这个 class 会设定 <code class="highlighter-rouge">margin-top</code> 或
            <code class="highlighter-rouge">padding-top</code></li>
        <li><code class="highlighter-rouge">b</code> 这个 class 会设定 <code class="highlighter-rouge">margin-bottom</code> 或
            <code class="highlighter-rouge">padding-bottom</code></li>
        <li><code class="highlighter-rouge">l</code> 这个 class 会设定 <code class="highlighter-rouge">margin-left</code> 或
            <code class="highlighter-rouge">padding-left</code></li>
        <li><code class="highlighter-rouge">r</code> 这个 class 会设定 <code class="highlighter-rouge">margin-right</code> 或
            <code class="highlighter-rouge">padding-right</code></li>
        <li><code class="highlighter-rouge">x</code> 这个 class 会设定 both <code class="highlighter-rouge">*-left</code>
            和<code class="highlighter-rouge">*-right</code></li>
        <li><code class="highlighter-rouge">y</code> 这个 class 会设定 both <code class="highlighter-rouge">*-top</code>
            和<code class="highlighter-rouge">*-bottom</code></li>
        <li>空白 - 如果边缘 class 未加入则会设定 <code class="highlighter-rouge">margin</code>或 <code class="highlighter-rouge">padding</code>
            在元素的四个边缘。
        </li>
    </ul>
    <p>尺寸{size} 设定：</p>
    <ul>
        <li><code class="highlighter-rouge">0</code> - 这个 class 会设定 <code class="highlighter-rouge">margin</code> 或
            <code class="highlighter-rouge">padding</code> 样式值为 <code class="highlighter-rouge">0</code></li>
        <li><code class="highlighter-rouge">1</code> - (预设时) 这个 class 会设定 <code class="highlighter-rouge">margin</code>
            或 <code class="highlighter-rouge">padding</code> 于 <code class="highlighter-rouge">$spacer * .25rem</code></li>
        <li><code class="highlighter-rouge">2</code> - (预设时) 这个 class 会设定 <code class="highlighter-rouge">margin</code>
            或 <code class="highlighter-rouge">padding</code> 于 <code class="highlighter-rouge">$spacer * .5rem</code></li>
        <li><code class="highlighter-rouge">3</code> - (预设时) 这个 class 会设定 <code class="highlighter-rouge">margin</code>
            或 <code class="highlighter-rouge">padding</code> 于 <code class="highlighter-rouge">$spacer</code></li>
        <li><code class="highlighter-rouge">4</code> - (预设时) 这个 class 会设定 <code class="highlighter-rouge">margin</code>
            或 <code class="highlighter-rouge">padding</code> 于 <code class="highlighter-rouge">$spacer * 1.5rem</code></li>
        <li><code class="highlighter-rouge">5</code> - (预设时) 这个 class 会设定 <code class="highlighter-rouge">margin</code>
            或 <code class="highlighter-rouge">padding</code> 于 <code class="highlighter-rouge">$spacer * 3rem</code></li>
        <li><code class="highlighter-rouge">auto</code> 这个 class 会设定 the <code class="highlighter-rouge">margin</code>
            to auto
        </li>
    </ul>
</div>

<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>

<!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js -->
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>

<!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>

爱喝水的qdy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
BootStrap4工具类之间距

目录官方地址其它文档地址如何运作命名正值margin负值margin属性property边缘sides尺寸size整体代码官方地址https://getbootstrap.com/docs/4.4/utilities/spacing/其它文档地址https://getbootstrap.nethttps://getbootstrap.net/docs/utilities/spacin...
复制链接

扫一扫