亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

React BootStrap用戶體驗框架快速上手

 更新時間：2018年03月06日 10:34:15   作者：學(xué)習(xí)筆記666  
這篇文章主要介紹了React BootStrap用戶體驗框架快速上手的相關(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用戶體驗框架快速上手，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

相關(guān)文章

  • 詳解React Native與IOS端之間的交互

    詳解React Native與IOS端之間的交互

    React Native (簡稱RN)是Facebook于2015年4月開源的跨平臺移動應(yīng)用開發(fā)框架，是Facebook早先開源的JS框架 React 在原生移動應(yīng)用平臺的衍生產(chǎn)物，支持iOS和安卓兩大平臺。本文將介紹React Native與IOS端之間的交互。
    2021-06-06
  • ReactNative點擊事件.bind(this)操作分析

    ReactNative點擊事件.bind(this)操作分析

    這篇文章主要為大家介紹了ReactNative點擊事件.bind(this)操作分析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-11-11
  • 詳解React路由傳參方法匯總記錄

    詳解React路由傳參方法匯總記錄

    這篇文章主要介紹了詳解React路由傳參方法匯總記錄，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-11-11
  • react源碼層深入刨析babel解析jsx實現(xiàn)

    react源碼層深入刨析babel解析jsx實現(xiàn)

    同作為MVVM框架，React相比于Vue來講，上手更需要JavaScript功底深厚一些，本系列將閱讀React相關(guān)源碼，從jsx -> VDom -> RDOM等一些列的過程，將會在本系列中一一講解
    2022-10-10
  • React Native功能豐富的Toast通知庫

    React Native功能豐富的Toast通知庫

    這篇文章主要為大家介紹了React Native功能豐富的Toast通知庫使用示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
    2022-10-10
  • React Native使用fetch實現(xiàn)圖片上傳的示例代碼

    React Native使用fetch實現(xiàn)圖片上傳的示例代碼

    本篇文章主要介紹了React Native使用fetch實現(xiàn)圖片上傳的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2018-03-03
  • React中styled-components的使用

    React中styled-components的使用

    styled-components 樣式化組件，主要作用是它可以編寫實際的CSS代碼來設(shè)計組件樣式，本文主要介紹了React中styled-components的使用，具有一定的參考價值，感興趣的可以了解一下
    2022-04-04
  • React如何配置src根目錄@

    React如何配置src根目錄@

    這篇文章主要介紹了React如何配置src根目錄@,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
    2024-01-01
  • React 全自動數(shù)據(jù)表格組件——BodeGrid的實現(xiàn)思路

    React 全自動數(shù)據(jù)表格組件——BodeGrid的實現(xiàn)思路

    表格是在后臺管理系統(tǒng)中用的最頻繁的組件之一，相關(guān)的功能有數(shù)據(jù)的新增和編輯、查詢、排序、分頁、自定義顯示以及一些操作按鈕。這篇文章主要介紹了React 全自動數(shù)據(jù)表格組件——BodeGrid ,需要的朋友可以參考下
    2019-06-06
  • webpack+react+antd腳手架優(yōu)化的方法

    webpack+react+antd腳手架優(yōu)化的方法

    本篇文章主要介紹了webpack+react+antd腳手架優(yōu)化的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2018-04-04

最新評論