自作自己紹介ホームページ

Boostrap intro

react-bootstrap.github.io

npm install react-bootstrap bootstrap

で npm install

import 'bootstrap/dist/css/bootstrap.min.css';
import { Container, Row, Col, } from 'react-bootstrap';

でサイドカットのための Container たちを import

  return (
    <>
      <Container>
        <Row>
          <Col>lorem300</Col>
        </Row>
      </Container>
    </>
  );

で lorem 300 を試す

f:id:kei_s_lifehack:20200826011951p:plain

Container の力できちんとサイドカットされていることを確認

Header

react-bootstrap の Navbar を使用する

https://react-bootstrap.github.io/components/navbar/

先にヘッダーの形を作ってしまう

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

export default function Header() {
  return (
    <>
      <Navbar collapseOnSelect expand="lg" bg="dark" variant="dark">
        <Navbar.Brand href="/">kaede0902</Navbar.Brand>
        <Navbar.Toggle aria-controls="responsive-navbar-nav" />
        <Navbar.Collapse id="responsive-navbar-nav">
          <Nav className="mr-auto">
            <Nav.Link href="#about">About</Nav.Link>
            <Nav.Link href="#works">Works</Nav.Link>
          </Nav>
          <Nav>
            <Nav.Link href="#email">Email</Nav.Link>
            <Nav.Link href="#email">Blog</Nav.Link>
            <Nav.Link href="#email">Twitter</Nav.Link>
          </Nav>
        </Navbar.Collapse>
      </Navbar>
    </>
  )
}

これでスマートフォンも

f:id:kei_s_lifehack:20200826014025p:plain