스트랩 잇 업

CSS는 농담이 아닙니다. 저는 최근에 코딩 부트캠프에서 15주를 보냈고 이제야 비로소 스타일링의 세계에 본격적으로 뛰어들기 시작했습니다. 웹 페이지나 앱을 만드는 데 가장 쉬운 부분이라고 생각하실 텐데요?(저도 그랬다는 것을 알고 있습니다.) 그냥 색칠하고 옮기는 일인 줄 알았는데, 그렇게 어렵진 않죠? ? 그러나 CSS 버그는 JS의 버그만큼 까다롭고 포착하기 어려울 수 있습니다. 부트스트랩을 입력합니다. Bootstrap은 프로젝트에 스타일을 쉽게 추가할 수 있는 HTML, CSS 및 JavaScript 라이브러리입니다. 저는 react-bootstrap에 대한 경험이 가장 많기 때문에 여기에서 빠르게 다룰 것입니다.

시작하기

먼저 반응 앱이 실행 중인지 확인하십시오. 어떻게 하는지 잘 모르겠다면 React에 훌륭한 문서가 있고 튜토리얼도 매우 유용합니다. 그 모든 것을 찾을 수 있습니다here..
좋습니다. 이제 react 앱을 시작했으므로 react-bootstrap을 사용할 수 있습니다. 먼저 패키지를 설치해야 합니다.

npm install react-bootstrap bootstrap

터미널에 위의 명령을 입력하면 부트스트랩 패키지와 react-bootstrap 패키지가 모두 설치됩니다.

가져오기

해당 패키지를 package.json 파일에 설치하면 일부 부트스트랩을 사용할 준비가 된 것입니다. 일부 스타일을 추가하려는 구성 요소에서 정확한 부트스트랩 구성 요소를 가져와야 합니다. 내 앱에 내 취향에 비해 너무 지루해 보이는 양식이 있다고 가정해 보겠습니다. react-bootstrap 양식 구성 요소를 가져와 내 양식에 스타일을 부여할 수 있습니다. 미리 생각해 보면 양식에도 제출 버튼이 있기를 원할 것이므로 양식 구성 요소와 함께 버튼 구성 요소를 가져오겠습니다.

import Form from 'react-bootstrap/Form'
import Button from 'react-bootstrap/Button'

Note: You can also import any react-bootstrap components along with the entire react-bootstrap library by using the curly brace syntax shown below. The above import method is preferred however unless you need the whole bootstrap library for the component you are styling.

import { Form, Button } from 'react-bootstrap'

CSS 파일

이제 원하는 위치에 구성 요소를 가져왔으므로 프로젝트의 최상위 수준(App.js 또는 index.js)에서 부트스트랩 css 파일을 가져오기만 하면 됩니다.

import 'bootstrap/dist/css/bootstrap.min.css'

마법

이제 모든 가져오기가 있으므로 react-bootstrap의 모든 마법에 액세스할 수 있습니다. 그것은 당신의 기본 HTML 양식을 만들 것입니다 ...



멋진 스타일의 react-bootstrap 형식으로!



훨씬 낫죠!

React 부트스트랩 문서

위의 양식과 같이 양식을 모두 예쁘게 만들고 싶다면 react-bootstrap docs page.을 방문하는 것이 좋습니다. 이 문서는 훌륭하게 작성되었으며 react-bootstrap 구성요소를 프로젝트. 이 블로그에서는 react-bootstrap 라이브러리의 Form 및 Button 구성 요소만 언급했으며 더 많은 구성 요소가 있습니다! 나 자신은 부트스트랩의 표면을 긁기 시작했고 모든 모험이 올 때까지 기다릴 수 없습니다.

결론

반응 부트스트랩이 정말 멋지기 때문에 여러분이 일부 react-bootstrap을 확인하도록 설득했으면 합니다. 코딩 부트캠프를 위한 마지막 프로젝트 내내 많은 도움이 되었으며, 시작하는 여러분 모두에게 도움이 될 것임을 알고 있습니다!