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

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

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

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

安裝

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

然后需要我們手動引用css

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

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

$ npm install bootstrap

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

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

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

好，我們動手來使用一下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頁面上:

<!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>

效果如下：

這里寫圖片描述

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

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

總結(jié)

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

您可能感興趣的文章:

相關(guān)文章

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