脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → React → react bootstrap用户体验框架

React BootStrap用户体验框架快速上手

 更新时间：2018年03月06日 10:34:15   作者：学习笔记666  
这篇文章主要介绍了React BootStrap用户体验框架快速上手的相关知识，非常不错，具有参考借鉴价值,需要的朋友可以参考下

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

安装

在终端cd到你的项目目录下执行：$ npm install react-bootstrap

然后需要我们手动引用css

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap-theme.min.css">

但是我们在学习的时候使用外部的URL，太慢了。因此我们索引把bootstrap安装到本地。

$ npm install bootstrap

然后你会发现在你的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

我们这里演示使用它的导航条组件

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

效果如下：

这里写图片描述 

主要看浏览器地址，这是我们前面配置的”热启动”。

执行命令 $ npm start 就开启了服务

总结

以上所述是小编给大家介绍的React BootStrap用户体验框架快速上手，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

您可能感兴趣的文章:

相关文章

  • react-native 配置@符号绝对路径配置和绝对路径没有提示的问题

    react-native 配置@符号绝对路径配置和绝对路径没有提示的问题

    本文主要介绍了react-native 配置@符号绝对路径配置和绝对路径没有提示的问题,文中通过图文示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2024-01-01
  • React优雅的封装SvgIcon组件示例

    React优雅的封装SvgIcon组件示例

    这篇文章主要为大家介绍了React优雅的封装SvgIcon组件示例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-02-02
  • ReactNative 状态管理redux使用详解

    ReactNative 状态管理redux使用详解

    这篇文章主要介绍了ReactNative 状态管理redux使用详解
    2023-03-03
  • React条件渲染实例讲解使用

    React条件渲染实例讲解使用

    在React中，你可以创建不同的组件来封装各种你需要的行为。然后还可以根据应用的状态变化只渲染其中的一部分。React 中的条件渲染和JavaScript中的一致，使用JavaScript操作符if或条件运算符来创建表示当前状态的元素，然后让React根据它们来更新UI
    2022-11-11
  • 深入解析React Hooks 闭包陷阱

    深入解析React Hooks 闭包陷阱

    这篇文章主要为大家介绍了React Hooks闭包陷阱的深入探究，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-05-05
  • 编写简洁React组件的小技巧

    编写简洁React组件的小技巧

    这篇文章主要介绍了编写简洁React组件的小技巧，帮助大家更好的理解和学习使用React，感兴趣的朋友可以了解下
    2021-04-04
  • react实现Radio组件的示例代码

    react实现Radio组件的示例代码

    这篇文章主要介绍了react实现Radio组件的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2021-04-04
  • React如何实现全屏监听Esc键

    React如何实现全屏监听Esc键

    这篇文章主要介绍了React如何实现全屏监听Esc键，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-08-08
  • react框架next.js学习之API 路由篇详解

    react框架next.js学习之API 路由篇详解

    这篇文章主要为大家介绍了react框架next.js学习之API 路由篇详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-09-09
  • Redux使用方法和基本原理解读

    Redux使用方法和基本原理解读

    这篇文章主要介绍了Redux使用方法和基本原理,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10

最新评论