react如何使用bootstrap

安装 Bootstrap

通过 npm 或 yarn 安装 Bootstrap 包：

npm install bootstrap
# 或
yarn add bootstrap

引入 Bootstrap CSS

在项目的入口文件（如 src/index.js 或 src/App.js）中引入 Bootstrap 的 CSS 文件：

import 'bootstrap/dist/css/bootstrap.min.css';

使用 Bootstrap 组件

直接使用 Bootstrap 提供的类名或组件，例如按钮、导航栏等：

import React from 'react';

function App() {
  return (
    <button className="btn btn-primary">Bootstrap 按钮</button>
  );
}
export default App;

使用 React-Bootstrap（可选）

如果需要更符合 React 风格的组件，可以安装 react-bootstrap：

npm install react-bootstrap
# 或
yarn add react-bootstrap

使用示例：

import React from 'react';
import { Button } from 'react-bootstrap';

function App() {
  return (
    <Button variant="primary">React-Bootstrap 按钮</Button>
  );
}
export default App;

自定义样式

覆盖 Bootstrap 变量或添加自定义样式，在项目的 CSS 文件中修改：

/* src/custom.scss */
$primary: #your-color;
@import 'bootstrap/scss/bootstrap';

确保项目支持 Sass（需安装 sass）：

npm install sass