React BootStrap用戶體驗(yàn)框架快速上手

更新時(shí)間：2018年03月06日 10:34:15 作者：學(xué)習(xí)筆記666

這篇文章主要介紹了React BootStrap用戶體驗(yàn)框架快速上手的相關(guān)知識(shí)，非常不錯(cuò)，具有參考借鑒價(jià)值,需要的朋友可以參考下

官方文檔http://react-bootstrap.github.io/getting-started.html

安裝

在終端cd到你的項(xiàng)目目錄下執(zhí)行：$ npm install react-bootstrap

然后需要我們手動(dòng)引用css

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" >
<!-- Optional theme -->
<link rel="stylesheet" >

但是我們?cè)趯W(xué)習(xí)的時(shí)候使用外部的URL，太慢了。因此我們索引把bootstrap安裝到本地。

$ npm install bootstrap

然后你會(huì)發(fā)現(xiàn)在你的node_modules目錄下多了bootstrap。

這樣頁(yè)面上就可以引用本地的css了

<link rel="stylesheet" type="text/css" href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="external nofollow" rel="external nofollow" >

好，我們動(dòng)手來(lái)使用一下React-BootStrap框架吧

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

我們這里演示使用它的導(dǎo)航條組件

在index.js里:

const React = require("react");
const ReactDOM = require("react-dom");
import {Navbar} from "react-bootstrap";
const navbarInstance = (
  <Navbar>
    <Navbar.Header>
      <Navbar.Brand>
        <a href="#" rel="external nofollow" >react-bootstrap</a>
      </Navbar.Brand>
    </Navbar.Header>
  </Navbar>
);
// 然后我們渲染到body里
ReactDOM.render(navbarInstance,document.body);

html頁(yè)面上:

<!DOCTYPE html>
<html>
<head>
  <title>es2105的寫法</title>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="external nofollow" rel="external nofollow" >
</head>
<body>
<div id="abc"></div>
</body>
  <script src="webpack-dev-server.js"></script>
  <script src="index-webpack.js"></script>
</html>

效果如下：

這里寫圖片描述

主要看瀏覽器地址，這是我們前面配置的”熱啟動(dòng)”。

執(zhí)行命令 $ npm start 就開啟了服務(wù)

總結(jié)

以上所述是小編給大家介紹的React BootStrap用戶體驗(yàn)框架快速上手，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

相關(guān)文章

React 路由懶加載的幾種實(shí)現(xiàn)方案
這篇文章主要介紹了React 路由懶加載的幾種實(shí)現(xiàn)方案，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-10-10
在React中編寫class樣式的方法總結(jié)
在TypeScript (TSX) 中編寫 CSS 樣式類有幾種方法,包括使用純 CSS、CSS Modules、Styled Components 等,本文給大家介紹了幾種常見方法的示例,通過(guò)代碼示例講解的非常詳細(xì),需要的朋友可以參考下
2024-07-07
React淺析Fragments使用方法
這篇文章主要介紹了React Fragments使用方法，關(guān)于react Fragments,React中一個(gè)常見模式是為一個(gè)組件返回多個(gè)元素。Fragments 可以讓你聚合一個(gè)子元素列表，并且不在DOM中增加額外節(jié)點(diǎn)
2022-12-12
react如何同步獲取useState的最新狀態(tài)值
這篇文章主要介紹了react如何同步獲取useState的最新狀態(tài)值問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-01-01
淺談React之狀態(tài)(State)
這篇文章主要介紹了淺談React之狀態(tài)(State)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-09-09
解決React報(bào)錯(cuò)JSX?element?type?does?not?have?any?construct
這篇文章主要為大家介紹了解決React報(bào)錯(cuò)JSX?element?type?does?not?have?any?construct?or?call?signatures，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-12-12
react之umi配置國(guó)際化語(yǔ)言locale的踩坑記錄
這篇文章主要介紹了react之umi配置國(guó)際化語(yǔ)言locale的踩坑記錄，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-02-02
React Native:react-native-code-push報(bào)錯(cuò)的解決
這篇文章主要介紹了React Native:react-native-code-push報(bào)錯(cuò)的解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-10-10
React中事件綁定this指向三種方法的實(shí)現(xiàn)
這篇文章主要介紹了React中事件綁定this指向三種方法的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2021-05-05
一文帶你掌握React類式組件中setState的應(yīng)用
這篇文章主要為大家詳細(xì)介紹了介紹了React類式組件中setState的三種寫法以及簡(jiǎn)單討論下setState?到底是同步的還是異步的,感興趣的可以了解下
2024-02-02