首頁 > web前端 > js教程 > 主體

React BootStrap框架如何使用

PHPz
發布: 2018-10-13 16:38:02
原創
4192 人瀏覽過

這次帶給大家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>


  es2105的写法
  
  <link>


  <script></script>   <script></script>
登入後複製

效果如下:

React BootStrap框架如何使用 

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

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

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

推薦閱讀:

react native使用fetch上傳圖片

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

使用import 和require打包JS

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

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

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!