12. 부트스트랩

 

 부트스트랩 이란?

: 웹사이트를 쉽게 만들 수 있게 도와주는 CSS, JS 프레임워크

 

부트스트랩 이용 방법

 

 

step 1. 리액트 부트스트랩을 검색하여 사이트에 접속한다.

 

React Bootstrap | React Bootstrap

 

 

step 2. cmd에 명령어를 입력하여 부트스트랩을 설치한다.

 

 

step 3. public/index.html 파일의 헤드태그 부분에 아래를 복사하여 붙여넣는다.

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

 

 

step 4. src/App.js 파일의 맨 위에 아래의 코드를 작성해준다.

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

 

---

 

적용해보자!

검색창에 button 을 검색하면 다양한 버튼들이 나온다.

 

이 중 가장 처음에 있는 파란색의 primary 버튼을 가져다가 써보자

그냥 밑에 있는 코드 복붙하면 된다.

 

import 'bootstrap/dist/css/bootstrap.min.css';
import Button from 'react-bootstrap/Button';

function App() {
  return (
    <div className="App">
      <Button variant="primary">Primary</Button>
    </div>
  );
}

export default App;

 

 

 

 import 가 여러개면 하나로 합칠 수 있다! 

(예시 : 상단바 만들기)

 

상단바를 만드려고 보았는데 코드가

import Container from 'react-bootstrap/Container';
import Nav from 'react-bootstrap/Nav';
import Navbar from 'react-bootstrap/Navbar';

function App() {
  return(
    <Navbar bg="dark" data-bs-theme="dark">
          <Container>
            <Navbar.Brand href="#home">Navbar</Navbar.Brand>
            <Nav className="me-auto">
              <Nav.Link href="#home">Home</Nav.Link>
              <Nav.Link href="#features">Features</Nav.Link>
              <Nav.Link href="#pricing">Pricing</Nav.Link>
            </Nav>
          </Container>
        </Navbar>
  );
}

 

import 가 3줄이다. 만약 앞선 button도 함께 하려면 무려 4줄이나 된다. 이렇게 계속 코드의 길이가 늘어나는 문제가 생기는데, 이것을 중괄호로 한번에 쓸 수 있다.

 

import { Button, Navbar, Nav, Container } from 'react-bootstrap';

 

 

그대로 써야하는것은 아니고  커스터마이징 가능 하다!