npm 包 bulma-dev-spacing 使用教程

Bulma 是一个基于 Flexbox 的现代 CSS 框架，它提供了大量的 CSS 类来帮助开发人员快速构建漂亮而响应式的页面。Bulma 的基础 CSS 样式是非常好的，它提供了很多好用的样式。然而，开发人员在实际开发中还是会对一些细节进行优化，其中之一就是微调页面元素之间的间距。

为了解决这个问题，一个名为 bulma-dev-spacing 的 npm 包应运而生。它是一个小巧而灵活的 npm 包，提供了一些额外的 CSS 类，可以让开发人员轻松地微调 Bulma 的间距设置。

安装

安装 bulma-dev-spacing 包非常简单，只需要使用 npm 安装即可：

npm i -S bulma-dev-spacing

安装完成后，您需要将其导入到您的项目中：

@import '~bulma-dev-spacing/src/bulma-dev-spacing';

基础使用

一旦您的安装和导入完成，您就可以使用新的 CSS 类来微调 Bulma 的间距。

-- -------------------- ---- -------
---- -------------- ------------ -----------
  ---- ------------- ------- ----------
    ---- ----------- ---------------
      ---- ---------------------
        -- -------------------- ---------
        -- ------------------------
      ------
    ------
  ------
  
  ---- ------------- ------- ----------
    ---- ----------- ---------------
      ---- ---------------------
        -- -------------------- ---------
        -- ------------------------
      ------
    ------
  ------
------

在上面的示例中，我们使用了两个新的 CSS 类名 dev-mb-4 和 dev-mb-8，用于设置两个不同的 margin-bottom 值。这两个类都是通过 bulma-dev-spacing 包添加的。

更多的可用类名

在 bulma-dev-spacing 包中还有很多其它的 CSS 类名可用，您可以根据自己的需要来决定使用哪些类名。

宽度

• dev-w-100: 设置宽度为 100%
• dev-w-50: 设置宽度为 50%
• dev-w-33: 设置宽度为 33.333%
• dev-w-25: 设置宽度为 25%

高度

• dev-h-100: 设置高度为 100%
• dev-h-50: 设置高度为 50%
• dev-h-33: 设置高度为 33.333%
• dev-h-25: 设置高度为 25%

Padding

• dev-p-1: 添加 1rem 的 padding
• dev-p-2: 添加 2rem 的 padding
• dev-p-3: 添加 3rem 的 padding
• dev-p-4: 添加 4rem 的 padding
• dev-p-5: 添加 5rem 的 padding

Margin

• dev-m-1: 添加 1rem 的 margin
• dev-m-2: 添加 2rem 的 margin
• dev-m-3: 添加 3rem 的 margin
• dev-m-4: 添加 4rem 的 margin
• dev-m-5: 添加 5rem 的 margin

Margin-top

• dev-mt-1: 添加 1rem 的 margin-top
• dev-mt-2: 添加 2rem 的 margin-top
• dev-mt-3: 添加 3rem 的 margin-top
• dev-mt-4: 添加 4rem 的 margin-top
• dev-mt-5: 添加 5rem 的 margin-top

Margin-right

• dev-mr-1: 添加 1rem 的 margin-right
• dev-mr-2: 添加 2rem 的 margin-right
• dev-mr-3: 添加 3rem 的 margin-right
• dev-mr-4: 添加 4rem 的 margin-right
• dev-mr-5: 添加 5rem 的 margin-right

Margin-bottom

• dev-mb-1: 添加 1rem 的 margin-bottom
• dev-mb-2: 添加 2rem 的 margin-bottom
• dev-mb-3: 添加 3rem 的 margin-bottom
• dev-mb-4: 添加 4rem 的 margin-bottom
• dev-mb-5: 添加 5rem 的 margin-bottom

Margin-left

• dev-ml-1: 添加 1rem 的 margin-left
• dev-ml-2: 添加 2rem 的 margin-left
• dev-ml-3: 添加 3rem 的 margin-left
• dev-ml-4: 添加 4rem 的 margin-left
• dev-ml-5: 添加 5rem 的 margin-left

结论

bulma-dev-spacing 是一个非常有用的 npm 包，可以帮助开发人员在使用 Bulma 框架时快速微调页面元素之间的间距设置。通过使用这个包，可以使得开发工作变得更加高效，并且减少代码编写上的重复性，优化了开发体验。如果你正在使用 Bulma，无论是在个人项目中还是在商业项目中，这个包都是一个很好的选择。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067350890c4f72775838be