React-Bootstrap이란 무엇입니까?

React-Bootstrap은 ReactJS 기반의 Bootstrap을 캡슐화한 라이브러리로 "cnpm install React-bootstrap --save" 명령을 통해 설치할 수 있는 재사용 가능한 프런트엔드 구성 요소 라이브러리입니다.

React-Bootstrap이란

React-Bootstrap은 ReactJS를 기반으로 Bootstrap을 캡슐화한 라이브러리입니다.

react-bootstrap의 스타일 구성 요소는 bootstrap에 따라 다릅니다.

공식 웹사이트: https://react-bootstrap.github.io

React-Bootstrap 설치 방법

다음 명령을 사용하여 설치

cnpm  install react-bootstrap  --save

//或者
$ bower install react react-bootstrap

사용법:

콘텐츠 구성 요소를 작성하려면 다음 명령을 사용해야 합니다. React-bootstrap 구성 요소를 만들려면 React-bootstrap에서 필요한 구성 요소를 가져와야 합니다.

예: 구성 요소.js에서 React-bootstrap의 Button 구성 요소를 사용해야 합니다. :

import React  from‘react’;
import  {Button} from ‘react-bootstrap’;
export  default class  MyComponent  React.Component{ 
constructor(props){
super(props);
}
render(){
return(
<div>
       <Button bsStyle="default"></Button>
</div>           
);
}
};

index.ejs 부서의 템플릿 헤더에 bootstrap.css를 입력하세요. bootstrap.css 소스 코드를 dist 폴더에 넣으세요.

스타일 시트

React-Bootstrap은 특정 Bootstrap 버전에 의존하지 않기 때문에 배포 패키지에는 CSS가 포함되어 있지 않습니다. 이러한 구성 요소를 사용할 때는 일부 스타일 시트가 필요합니다. 부트스트랩 스타일 파일을 선택하고 로드하는 방법은 사용자에게 달려 있습니다. 가장 쉬운 방법은 CDN에서 최신 스타일 시트 파일을 로드하는 것입니다.

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap-theme.min.css">

더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 학습 웹사이트를 방문하세요! !

위 내용은 React-Bootstrap이란 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!