安装包:
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
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