Bootstrap の反応バージョンはありますか?

Bootstrap には、React-Bootstrap という名前の React バージョンがあります。これは、React に基づいて Bootstrap をカプセル化するライブラリであり、再利用可能なフロントエンド コンポーネント ライブラリです。

#このチュートリアルの動作環境: Windows7 システム、bootstrap4&&react16 バージョン この方法は、すべてのブランドのコンピューターに適しています。

(推奨チュートリアル:

React ビデオ チュートリアル 、bootstrap チュートリアル )

Bootstrap には、React-Bootstrap という名前の React バージョンがあります。

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

公式ウェブサイト: https://react-bootstrap.github.io

GitHub: https://github.com/react-bootstrap/react-bootstrap

react - bootstrapのstyleコンポーネントはbootstrapに依存します（下図は公式サイトの説明です）。 Twitter Bootstrap と同じルック アンド フィールですが、Facebook の React.js フレームワークによるよりクリーンなコードを備えています。

react での React-bootstrap の使用

1. 次のコマンドを使用して、

cnpm  install react-bootstrap  --save
//或者
$ bower install react react-bootstrap

2 をインストールします。書き込みコンテンツコンポーネントがreact-bootstrapのコンポーネントを使用する場合、react-bootstrapから必要なコンポーネントをインポートする必要があります;

例: コンポーネントcomponent.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>          
                                              );
                                             }
                                           };

3.index.ejsのテンプレートヘッダにbootstrap.cssを導入します。

4. bootstrap.css ソース コードを dist フォルダーに置きます。

プログラミング関連の知識について詳しくは、

プログラミング教育をご覧ください。 ！

以上がBootstrap の反応バージョンはありますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。