[React.js] Bootstrap 활용 - 설치/Component/Grid

Latest update : 2021.04.16 - 수정 완료

---

React-Bootstrap

Bootstrap은

getbootstrap.com/

react-bootstrap.netlify.app/

로 사이트가 나뉘어 있습니다. 

---

<React 설치 + react-bootstrap 설치>

✔️bootstrap 설치 방법은 여러 가지가 있습니다. (react-bootstrap.netlify.app/getting-started/introduction/)

• Node.js 설치 (nodejs.org/ko/download/)
• (CRA) 
  npx create-react-app 프로젝트명 (or) yarn create react-app 프로젝트명
  -> npm start
  -> npm install react-bootstrap bootstrap (or) yarn add react-bootstrap bootstrap

npx create-react-app 프로젝트명

(or)

yarn create react-app 프로젝트명

(and)

npm start

(and)

npm install react-bootstrap bootstrap

(or)

yarn add react-bootstrap bootstrap

---

<Bootstrap 문법>

1. 설치

공식 홈페이지 react-bootstrap.github.io/

React-Bootstrap

 

2. React-Bootstrap Component

공식 홈페이지 > Component 페이지 react-bootstrap.github.io/components/alerts/

tip) 원하는 검색어를 입력하세요.

 

대표적인 Component 예시

 

Navbars : react-bootstrap.netlify.app/components/navbar/#navbars

 

Jumbotron : react-bootstrap.netlify.app/components/jumbotron/#jumbotron

 

Buttons : react-bootstrap.netlify.app/components/buttons/

 

Cards : react-bootstrap.netlify.app/components/cards/

 

Dropdowns : react-bootstrap.netlify.app/components/dropdowns/

 

Forms : react-bootstrap.netlify.app/components/forms/

 

List groups : react-bootstrap.netlify.app/components/list-group/

 

Taps : react-bootstrap.netlify.app/components/tabs/

 

 

사용 예시

import { Navbar, Nav, NavDropdown } from 'react-bootstrap'

↓ 하단 Component들을 ↑ 위 import { } 내부에 추가해야 합니다.

<Navbar bg="light" expand="lg">
  <Navbar.Brand href="#home">React-Bootstrap</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>
    
    ...

tip1) css에서 이미지 수정이 필요한 경우

>>> react 구버전 : public 폴더에 넣고 (/image.png)으로 첨부하세요.

>>> react 17 버전 이상일 시 : src 폴더에 넣고 (./image.png)으로 첨부하세요.

tip2) transition 효과 : react-bootstrap.netlify.app/utilities/transitions/

tip3) Layout > Grid : react-bootstrap.netlify.app/layout/grid/

 

---

 

react-css tip) 모바일 우선 + 그리드 시스템 + 미디어 쿼리(반응형) : bootstrapk.com/css/

CSS · 부트스트랩

-> 디자인도 하고 싶으시면 참고해서 빠르게 제작하실 수 있습니다. ↓ 하단 표/코드 등은 본 링크에서 부분적으로 가져온 내용입니다.

 

 

	매우 작은 기기 모바일폰 (<768px)	작은 기기 태블릿 (≥768px)	중간 기기 데스크탑 (≥992px)	큰 기기 데스크탑 (≥1200px)
그리드 적용	항상	분기점보다 크면 적용
콘테이너 너비	없음 (auto)	750px	970px	1170px
클래스 접두사	.col-xs-	.col-sm-	.col-md-	.col-lg-
컬럼 수	12
컬럼 너비	Auto	~62px	~81px	~97px
사이 너비	30px (컬럼의 양쪽에 15px 씩)
중첩	예
오프셋	예
컬럼 순서정하기	예

 

그리드 예시 1

.col- md-1	.col- md-1	.col- md-1	.col- md-1	.col- md-1	.col- md-1	.col- md-1	.col-md-1	.col-md-1	.col-md-1	.col-md-1	.col-md-1
.col-md-8								.col-md-4
.col-md-4				.col-md-4				.col-md-4
.col-md-6						.col-md-6

<div class="row">
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
  <div class="col-md-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</div>
</div>

 

그리드 예시 2

. col-xs-* (or). col-md-* 를 추가하여 매우 작은 기기와 중간 기기 그리드 클래스들을 사용하세요.

<!-- 모바일에서 컬럼들이 하나는 꽉찬너비로, 다른 하나는 절반너비로 쌓이게 합니다 -->
<div class="row">
  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- 컬럼들은 모바일에서 50% 너비로 시작하고 데스크탑에서는 33.3% 너비가 됩니다 -->
<div class="row">
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- 컬럼들은 모바일과 데스크탑에서 항상 50% 너비가 됩니다 -->
<div class="row">
  <div class="col-xs-6">.col-xs-6</div>
  <div class="col-xs-6">.col-xs-6</div>
</div>

 

그리드 예시 3

태블릿. col-sm-* 클래스

<div class="row">
  <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <!-- Optional: clear the XS cols if their content doesn't match in height -->
  <div class="clearfix visible-xs-block"></div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>