개발새발 로그

4. MERN기반 커뮤니티 - React-BootStrap사용법 본문

MERN

4. MERN기반 커뮤니티 - React-BootStrap사용법

이즈흐 2023. 6. 14. 00:06

1. 부트스트랩 사이트에 가서 사용법을 가져온다.

https://react-bootstrap.netlify.app/docs/getting-started/introduction

 

Introduction | React Bootstrap

Learn how to include React Bootstrap in your project.

react-bootstrap.netlify.app

2. 설치하기

npm install react-bootstrap bootstrap

첫 번째는 react-bootstrap/button에서 한가지의 Button을 가져오는 것이고,

두 번째는 react-bootstrap에서 여러가지가 export되는데 거기서Button을 선택해서 가져오는 것이다.

 

3. 클라이언트인 react에서 public폴더에 있는 최상위파일 index.html에 아래 코드를 <head>태그 마지막에 추가해준다.

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
  integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM"
  crossorigin="anonymous"
/>

4. 그러면 이제 부트스트랩을 사용가능하다.

5.필요한 부분을 검색해서 아래 코드들을 복사해서 넣으면 된다,

https://react-bootstrap.netlify.app/docs/components/navbar/

 

Navbars | React Bootstrap

A powerful, responsive navigation header, the navbar. Includes support for branding, navigation, and more.

react-bootstrap.netlify.app

import React from 'react'
import { Link } from 'react-router-dom'
//리액트 부트스트랩 사용
import Container from 'react-bootstrap/Container';
import Nav from 'react-bootstrap/Nav';
import Navbar from 'react-bootstrap/Navbar';

export const Heading = () => {
  return (
    <div>
      <Navbar bg="dark" expand="lg" variant="dark">
      <Container>
        <Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand>
        <Navbar.Toggle aria-controls="basic-navbar-nav" />
        <Navbar.Collapse id="basic-navbar-nav">
          <Nav className="me-auto">
            <Nav.Link>
              <Link to="/App" style={{color : "white", textDecoration:"none"}}>Home</Link>
            </Nav.Link>
            <Nav.Link>
              <Link to="/Upload" style={{color : "white", textDecoration:"none"}}>upload</Link>
            </Nav.Link>
            <Nav.Link>
              <Link to="/List" style={{color : "white", textDecoration:"none"}}>list</Link>
            </Nav.Link>
          </Nav>
        </Navbar.Collapse>
      </Container>
    </Navbar>

  </div>
  )
}

네비게이션바를 가져와서 위와같이 마음대로 바꿔 사용하면 된다.

 

 

 

 

 

추가설명

위 코드 처럼 bg와 variant를 dark로 주면 전체적으로 어둡게되고 폰트는 잘보이게 하얀색으로 된다.

 

728x90
반응형
LIST
저작자표시 비영리 변경금지

'MERN' 카테고리의 다른 글

CRUD - Read : 게시글 불러오기 (1)  (0) 2023.06.24
CRUD - Create : 게시글 생성하기  (0) 2023.06.24
3. MERN기반 커뮤니티 - Mongoose Model  (0) 2023.06.13
3. MERN기반 커뮤니티 - axios와 CORS정책  (0) 2023.06.13
2. MERN기반 커뮤니티 - MongoDB시작하기  (0) 2023.06.13
'MERN' Related Articles more