#15 React Bootstrap

https://react-bootstrap.netlify.app/

React Bootstrap | React Bootstrap

 

리액트 프로젝트 개발시 디자인 작업을 편리하게 해주는 프레임워크

 

설치

npm install react-bootstrap bootstrap

 

사용방법

1. App.js파일에 css import 

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

 

2. 디자인 요소가 필요한 js 파일에서 각각의 필요한 bootstrap 컴포넌트를 import 하여 사용

import React from 'react';
import Button from 'react-bootstrap/Button';
import styled from 'styled-components';

const ContentWrap= styled.div`
  padding: 30px;
`;


export default function Home() {

  return (
    <ContentWrap>
      <h1>HomePage- bootstrap test</h1>     
      <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>
    </ContentWrap>
  )
}

 

 

자세한 컴포넌트 사용법은 공식 홈페이지를 참조하여 디자인 작업에 활용

 

3. 네비게이션바 디자인 예시

- react-bootstrap 으로 디자인 및 링크 구현 

import Container from 'react-bootstrap/Container';
import Navbar from 'react-bootstrap/Navbar';
import NavDropdown from 'react-bootstrap/NavDropdown';
import Button from 'react-bootstrap/Button';
import Form from 'react-bootstrap/Form';
import { Nav } from "react-bootstrap";
import { Link } from "react-router-dom";

export default function Header() {  
  return (
    <Navbar bg="dark" data-bs-theme="dark">
      <Container fluid>
        <Navbar.Brand><Link className="nav-link" to="/home">Kimo Blog</Link></Navbar.Brand>
        <Navbar.Toggle aria-controls="navbarScroll" />
        <Navbar.Collapse id="navbarScroll">
          <Nav 
            className="me-auto my-2 my-lg-0"
            style={{ maxHeight: '100px' }}
            navbarScroll
            defaultActiveKey="first"             
          >
            <Nav.Item><Link className="nav-link" to="/home">Home</Link></Nav.Item>
            <Nav.Item><Link className="nav-link" to="/blog">BLOG</Link></Nav.Item> 
            <NavDropdown title="BLOG" id="blogDropdown">
              <NavDropdown.Item as={Link} to="/blog/list">글목록</NavDropdown.Item>
              <NavDropdown.Item as={Link} to="/blog/write">글작성</NavDropdown.Item>
            </NavDropdown>
            <Nav.Item><Link className="nav-link" to="/about" >ABOUT</Link></Nav.Item>   
            <Nav.Item><Link className="nav-link" to="/contact">CONTACT</Link></Nav.Item>  
            <Nav.Item><Link className="nav-link" to="/login">LOGIN</Link></Nav.Item> 
          </Nav >
          <Form className="d-flex">
            <Form.Control
              type="search"
              placeholder="Search"
              className="me-2"
              aria-label="Search"
            />
            <Button variant="outline-success">Search</Button>
          </Form>
        </Navbar.Collapse>
      </Container>
    </Navbar> 
  )
}