React에서 Bootstrap UI 사용하기

Bootstrap UI 설치하기

  프로젝트 생성 후, 프로젝트 폴더로 이동하여 아래 명령어로 bootstrap 설치
  npm install react-bootstrap bootstrap

  사용하려는 js 파일의 제일 상단에 입력하여 사용 준비
  import 'bootstrap/dist/css/bootstrap.min.css';

 

Bootstrap 사용 예시

  아래와 같이 입력하면, 손쉽게 예쁜 화면을 만들수 있습니다.

 

import logo from './logo.svg';

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

 

import { Container, Button, Row, Col, Card, Navbar } from 'react-bootstrap';

 

function App() {

  return (

    <div className="App d-grid gap-2">

 

      <Navbar bg="primary" variant="dark">

        <Container>

          <Navbar.Brand href="#home">ON3D Cloud Service</Navbar.Brand>

          <Navbar.Toggle />

          <Navbar.Collapse className="justify-content-end">

            <Navbar.Text>

              Signed in as: <a href="#login">leonhong</a>

            </Navbar.Text>

          </Navbar.Collapse>

        </Container>

      </Navbar>

 

      <Container>

        <Row>

          <Col><Button variant="outline-secondary"> Bone Mode </Button></Col>

          <Col><Button variant="outline-success"> Trans. Bone   </Button></Col>

          <Col><Button variant="outline-danger"> Soft Tissue </Button></Col>

        </Row>

      </Container>

 

      <Card>

        <Card.Header as="h5">Featured</Card.Header>

        <Card.Body>

          <Card.Title>Special title treatment</Card.Title>

          <Card.Text>

            With supporting text below as a natural lead-in to additional content.

          </Card.Text>

          <Button variant="primary">Download Report</Button>

        </Card.Body>

      </Card>

 

    </div>

  );

}

 

export default App;

 

결과 화면