简介

简介

react-bootstrap兼容各种版本的 Bootstrap, github 22.2k，目前最新版本是2.x， 对应的是Bootstrap为5.x, 文档

react-bootstrap的环境搭建很简单：

1，安装pkg

npm install react-bootstrap bootstrap

2，引入css

• 2.1 js引入

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

• 2.2 html中引入

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
  integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
  crossorigin="anonymous"
/>

3，使用组件 App.tsx

import 'bootstrap/dist/css/bootstrap.min.css';
import Button from 'react-bootstrap/Button';

function App() {
  return (
    <>
      <TypesExample />
    </>
  )
}

export default App

function TypesExample() {
  return (
    <>
      <Button variant="primary">Primary</Button>{' '}
      <Button variant="secondary">Secondary</Button>{' '}
      <Button variant="success">Success</Button>{' '}
      <Button variant="warning">Warning</Button>{' '}
      <Button variant="danger">Danger</Button>{' '}
      <Button variant="info">Info</Button>{' '}
      <Button variant="light">Light</Button>{' '}
      <Button variant="dark">Dark</Button>
      <Button variant="link">Link</Button>
    </>
  );
}

浏览器预览效果：