React-Bootstrap とは何ですか?

React-Bootstrap は、ReactJS に基づいて Bootstrap をカプセル化するライブラリで、「cnpm install reverse-bootstrap --save」コマンドでインストールできる再利用可能なフロントエンド コンポーネント ライブラリです。

React-Bootstrap とは

React-Bootstrap は、ReactJS をベースに Bootstrap をカプセル化するライブラリです。再利用可能なフロントエンド コンポーネント ライブラリ。

react-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">

プログラミング関連の知識については、プログラミング学習 Web サイト をご覧ください。 ！

以上がReact-Bootstrap とは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。