[react 기록용, 쇼핑몰]2-2.레이아웃(navbar, jumbotron, 3등분)

navbar, jumbotron, 3등분

/*eslint-disable-next-line*/
import React, {useState} from 'react';
import { Button,Navbar,Nav,NavDropdown,Form,FormControl, Jumbotron,Container,Row,Col,img } from 'react-bootstrap';
import './App.css';

function App() {


  return (
    <div className="App">

      <Navbar bg="light" expand="lg" className="navbar">
        <Navbar.Brand href="#home">모자팔이</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>

      <Jumbotron className="jumbotron">
        <h1>20% 시즌 오프</h1>
        <p>
          This is a simple hero unit, a simple jumbotron-style component for calling
          extra attention to featured content or information.
        </p>
        <p>
          <Button variant="primary">Learn more</Button>
        </p>
      </Jumbotron>
      
      <Container className="container">
        <Row className="col">
          <Col xs={12} md={4} className="col-md-4">
            <img src="https://codingapple1.github.io/shop/shoes1.jpg"></img>
            <h4>상품명</h4>
            <p>상품설명 & 가격</p>
          </Col>
          <Col xs={12} md={4} className="col-md-4">
            <img src="https://codingapple1.github.io/shop/shoes2.jpg"></img>
            <h4>상품명</h4>
            <p>상품설명 & 가격</p>
          </Col>
          <Col xs={12} md={4} className="col-md-4">
            <img src="https://codingapple1.github.io/shop/shoes3.jpg"></img>
            <h4>상품명</h4>
            <p>상품설명 & 가격</p>
          </Col>
        </Row>
      </Container> 

    </div>
  );
}

export default App;