使用React Bootstrap搭建网页界面

秋枫962025-11-03 15:20

先安装node,如果有旧版本的node需要先卸载

bash 复制代码

sudo apt-get remove nodejs
sudo apt-get autoremove

安装node,官网为https://deb.nodesource.com/

按照提示安装最新版

快速搭建 Vite 项目的命令，xxx为项目名

bash 复制代码

npm create vite xxx

安装react-bootstrap

bash 复制代码

npm install react-bootstrap bootstra

要想使用bootstrap需要修改以下文件

删除app.css与index.css，将app.jsx中的import './App.css'删除
将main.jsx中的import App from './App.jsx'与import './App.css'删除，再添加 import "bootstrap/dist/css/bootstrap.css"
再创建components文件夹存放自己写的代码

可以参考react-bootstrap官网的示例

https://react-bootstrap.github.io/docs/getting-started/introduction

在components中创建mainpage.jsx文件

添加react-bootstrap官网中的一个小例子

bash 复制代码

import Alert from 'react-bootstrap/Alert';

function BasicExample() {
  return (
    <>
      {[
        'primary',
        'secondary',
        'success',
        'danger',
        'warning',
        'info',
        'light',
        'dark',
      ].map((variant) => (
        <Alert key={variant} variant={variant}>
          This is a {variant} alert---check it out!
        </Alert>
      ))}
    </>
  );
}

export default BasicExample;

修改App.jsx的内容

bash 复制代码

import { useState } from 'react'

import BasicExample from './components/mainPage'

function App() {
  const [count, setCount] = useState(0)

  return (
    <>

      <BasicExample />

    </>
  )
}

export default App

然后运行代码

bash 复制代码

npm run dev

点击local链接，跳转到浏览器，查看效果

如果设计好页面后可以直接构建出生产环境代码

bash 复制代码

npm run build