简介
@jemmyphan/reactstrap 是一个基于 Bootstrap 4 的 React 组件库，可以在 React 项目中轻松使用 Bootstrap 的界面元素和样式。
本教程将详细介绍如何使用 @jemmyphan/reactstrap。
安装
使用 npm 安装：
npm install --save @jemmyphan/reactstrap
引入组件
可以通过以下方式引入 @jemmyphan/reactstrap 组件：
import { Button, Form, FormGroup, Label, Input } from '@jemmyphan/reactstrap';基本用法
Button 按钮
可以使用 <Button> 组件创建一个按钮：
<Button color="primary">Primary</Button> <Button color="secondary">Secondary</Button> <Button color="success">Success</Button> <Button color="danger">Danger</Button> <Button color="warning">Warning</Button> <Button color="info">Info</Button> <Button color="light">Light</Button> <Button color="dark">Dark</Button>
Form 表单
可以使用 <Form> 和 <FormGroup> 组件创建一个表单：
-- -------------------- ---- -------
------
-----------
------ --------------------------------
------ ------------ ------------ ----------------- ------------------ ------ --
------------
-----------
------ --------------------------------------
------ --------------- --------------- -------------------- ---------------------- --
------------
-----------------------
-------高级用法
自定义样式
可以通过 className 属性自定义样式：
<Button color="primary" className="my-btn">Primary</Button>
反馈
可以通过 disabled 属性禁止按钮点击：
<Button color="primary" disabled>Primary</Button>
Dropdown 下拉菜单
可以使用 <Dropdown> 和 <DropdownToggle> 组件创建一个下拉菜单：
-- -------------------- ---- -------
--------- -------------------------------- -----------------------------
--------------- ------
--------
-----------------
--------------
------------- ----------------------------
-------------------- ----------------
-------------------- ----------------
------------- ------- --
----------------------------------
---------------
-----------总结
@jemmyphan/reactstrap 是一个方便易用的 React 组件库，有许多常用的界面元素和样式，可以大大地加快前端开发速度。本教程介绍了 @jemmyphan/reactstrap 的基本使用方法和高级用法，希望对读者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005596b81e8991b448d6f0f