在前端开发中，样式表是不可或缺的一部分。@conexus-vn/styles 是一个提供了多种精美样式的 npm 包。本文将介绍如何使用该包，包括安装和使用示例。
安装
可以通过 npm 在项目中安装该包：
--- ------- ------------------
使用示例
以下代码演示了如何在 HTML 中引用 @conexus-vn/styles 提供的样式：
--------- -----
------
------
----- ---------------- -------------------------------------------------------
-------
------
---- ------------------
--- --------------------- -- -- -------------
-- --------------------- --- --- ---- -- ------ -------- --- ---- ----------
------
-------
-------在上面的示例中，样式表文件在 node_modules/@conexus-vn/styles/dist/styles.css 中，通过 link 标签引入。然后在 HTML 中使用包中提供的样式类名来实现样式效果。例如，上面示例中使用了 .container、.title 和 .subtitle 三个样式类。
提供的样式
@conexus-vn/styles 中提供了多种实用的样式类，以下列举部分：
字体
| Class Name | 说明 |
|---|---|
| .text-primary | 主要文本颜色 |
| .text-secondary | 次要文本颜色 |
| .text-muted | 轻提示文本颜色 |
| .text-accent | 强调文本颜色 |
| .font-weight-normal | 普通字体 |
| .font-weight-bold | 粗体字体 |
布局
| Class Name | 说明 |
|---|---|
| .container | 页面容器 |
| .row | 行 |
| .col | 列 |
| .col-1, .col-2, ... , .col-12 | 列的宽度 |
边框
| Class Name | 说明 |
|---|---|
| .border | 边框 |
| .border-top | 顶部边框 |
| .border-right | 右侧边框 |
| .border-bottom | 底部边框 |
| .border-left | 左侧边框 |
总结
使用 @conexus-vn/styles 可以为你的项目提供多种实用的样式类。为了保证代码的可维护性，应该尽量避免重复造轮子。希望本文能够为前端开发者提供一些指导意义。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60057c4781e8991b448ebcb6