npm 包 @savvy-css/display-utilities 使用教程-JavaScript中文网-JavaScript教程资源分享门户

前言

在前端开发中，我们经常需要根据不同场景调整页面元素的显示方式，例如针对不同的设备尺寸和浏览器窗口大小进行响应式设计，或是针对不同的文件类型和链接类型显示不同的图标和样式等。而这些任务中不可避免地需要用到一些样式类名称和专业技术，往往需要消耗时间和精力。

鉴于此，开源社区中涌现了各种实用的工具和库，其中不乏对前端开发能力和效率提升有重要贡献的 NPM 包。本文介绍的 @savvy-css/display-utilities 包就是其中之一，它提供了一系列易用且通用的 CSS 样式类，帮助开发人员快速完成页面元素显示的调整和优化。

简介

@savvy-css/display-utilities 是一个基于 CSS 的 NPM 包，提供了一系列用于设置元素显示的样式类名称。这些样式类主要包括以下几种：

d-*：用于设置元素的显示方式（display）；
flex-*：用于设置元素的弹性和布局方式（Flexbox）；
grid-*：用于设置元素的网格布局方式（Grid）；
float-*：用于设置元素的浮动方式（float）。

@d-* 样式类适用于所有元素，而其他三种样式类则适用于具有弹性布局、网格布局和浮动布局的元素。这些样式类可以通过添加不同的后缀来设置不同的属性值。例如，d-flex 表示将元素设置为弹性布局方式，d-inline-block 表示将元素设置为内联块格式。

安装使用

要在项目中使用 @savvy-css/display-utilities，需要使用 NPM 或 Yarn 安装该包，并在 HTML 或 CSS 中引入样式表。

安装

使用 NPM 进行安装：

npm install @savvy-css/display-utilities

或使用 Yarn 进行安装：

yarn add @savvy-css/display-utilities

引入样式表

在 HTML 文件中添加以下代码：

<link rel="stylesheet" href="node_modules/@savvy-css/display-utilities/dist/display-utilities.min.css">

或者，在 CSS 文件中使用以下代码：

@import "~@savvy-css/display-utilities/dist/display-utilities.min.css";

使用样式类

使用样式类时，可以根据具体需求添加相应的后缀，例如：

<div class="d-flex justify-content-center">
  <p>Hello, world!</p>
</div>

上述代码表示将 <div> 元素设置为弹性布局方式，并水平居中其中包含的 <p> 元素。

示例

以下是一些使用 @savvy-css/display-utilities 包的示例代码。

d-block 和 d-none

d-block 样式类用于将元素设置为块级元素，在页面上以独立的块显示。

<div class="d-block">
  <p>Hello, world!</p>
</div>

d-none 样式类用于隐藏元素，不在页面上显示。

<div class="d-none">
  <p>Hello, world!</p>
</div>

d-flex 和 justify-content-center

d-flex 样式类用于将元素设置为弹性布局方式。

<div class="d-flex">
  <p>Hello, world!</p>
</div>

justify-content-center 样式类用于将元素水平居中。

<div class="d-flex justify-content-center">
  <p>Hello, world!</p>
</div>

d-grid 和 grid-gap

d-grid 样式类用于将元素设置为网格布局方式。

<div class="d-grid">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

grid-gap 样式类用于设置元素之间的间距。

<div class="d-grid grid-gap">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

float-left

float-left 样式类用于将元素向左浮动。

<div class="float-left">
  <p>Hello, world!</p>
</div>

结语

@savvy-css/display-utilities 是一个实用且易用的 NPM 包，它提供了一系列通用的 CSS 样式类，帮助开发人员快速完成元素显示的调整和优化。本文介绍了该包的安装和使用方法，并提供了一些示例代码帮助读者更好地了解该包的功能和作用。希望本文对读者有所帮助，在前端开发中发挥更高的效率和质量。

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