這次帶給大家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>
效果如下:
主要看瀏覽器位址,這是我們前面設定的」熱啟動」。
執行指令 $ npm start
就開啟了服務
#相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!
推薦閱讀:
以上是React BootStrap框架如何使用的詳細內容。更多資訊請關注PHP中文網其他相關文章!