# @ajsf/bootstrap4 中文文档

规范地址：https://npmcn.com/package/%40ajsf/bootstrap4/

版本：22\.6\.0
npm 元数据更新时间：2026-10-25T17:19:49.938Z
中文译文更新时间：2026-11-06T17:14:54.688Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40ajsf/bootstrap4
原文对照：https://npmcn.com/package/%40ajsf/bootstrap4/?lang=original
项目主页：https://github.com/hamzahamidi/ajsf#readme
源码仓库：https://github.com/hamzahamidi/ajsf

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

- 包体积（解压后）：92.3 kB，6 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：2 个
- peer 依赖：@angular/core ^22\.0\.0，@angular/common ^22\.0\.0
- 首次发布：2020-01-11T20:27:30.091Z
- 最新版本发布：2026-10-25T17:19:49.567Z
- 近 30 天下载量：2615（2026-10-05 至 2026-11-03，npm 官方下载统计）
- 已发布版本数：55（近 12 个月 35 个）

## 中文简介

使用 Bootstrap 4 UI 的角 JSON Schema 窗体构建器

## 安装

```sh
npm install @ajsf/bootstrap4
```

也可以使用：`pnpm add @ajsf/bootstrap4`、`yarn add @ajsf/bootstrap4`、`bun add @ajsf/bootstrap4`

## README

# @ajsf/bootstrap4 (中文(简体) )

[![Repository coverage, SonarQube Cloud](https://sonarcloud.io/api/project_badges/measure?project=hamzahamidi_ajsf&metric=coverage)](https://sonarcloud.io/summary/new_code?id=hamzahamidi_ajsf)

首选项4框架 [协会](https://github.com/hamzahamidi/ajsf#readme),它从JSON Schema中构建了角形.

## 开始

安装软件包和 Bootstrap 4 :

```shell
npm install @ajsf/bootstrap4 bootstrap@4
```

将 Bootstrap 样式表添加到 `styles` 目标 `angular.json`数字 :

```json
"styles": [
  "node_modules/bootstrap/dist/css/bootstrap.min.css",
  "src/styles.css"
]
```

导入 `Bootstrap4FrameworkModule` 以独立组件构成形式。 没有进去 `app.config.ts`数字 :

```typescript
import { Component } from '@angular/core';
import { Bootstrap4FrameworkModule } from '@ajsf/bootstrap4';

@Component({
  selector: 'app-root',
  imports: [Bootstrap4FrameworkModule],
  templateUrl: './app.html',
})
export class App {
  schema = {
    type: 'object',
    properties: {
      name: { type: 'string', title: 'Name' },
      plan: { type: 'string', title: 'Plan', enum: ['free', 'pro', 'team'] },
    },
    required: ['name'],
  };

  onSubmit(data: any) {
    console.log(data);
  }
}
```

在一个 `NgModule` 应用程序,添加 `Bootstrap4FrameworkModule` 到模块的 `imports` 换句话说.

然后在组件的模板中使窗体:

```html
<json-schema-form
  [schema]="schema"
  framework="bootstrap-4"
  (onSubmit)="onSubmit($event)">
</json-schema-form>
```

`framework="bootstrap-4"` 选择此软件包的模板。 其他价值是: `material-design`, (中文(简体) ), `primeng`, (中文(简体) ), `bootstrap-3`, (中文(简体) ), `bootstrap-5` 财务报告和审定财务报表 `no-framework`,默认值.

要尝试库而不安装 Bootstrap,绑定 `[loadExternalAssets]="true"` 打开 `<json-schema-form>` 换句话说,它从CDN装入了靴子4。 自己把资产装入生产.

这个 [AJSF 读取](https://github.com/hamzahamidi/ajsf#readme) 涵盖其他输入和输出、布局、自定义部件和验证消息.

## 靴子4标记,20.1.0改正

这个软件包之前发布了"靴子3"类名称. 它是作为一个 存档副本 `@ajsf/bootstrap3` 随着CDN URL的改变,所以类 Botstrap 4 却默默无闻地袖手旁观 如果你已经写 CSS与旧的输出相对应,这些名称被改变.

| 曾经 | 现在 | 为什么 |
| --- | --- | --- |
| `has-error`, (中文(简体) ), `has-success`, (中文(简体) ), `has-feedback` | `is-invalid` 在字段包装上 | 靴子4标记球场,而不是容器 |
| `help-block` | `form-text text-muted` | Fotstrap 4 的帮助文本类 |
| `form-control-feedback`, (中文(简体) ), `glyphicon` | 删除 | 4艘无胶原舰 |
| `input-group-addon` | `input-group-prepend` 或者说 `input-group-append` 包装 `input-group-text` | 靴子4的外加结构 |
| `pull-right` | `float-right` | 在 Bootstrap 4 中重新命名 |
| `control-label` | 无类 | Bootstrap 4 以堆叠形式样式的普通标签 |
| `btn-default` | `btn-secondary` | 靴子4的中性按钮 |

`form-group` 财务报告和审定财务报表 `sr-only` 4 仍然定义 都一样.

验证电文的行为也不同,这一部分适用于 `@ajsf/bootstrap3` 财务报告和审定财务报表 `@ajsf/bootstrap5` 我也一样。 曾经只显示的消息 当值改变时, 将目标聚焦到需要的字段并留为空 什么都没有 一旦球场被触及或被改变,它现在就会出现. 错误文本和帮助文本现在也是单独的元素,所以可以样式一个 没有另一个.

## 复选框和收音机结构,于22.1.0中更改

复选框和收音机之前提供了 `<input>` 内部 `<label>`, (中文(简体) ), 此软件包是复制出来的。 他们现在让 作为兄弟姐妹在a `.form-check` 包裹,这就是"靴子"4 及其状态要求:

```
<div class="form-check">
  <input class="form-check-input" id="control1" type="checkbox">
  <label class="form-check-label" for="control1">Accept</label>
</div>
```

内含变体 (`checkboxes-inline`, (中文(简体) ), `radios-inline`同样的移动方式, 从已删除的靴子 3 `checkbox-inline` 财务报告和审定财务报表 `radio-inline` 类改为 `form-check form-check-inline` 同样的兄弟形状.

切换按钮( T)`checkboxbuttons`, (中文(简体) ), `radiobuttons`)不变. 诱饵 4 文档 `.btn-group-toggle` 标签内输入,以及 没有 `.btn-check`。 。 。 .

如果您写 CSS 选择 `label > input` 或将标签设置为 控制是祖先,这是区别所在.

## 阵列行布局,22.2.0有变化

阵列项上的删除按钮曾经是字段的第一个子 包裹并浮出水面,所以它离开了正常的流量,坐在排行的顶端 而不是在控制之外。 它现在与球场共用一排活字. 还有 当项目是一组时,它与控制中心相对应 中点移动 随着内容的增长.

有两个细节,如果你已经写 CSS 与旧输出。 每个字段 在外侧之间增加一个折叠元素 `form-group` 集装箱和外地 本身,包装器变成一个弹性容器 只在可移动阵列上 页:1 无效的标记已移动到包装上, 因此选择器为 `.input-group.is-invalid` 不再匹配; 标记现在在 元素直接在它的上方.

## 阵列标题,22.2.0中更改

一个阵列两次实现了标题:一次作为字段标签,另一次作为 字段集图例,部件从原始属性名重建。 A 类 `phone_numbers` 属性显示“Phone numbers”后加“Phone numbers”.

标题现在属于部件, 就像它已经为一个字段集所做的一样, 所以它 制作一次,在 `<legend>` 在正常状态下命名组 拼写。 如果您的 CSS 瞄准数组标签通过 `labelHtmlClass`现在 适用于传说.

需要的标记随标题一起移动. 原仅附后 框架本身的标签,所以需要的字段集,其标题的部件 已经拥有,没有星号,现在有了.

## 常见问题

### @ajsf/bootstrap4 是什么？

使用 Bootstrap 4 UI 的角 JSON Schema 窗体构建器

### 如何安装 @ajsf/bootstrap4？

在项目目录运行 npm install @ajsf/bootstrap4，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：@angular/core（^22\.0\.0）、@angular/common（^22\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @ajsf/bootstrap4 支持 TypeScript 吗？

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

### @ajsf/bootstrap4 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @ajsf/bootstrap4 可以商用吗？

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

### @ajsf/bootstrap4 的下载量有多少？

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

### @ajsf/bootstrap4 还在维护吗？

最新版本 22\.6\.0 发布于 2026/10/26（13 天前）；至今共发布 55 个版本，其中过去 12 个月发布了 35 个；首次发布于 2020/01/12。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。