Create React App 添加 Bootstrap

在 Create React App 中使用 Bootstrap 可以帮助我们快速构建出漂亮的网页界面。Bootstrap 是一个流行的前端框架，提供了许多现成的样式和组件，可以大大加快我们开发的速度。

步骤

要在 Create React App 中添加 Bootstrap，我们可以通过以下步骤来实现：

1. 在项目目录下安装 Bootstrap：

   npm install bootstrap

2. 在项目的入口文件（通常是 src/index.js）中引入 Bootstrap 样式：

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

3. 现在你可以在项目中使用 Bootstrap 提供的样式和组件了。

示例代码

下面是一个简单的示例代码，演示了如何在 Create React App 中添加 Bootstrap 并使用其中的一些组件：

// www.javascriptcn.com code example
import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import { Button, Navbar, Nav } from 'react-bootstrap';

function App() {
  return (
    <div>
      <Navbar bg="light" expand="lg">
        <Navbar.Brand href="#home">Navbar</Navbar.Brand>
        <Navbar.Toggle aria-controls="basic-navbar-nav" />
        <Navbar.Collapse id="basic-navbar-nav">
          <Nav className="mr-auto">
            <Nav.Link href="#home">Home</Nav.Link>
            <Nav.Link href="#link">Link</Nav.Link>
          </Nav>
        </Navbar.Collapse>
      </Navbar>
      <Button variant="primary">Primary Button</Button>
    </div>
  );
}

export default App;

通过以上步骤，你可以轻松地在 Create React App 中集成 Bootstrap，并使用其中的样式和组件来构建出漂亮的网页界面。