# @allxsmith/bestax-bulma 中文文档

规范地址：https://npmcn.com/package/%40allxsmith/bestax-bulma/

版本：5\.65\.0
npm 元数据更新时间：2026-11-04T23:31:35.214Z
中文译文更新时间：2026-11-05T22:01:00.763Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40allxsmith/bestax-bulma
原文对照：https://npmcn.com/package/%40allxsmith/bestax-bulma/?lang=original
项目主页：https://bestax.io/
源码仓库：https://github.com/allxsmith/bestax

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：17.2 MB，1016 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- Node.js 要求：\>=16
- 运行依赖：1 个
- peer 依赖：react ^18\.0\.0 \|\| ^19\.0\.0，ionicons ^8\.0\.0，@mdi/font ^7\.4\.47，react-dom ^18\.0\.0 \|\| ^19\.0\.0，material-icons ^1\.13\.10，material-symbols ^0\.34\.1 \|\| ^0\.45\.0 \|\| ^0\.46\.0 \|\| ^0\.47\.0 \|\| ^0\.48\.0，@fortawesome/fontawesome-free ^6\.7\.2 \|\| ^7\.0\.0
- 首次发布：2025-07-06T05:20:13.548Z
- 最新版本发布：2026-11-04T23:31:34.865Z
- 近 30 天下载量：14336（2026-10-06 至 2026-11-04，npm 官方下载统计）
- 已发布版本数：172（近 12 个月 137 个）

## 中文简介

基于 React 的组件库, Bulma, 具有代理技能和 MCP

## 安装

```sh
npm install @allxsmith/bestax-bulma
```

也可以使用：`pnpm add @allxsmith/bestax-bulma`、`yarn add @allxsmith/bestax-bulma`、`bun add @allxsmith/bestax-bulma`

## README

# @allxsmith/ bestax-bulma (英语)

[![npm version](https://img.shields.io/npm/v/@allxsmith/bestax-bulma.svg)](https://www.npmjs.com/package/@allxsmith/bestax-bulma) [![npm downloads](https://img.shields.io/npm/dm/@allxsmith/bestax-bulma.svg)](https://www.npmjs.com/package/@allxsmith/bestax-bulma) [![TypeScript](https://img.shields.io/badge/TypeScript-100%25-blue.svg)](https://www.typescriptlang.org/) [![Coverage](https://img.shields.io/badge/coverage-99%25-brightgreen.svg)](https://github.com/allxsmith/bestax/blob/main/bulma-ui/vitest.config.ts) [![Bulma](https://img.shields.io/badge/Bulma-v1.0+-00d1b2.svg)](https://bulma.io/) [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT) [![Socket Badge](https://badge.socket.dev/npm/package/@allxsmith/bestax-bulma/latest)](https://socket.dev/npm/package/@allxsmith/bestax-bulma/overview) [![OpenSSF Scorecard](https://api.scorecard.dev/projects/github.com/allxsmith/bestax/badge)](https://scorecard.dev/viewer/?uri=github.com/allxsmith/bestax) [![OpenSSF Best Practices](https://www.bestpractices.dev/projects/14361/badge)](https://www.bestpractices.dev/projects/14361) [![npm provenance](https://img.shields.io/badge/npm-provenance-3fb950.svg)](https://www.npmjs.com/package/@allxsmith/bestax-bulma#provenance) [![Security policy](https://img.shields.io/badge/security-policy-blue.svg)](https://github.com/allxsmith/bestax/blob/main/SECURITY.md)

TypeScript- First React 组件库 **布尔玛 v1** CSS框架——80+已完全打入,可树摇动组件,包括卡卢塞尔,Dialog,Sidebar,Steps等额外部件和取出日期/时间.

**需要反应 `^18 || ^19`。 。 。 .** Bulma v1是唯一的运行时间依赖并自动安装.

部分 [最佳单曲](https://github.com/allxsmith/bestax) - 另见 [`create-bestax`](https://www.npmjs.com/package/create-bestax) 用于脚手架新项目.

* * *

## 综合文件

**寻找完整的文件、指南、参考文献和最佳做法?**  
👉 **拜访我们的官方文件 [https://bestax.io (英语)](https://bestax.io/)**

> 文件网站是了解所有最优等功能、使用模式和更新的最佳场所。 我们强烈建议把文件作为主要资源!

* * *

## 开始

刚开始? 脚手架上有一个准备就绪的应用程序: `npm create bestax@latest my-app`。 。 。 .

### 1\. 安装软件包

```bash
npm install @allxsmith/bestax-bulma
# or
pnpm add @allxsmith/bestax-bulma
```

### 2\. 进口中央支助系统

库将自己的CSS(Bulma v1 + bestax extra)捆绑起来. 在您的 JS/ TS 主文件中导入一次 :

```js
import '@allxsmith/bestax-bulma/bestax.css';
```

喜欢的股票 Bulma? 这也是可行的,加上 `extras.css` 用于仅用于最佳组件样式:

```js
import 'bulma/css/bulma.min.css';
import '@allxsmith/bestax-bulma/extras.css';
```

更多的口味作为子路径输出运输——前缀类(`versions/bestax-prefixed.css` + 键 `<ConfigProvider classPrefix="bestax-">`),无帮助者,无黑暗模式和原始SCSS at `@allxsmith/bestax-bulma/scss/*`见 [安装指南](https://bestax.io/docs/guides/getting-started/installation)。 。 。 .

### 3\. (可选) 添加图标库

5个图标库作为可选的同伴依赖性支持 : [字体帅呆了](https://fontawesome.com/) (单位:千美元)`@fortawesome/fontawesome-free`),材料设计图标(`@mdi/font`, (中文(简体) ), `ionicons`, (中文(简体) ), `material-icons`,以及 `material-symbols`。 。 。 .

```bash
npm install @fortawesome/fontawesome-free
```

设置整个应用程序的默认值 [`ConfigProvider`](https://bestax.io/docs/api/helpers/config),比如说. `<ConfigProvider iconLibrary="fa">`。 。 。 .

### 4\. 快速示例

```tsx
import '@allxsmith/bestax-bulma/bestax.css';
import { Button } from '@allxsmith/bestax-bulma';

function App() {
  return (
    <Button color="primary" onClick={() => alert('Clicked!')}>
      Click Me
    </Button>
  );
}

export default App;
```

### 5\. 暗黑模式

将您的应用程序包入 [`Theme`](https://bestax.io/docs/api/helpers/theme) 以覆盖 Bulma 的 `--bulma-*` CSS 变量并控制颜色方案 :

```tsx
import { Theme } from '@allxsmith/bestax-bulma';

<Theme isRoot colorMode="system">
  {/* colorMode: 'light' | 'dark' | 'system' */}
  <App />
</Theme>;
```

* * *

## 为什么选Bestax-bulma?

-   **支持最近的 Bulma v1.x** 其他React Bulma图书馆被卡住在 Bulma 0.9.4上——为未来而建造了bestax-bulma.
-   **80+组件** 所有 Bulma v1, 外加: Carousel, Dialog, Sidebar, Steps, Autocomplete, Taginput, DateInput/TimeInput/ DateTimeInput 拾取器等. (从v2移出? Snackbar 合并为 [土司](https://bestax.io/docs/api/components/toast). ) (中文(简体) )
-   **已构建的黑暗模式主题( T)** `Theme colorMode`, (中文(简体) ), `--bulma-*` 变量覆盖,且通过 `ConfigProvider`。 。 。 .
-   **只有一个依赖: Bulma** 每个布尔马图书馆都依靠它——我们自动运送. 安装干净,安全隐患减少.
-   **树能变化的无害环境管理** 只导入您使用的东西; 您的捆绑器会放下其余的 。 一个CJS大楼在那里 `require`。 。 。 .
-   **99%的单位测试覆盖率** 由最高法院执行 [虚拟配置](https://github.com/allxsmith/bestax/blob/main/bulma-ui/vitest.config.ts) - 不只是声称.
-   **100% 类型脚本** 你和你的团队有完全的安全性.
-   **积极开发者支持** 问题? 有问题吗? 公关? 获得快速响应和真正的改进.

* * *

## 国家防范机制一揽子计划

查看 npmjs 上的软件包 :  
👉 [https://www.npmjs.com/package/@allxsmith/bestax-bulma (中文(简体) )](https://www.npmjs.com/package/@allxsmith/bestax-bulma)

* * *

## 默认硬化

此套件为一跑的依赖深度(Bulma)

-   **署名出处** 每一次释放都带了石刻证明 将焦油球与确切的犯规联系起来 并且CI运行它。 检查一下 **证明** 页:1 [npm 页](https://www.npmjs.com/package/@allxsmith/bestax-bulma#provenance),或运行 `npm audit signatures` 在你的项目.
-   **npm OIDC 信任的出版** ——短生,每期合格证;无长生 `NPM_TOKEN` 已存在以被窃取。 释放承诺和标记由GPG签名.
-   **Socket.dev 扫描每个 PR** 对于恶意软件,安装脚本,模糊代码, 和特权升级 才能到达 `main`。 。 。 .
-   **依赖是故意的行为** ——安装脚本被屏蔽,除非单独允许列出,新公布的版本被拒绝3天,CI只安装被审查的锁文件所解决的.
-   **每一次GitHub行动都要全力以赴**,所以一个已失密的动作发布不能默默地卷入这个包的构建.
-   **编码QL、依赖审查和依赖** 连续运行,与高分 `pnpm audit` 有门.
-   **合并前分层的 AI 审查** —— 说 [代码](https://coderabbit.ai/) 加上独立的对抗克洛德审查(与写AI作者的更改不同的模式),在要求的绿色CI,批准审查以及人与人合并.

全部细节 : [`SECURITY.md`](https://github.com/allxsmith/bestax/blob/main/SECURITY.md) • 妇女 [安保指南](https://bestax.io/docs/guides/security)

* * *

## 页:1

**如欲获取完整文件、指南和最佳做法,请使用我们的官方文件网址:**

👉 [https://bestax.io (英语)](https://bestax.io/)

> **总是提到 [文档网站](https://bestax.io/) 第一条:**  
> 这是最完整和最新的源 所有最优秀的!

* * *

## · 故事本

探索我们的故事书中的现场互动部分实例:

👉 [https://bestax.io/史书](https://bestax.io/storybook)

* * *

## 用于 AI 工具

用人工智能代理(Claude Code, Cursor, Copilot)建造? Bestax-bulma号舰 LLM-优化文件:

-   📘 **[LLMS 指南](https://bestax.io/docs/guides/llms)** ——如何用人工智能工具使用库
    
-   📄 **[页:1](https://bestax.io/llms.txt)** ——整理索引 **[llms- full.txt (英语)](https://bestax.io/llms-full.txt)** – 一个文件中的完整文件 – 每个文件页也被作为原始标记
    
-   📦 **在 npm 软件包中** - 柏油球舰 `llms.txt`, (中文(简体) ), `AGENTS.md`,以及 `CLAUDE.md` 指针文件,所以代理正在探索 `node_modules` 按文件名分列的这些资源上的地块
    
-   🧩 **[代理技能](https://bestax.io/docs/skills/intro)** 教你的经纪人最好的方法:
    
    | 技能 | 当.. |
    | --- | --- |
    | `bestax-layout-scaffold` | 将高级请求(dashboard, landing page,.)转换为响应页面 |
    | `bestax-form` | 建筑表格——外地/管制组成和全部投入库存 |
    | `bestax-theming` | 自定义颜色、字体、暗模式通过 `Theme` 财务报告和审定财务报表 `--bulma-*` 变量 |
    | `bestax-custom-component` | 建立一个超越库存的新定制组件 Bulma,最佳方式 |
    | `bestax-icons` | 添加图标 — 图标/ IconText 和 五个支持的图标库 |
    | `bestax-optimize` | 挤压已建成的CSS——口味建筑,模块化Sass,进口卫生 |
    | `bestax-migrate` | 将应用程序从反应- bulma 组件( v4) 移到 bestax- bulma |
    
    ```bash
    npx skills add https://github.com/allxsmith/bestax --skill bestax-layout-scaffold
    ```
    
    新项目自动获得技能 `npm create bestax@latest my-app --skills` (加上产生的 `CLAUDE.md`) (中文(简体) ).
    

* * *

## \* 归属

bestax-bulma 建在不可思议的上方 [布玛](https://bulma.io/) CSS框架, © [杰里米·托马斯](https://github.com/jgthms) 根据《公约》第19条 [MIT 许可证](https://github.com/jgthms/bulma/blob/main/LICENSE)其通知与 软件包在 [第三次议会提名(md)](https://npmcn.com/package/%40allxsmith/bestax-bulma/THIRD-PARTY-NOTICES.md)。一些实例内容和文件是 改编自Bulma网站 (单位:千美元)[CC BY-NC-SA 4.0 (英语)](https://creativecommons.org/licenses/by-nc-sa/4.0/)杰里米·托马斯.

如果你觉得Bulma有用,请考虑 [赞助杰里米·托马斯](https://github.com/sponsors/jgthms) 支持委员会继续 发展.

_我们与布尔玛或杰里米·托马斯没有任何联系——我们只是大粉丝 布玛框架!_

## 许可证

源代码许可麻省理工学院

## 常见问题

### @allxsmith/bestax-bulma 是什么？

基于 React 的组件库, Bulma, 具有代理技能和 MCP

### 如何安装 @allxsmith/bestax-bulma？

在项目目录运行 npm install @allxsmith/bestax-bulma，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（^18\.0\.0 \|\| ^19\.0\.0）、react-dom（^18\.0\.0 \|\| ^19\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @allxsmith/bestax-bulma 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @allxsmith/bestax-bulma 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @allxsmith/bestax-bulma 需要什么版本的 Node\.js？

package\.json 的 engines 字段要求 Node\.js \>=16。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。

### @allxsmith/bestax-bulma 可以商用吗？

@allxsmith/bestax-bulma 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @allxsmith/bestax-bulma 的下载量有多少？

根据 npm 官方下载统计，@allxsmith/bestax-bulma 在 2026/10/06 – 2026/11/04 这 30 天内被下载 14,336 次，日均约 478 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @allxsmith/bestax-bulma 还在维护吗？

最新版本 5\.65\.0 发布于 2026/11/05（1 天前）；至今共发布 172 个版本，其中过去 12 个月发布了 137 个；首次发布于 2025/07/06。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。