[react]第5週-react-strap
react-strapは?
ブートストラップ(bootstrap)は、オープンソースフロントエンドフレームワークです.Webサイトの作成を容易にするために、CSSやJavascriptでさまざまなレイアウト、ボタン、入力ウィンドウなどのデザインが提供されています.
反応器におけるガイドバーの使用経路はreact−strapとreactstrapの2種類あり,本研究ではreact−strapを用いた.
react-strap その利点は,ガイドバーを応答スタイルの素子に圧縮し,コードを簡単にすることである.
スタート
react-strapパッケージのインストール
npm install react-bootstrap bootstrap
cssスタイルシートの追加
最上位レベルのルートファイルsrc/index.jsまたはApp.jsファイルにコードを追加すると、ガイドバーのスタイルが適用されます.
import "bootstrap/dist/css/bootstrap.min.css";
複数の構成部品の使用
正式な書類には、ボタン、alert、badge、navbarなどの様々なコンポーネントの使用例が見られる.たとえば、Buttonを追加する場合は、下の手順に従います.
必要な構成部品の読み込み
ボタンを配置する構成部品ファイルの上部にコードを追加します.
import Button from "react-bootstrap/Button";
// 또는
import { Button } from "react-bootstrap";
構成部品の操作
Reference
この問題について([react]第5週-react-strap), 我々は、より多くの情報をここで見つけました https://velog.io/@smjan27/React-Study-5テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol