[React] react-bootstrap

 

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

React-Bootstrap

 

여기 들어가면 react에서 쓰는 부트스트랩을 사용할 수 있다.

get started 클릭해서 설명 읽어본다.

 

방법 1. 먼저 터미널에 입력하고 설치

npm install react-bootstrap bootstrap@4.6.0

 

그리고 사용 시에는 import를 해준다.

import Button from 'react-bootstrap/Button'; // or less ideally import { Button } from 'react-bootstrap';

 

혹은 방법2. public 폴더 안의 index.html에 아래 링크 복붙

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous" />

 

그다음에 App.js안에 원하는 레이아웃 같은것을을 붙여 넣고 실행하면 나온다.

import logo from './logo.svg'; 
import './App.css'; 
import { Navbar, Nav, NavDropdown } from 'react-bootstrap'; 
import React from 'react'; 

function App() { 

    return ( 
        <div className="App"> 
            <Navbar bg="light" expand="lg"> 
            <Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand> 
            <Navbar.Toggle aria-controls="basic-navbar-nav" /> 
            <Navbar.Collapse id="basic-navbar-nav"> 
            <Nav className="mr-auto"> 
            <Nav.Link href="#home">Home</Nav.Link> 
            <Nav.Link href="#link">Link</Nav.Link> 
            <NavDropdown title="Dropdown" id="basic-nav-dropdown"> 
            <NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item> 
            <NavDropdown.Item href="#action/3.2">Another action</NavDropdown.Item> 
            <NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item> 
            <NavDropdown.Divider /> 
            <NavDropdown.Item href="#action/3.4">Separated link</NavDropdown.Item> 
            </NavDropdown> </Nav> </Navbar.Collapse> </Navbar> 
        </div> 
    ); 
} 

export default App;

 

 

결과