4. MERN기반 커뮤니티 - React-BootStrap사용법
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로 주면 전체적으로 어둡게되고 폰트는 잘보이게 하얀색으로 된다.