安装包:
yarn add react-bootstrap bootstrap
引入样式:
import 'bootstrap/dist/css/bootstrap.min.css'
按钮:
js:
import React from 'react'
import { Button, Row, Col } from 'react-bootstrap'
const App = () => (
<>
<Row className="mx-0">
<Button as={Col} variant="primary">
Button #1
</Button>
<Button as={Col} variant="secondary" className="mx-2">
Button #2
</Button>
<Button as={Col} variant="success">
Button #3
</Button>
</Row>
</>
)
export default App
![](https://img.laitimes.com/img/__Qf2AjLwojIjJCLyojI0JCLiQDOxEzX3xCZlhXam9VbsUmepNXZy9CXwJWZ3xCdh1mcvZ2Lc1zaHRGcWdUYuVzVa9GczoVdG1mWfVGc5RHLwIzX39GZhh2csATMflHLwEzX4xSZz91ZsAzMfRHLGZkRGZkRfJ3bs92YskmNhVTYykVNQJVMRhXVEF1X0hXZ0xiNx8VZ6l2cssmch1mclRXY39CXldWYtlWPzNXZj9mcw1ycz9WL49zZuBnLyQTO0EmZwQzNzI2Y1QmYyYzXzADMyYTMwMzLcZDMyIDMy8CXn9Gbi9CXzV2Zh1WavwVbvNmLvR3YxUjLyM3Lc9CX6MHc0RHaiojIsJye.png)
alert:
import React, { useState } from 'react'
import { Alert, Button } from 'react-bootstrap'
function AlertDismissible() {
const [show, setShow] = useState(true)
return (
<div className='m-test-wrap'>
<Alert show={show} variant="success">
<Alert.Heading>How's it going?!</Alert.Heading>
<p>
Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget
lacinia odio sem nec elit. Cras mattis consectetur purus sit amet
fermentum.
</p>
<hr />
<div className="d-flex justify-content-end">
<Button onClick={() => setShow(false)} variant="outline-success">
Close me y'all!
</Button>
</div>
</Alert>
{!show && (
<Button onClick={() => setShow(true)} size="sm">
Show Alert
</Button>
)}{' '}
</div>
)
}
export default AlertDismissible