React BootStrap框架如何使用

這次帶給大家React BootStrap框架如何使用，使用React BootStrap框架的注意事項有哪些，以下就是實戰案例，一起來看一下。

安裝

【相關影片推薦：Bootstrap教學】

在終端機cd到你的專案目錄下執行：$ npm install react-bootstrap

然後需要我們手動引用css

<!-- Latest compiled and minified CSS -->
<link>
<!-- Optional theme -->
<link>

但是我們在學習的時候使用外部的URL，太慢了。因此我們索引把bootstrap安裝到本地。

$ npm install bootstrap

然後你會發現在你的node_modules目錄下多了bootstrap。

這樣頁面上就可以引用本地的css了

<link>

好，我們動手來使用一下React-BootStrap框架吧

http://react-bootstrap.github .io/components.html

我們這裡示範使用它的導航條元件

在index.js裡:

const React = require("react");
const ReactDOM = require("react-dom");
import {Navbar} from "react-bootstrap";
const navbarInstance = (
  <navbar>
    <navbar.header>
      <navbar.brand>
        <a>react-bootstrap</a>
      </navbar.brand>
    </navbar.header>
  </navbar>
);
// 然后我们渲染到body里
ReactDOM.render(navbarInstance,document.body);

html頁面上:

nbsp;html>


  
  
  <link>




  <script></script>
  <script></script>

效果如下：

 

主要看瀏覽器位址，這是我們前面設定的」熱啟動」。

執行指令 $ npm start 就開啟了服務

#相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

react native使用fetch上傳圖片

#怎麼讓webpack打包後的檔案壓縮變小

使用import 和require打包JS

#react事件綁定this的幾種方式

以上是React BootStrap框架如何使用的詳細內容。更多資訊請關注PHP中文網其他相關文章！