react-bootstrap入门

安装包：

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