React Bootstrap 응용

-일단 추가 tip

src에 넣은 파일은 파일면변경 + 압축됨

public에 넣은 파일은 보존됨

public에 있는 파일은 절대경로/파일명.jpg라고 다써야함

src에넣어서 바로사용하면 편하긴함 `./background.jpg` 이런식으로

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

그리고 설치해서도 쓸 수 있지만 CDN불러와서 사용 할 수 도 있다.

 

public/index.html 에다가!

 

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

이와같이 상단에 불러와주고 사용해야하는 컴포넌트는 import해서 사용만 해주면된다.

 

별다른건 없다 요약하면

 

<div className="container">
<div>

 

기존에 부트스트랩을 사용했다면 클래스 이름만 이와같이 주면된다. 가져다 오는건

 

react bootstrap에서 그래도 사용하면되고 기본 col,row같은것을 사용해줄때만 조금 파악해서 사용해주면됨!

 

이와같이 예제만 만들었고 필요에따라서는 원래 부트스트랩을 CDN가져와서 당연히 사용할 수 있다.

 

경이롭다 뭔가 그냥 부트스트랩도 있지만 장고,리액트 부트스트랩 이렇게 따로 만들어주는 사람은 누구일지

 

흠...! 그저 고마울따름이다.

 

- 아래는 전체 소스코드

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

function App() {
  return (
    <div className="App">
      
  <Navbar bg="light" variant="light">
    <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>

  <Carousel>
  <Carousel.Item>
    <img
      className="d-block w-100"
      src="https://cdn.wallpapersafari.com/24/37/K4wNkq.jpg"
      alt="First slide"
    />
    <Carousel.Caption>
      <h3>First slide label</h3>
      <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
    </Carousel.Caption>
  </Carousel.Item>
  <Carousel.Item>
    <img
      className="d-block w-100"
      src="http://tdinteriorsinc.com/wp-content/uploads/2013/03/landscape-7-800x400.jpg"
      alt="Second slide"
    />

    <Carousel.Caption>
      <h3>Second slide label</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </Carousel.Caption>
  </Carousel.Item>
  <Carousel.Item>
    <img
      className="d-block w-100"
      src="https://wakeupwithzest.com/wp-content/uploads/2018/04/website-images-800-x-400-px-2.png"
      alt="Third slide"
    />

    <Carousel.Caption>
      <h3>Third slide label</h3>
      <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
    </Carousel.Caption>
  </Carousel.Item>
</Carousel>

{/* 이거는 리액트 부트스트랩은 이렇게 사용하면됨 원래쓰던 부트스트랩도 당연히 사용 가능 */}
<div className="container">
  <div className="row">
    <div className="col-md-4"> 
    <img src="https://codingapple1.github.io/shop/shoes1.jpg" width="100%"></img>
    <h4>상품명</h4>
    <p>상품설명&가격</p></div>
    <div className="col-md-4"> 
    <img src="https://codingapple1.github.io/shop/shoes2.jpg" width="100%"></img>
    <h4>상품명</h4>
    <p>상품설명&가격</p></div>
    <div className="col-md-4"> 
    <img src="https://codingapple1.github.io/shop/shoes3.jpg" width="100%"></img>
    <h4>상품명</h4>
    <p>상품설명&가격</p></div>

  </div>
</div>


  

    </div>
  );
}

export default App;