[shop-project] Bootstrap 설치 및 활용

🌈 Bootstrap

• HTML, CSS, JavaScript 라이브러리

🍎 React Bootstrap 설치 방법

1. googling ➡ React Bootstrap 사이트 접속 후 installation 매뉴얼대로 설치

   1-1. npm install react-bootstrap bootstrap 터미널에 입력

   1-2. CSS 지정 코드를 폴더 내 index.html 상단에 붙여넣기 (CDN 방식으로 연결하는 것)
   <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"/>

2. 사이트에서 복붙하기

3. (React Bootstrap Component 사용 시) 사용하려는 폴더 상단에 import해주기

   3-1. import {컴포넌트 태그명, ...} from 'react-bootstrap';

❗ 일반 Bootstrap에서 기능을 복사해 오려면 Bootstrap website에서 Documentation 탭에서 특정 기능 검색해서 가져오기.
❗ React Component 기능을 복사해 오려면 React Bootstrap website에서 Component 탭에서 특정 기능 검색해서 가져오기.
그리고 사용할 때는 꼭 import 해주기!!!!!!

🐣 Navbar 만들기

React Bootstrap Component에서 Nav로 검색해서 코드 복붙하기

import React from 'react';
import { Navbar, Nav, NavDropdown, Button } from 'react-bootstrap';
        // 아래 사용된 태그명들을 모두 중괄호 안에 넣어줘야 한다

function App(){

  return (
    <Navbar bg="light" expand="lg" >
        <Navbar.Brand href="#home" className="brand">Shoe Shop 🩰</Navbar.Brand>
        <Navbar.Toggle aria-controls="basic-navbar-nav" />
        <Navbar.Collapse id="basic-navbar-nav">
          <Nav className="ml-auto">
            <Nav.Link as={Link} to="/">Home</Nav.Link>
            <Nav.Link as={Link} to="/detail/0">Detail</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>
  )
}

🐣 대문 만들기

React Bootstrap Component에서 Jumbotron으로 검색해서 코드 복붙하기

import React from 'react';
import { Navbar, Nav, NavDropdown, Button, Jumbotron } from 'react-bootstrap';
        // Jumbotron 태그명 추가

function App(){

  return (
  // Navbar 생략

    <Jumbotron className="background">
        <h1>20% Season OFF</h1>
        <p>
          This site offer a biggest sale product in the Korea.
          We hope you to enjoy here
        </p>
        <p>
        <Button variant="primary">Learn more</Button>
        </p>
    </Jumbotron>
  )
}

💡 사이트를 3등분 하는 bootstrap 문법

<div className="container">
  <div className="row">  // 세로로 12등분 하는 문법
    <div className="col-4"></div>  // (세로로 12등분한 상태에서) 4개의 row만 차지하겠다
    <div className="col-4"></div>  // 4row
    <div className="col-4"></div>  // 4row ( 총 12row(4+4+4) )
  </div>
</div>
// 세로(row)를 총 12등분 하고, 각 4row씩 3등분 한 결과   



// 모바일(780px이하)에서 세로정렬로 바꾸는 문법 ( -md - 추가)   

<div className="container">
  <div className="row">  
    <div className="col-md-4"></div>  
    <div className="col-md-4"></div>  
    <div className="col-md-4"></div>  
  </div>
</div>
// 세로(row)를 총 12등분 하고, 각 4row씩 3등분 한 결과