# @clake/react-bootstrap4 中文文档

规范地址：https://npmcn.com/package/%40clake/react-bootstrap4/

版本：2\.6\.18
npm 元数据更新时间：2026-11-06T03:22:36.776Z
中文译文更新时间：2026-11-09T23:31:06.800Z
软件包许可：MIT

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

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

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

- 包体积（解压后）：1.6 MB，304 个文件
- 模块格式：CommonJS
- TypeScript 类型：包内自带
- 运行依赖：2 个
- 首次发布：2018-04-27T07:02:50.143Z
- 最新版本发布：2026-11-06T03:22:36.629Z
- 近 30 天下载量：2827（2026-10-10 至 2026-11-08，npm 官方下载统计）
- 已发布版本数：365（近 12 个月 25 个）

## 中文简介

反应靴子v4

## 安装

```sh
npm install @clake/react-bootstrap4
```

也可以使用：`pnpm add @clake/react-bootstrap4`、`yarn add @clake/react-bootstrap4`、`bun add @clake/react-bootstrap4`

## README

# React Bootstrap v4 组件库

这是一个基于Bootstrap 4的React组件库，提供了丰富的UI组件来构建现代化的Web应用程序。

## 特性

-   基于React和Bootstrap 4
-   完整的UI组件集合
-   TypeScript支持
-   响应式设计
-   易于定制和扩展

## 安装

```bash
npm install @clake/react-bootstrap4
```

或者使用yarn：

```bash
yarn add @clake/react-bootstrap4
```

## 使用

### 基本用法

```jsx
import React from 'react';
import { Button, Input } from '@clake/react-bootstrap4';

function App() {
  return (
    <div>
      <Button theme="primary">点击我</Button>
      <Input placeholder="请输入内容" />
    </div>
  );
}
```

### 组件导入

```javascript
// 导入单个组件
import { Button } from '@clake/react-bootstrap4';

// 或者导入所有组件
import * as ReactBootstrap from '@clake/react-bootstrap4';
```

## 组件列表

本库包含以下主要组件：

-   Button - 按钮组件
-   Input - 输入框组件
-   Table - 表格组件
-   Card - 卡片组件
-   Dropdown - 下拉菜单组件
-   Modal - 模态框组件
-   Form - 表单组件
-   Calendar - 日历组件
-   Tabs - 标签页组件
-   和更多...

## 文档结构

详细的组件文档和使用示例请查看：

1.  [组件文档](https://npmcn.com/package/%40clake/react-bootstrap4/docs/README.md)
2.  [快速开始](https://npmcn.com/package/%40clake/react-bootstrap4/docs/quick-start.md)
3.  [示例代码](https://npmcn.com/package/%40clake/react-bootstrap4/examples/index.html)

## 组件使用指南

### Button（按钮）

```jsx
<Button theme="primary" onClick={handleClick}>
  点击我
</Button>
```

### Input（输入框）

```jsx
<Input 
  placeholder="请输入内容"
  onChange={handleChange}
/>
```

### Table（表格）

```jsx
<Table data={data}>
  <Table.Header field="name" text="姓名" />
  <Table.Header field="age" text="年龄" />
</Table>
```

## 快速开始

1.  安装依赖包
2.  在项目中导入组件
3.  开始使用组件构建用户界面

## 示例代码

### 基本按钮示例

```jsx
import React from 'react';
import { Button } from '@clake/react-bootstrap4';

function Example() {
  return (
    <div>
      <Button theme="primary">主要按钮</Button>
      <Button theme="secondary">次要按钮</Button>
      <Button theme="success">成功按钮</Button>
    </div>
  );
}
```

### 表单示例

```jsx
import React, { useState } from 'react';
import { Form, Input, Button } from '@clake/react-bootstrap4';

function FormExample() {
  const [formData, setFormData] = useState({
    name: '',
    email: ''
  });

  const handleChange = (field, value) => {
    setFormData(prev => ({
      ...prev,
      [field]: value
    }));
  };

  return (
    <Form>
      <Input 
        label="姓名"
        value={formData.name}
        onChange={(val) => handleChange('name', val)}
      />
      <Input 
        label="邮箱"
        value={formData.email}
        onChange={(val) => handleChange('email', val)}
      />
      <Button type="submit">提交</Button>
    </Form>
  );
}
```

## 开发和贡献

### 构建项目

```bash
# 安装依赖
npm install

# 开发模式运行
npm run start dev

# 构建生产版本
npm run build
```

### 项目结构

-   `src/` - 组件源码目录
-   `examples/` - 示例代码目录
-   `docs/` - 文档目录

## 许可证

MIT 许可证，详情请查看 [LICENSE](https://npmcn.com/package/%40clake/react-bootstrap4/LICENSE) 文件。

## 常见问题

### @clake/react-bootstrap4 是什么？

反应靴子v4

### 如何安装 @clake/react-bootstrap4？

在项目目录运行 npm install @clake/react-bootstrap4，或使用 pnpm add / yarn add / bun add。

### @clake/react-bootstrap4 支持 TypeScript 吗？

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

### @clake/react-bootstrap4 支持 ESM 还是 CommonJS？

以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。

### @clake/react-bootstrap4 可以商用吗？

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

### @clake/react-bootstrap4 的下载量有多少？

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

### @clake/react-bootstrap4 还在维护吗？

最新版本 2\.6\.18 发布于 2026/11/06（3 天前）；至今共发布 365 个版本，其中过去 12 个月发布了 25 个；首次发布于 2018/04/27。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。