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应用中使用Bootstrap的方法
  • 详解react使用react-bootstrap当轮子造车
赞 (0)

相关推荐

  • React应用中使用Bootstrap的方法

    React应用中使用Bootstrap的方法

    前言 本节我们将把bootstrap,font-awesome应用到app中,同时创建一个基本的主页.主要将用到以下包: bootstrap-loader及配合工作的一系列loader:bootstrap-sass(bootstrap3) css-loader node-sass sass-loader style-loader url-loader.具体使用见官方文档 postcss-loader autoprefixer:自动添加-webkit-box等前缀 react-bootstrap:

  • 详解react使用react-bootstrap当轮子造车

    详解react使用react-bootstrap当轮子造车

    上一篇我们谈了谈如何配置react的webpack环境 react入门之搭配环境(一) 可能很多人已经打开过官方文档学习了react的基础知识 不管有没有,在介绍react之前,我想先介绍一下react-bootstrap 先懂得使用别人造的轮子,就能更快成为老司机. 好的,源代码奉上: git clone https://github.com/lingjiawen/react_bootstrap_demo.git cd react_bootstrap_demo npm install npm

  • 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/bootstr

  • 微信小程序的mpvue框架快速上手指南

    一.什么是mpvue框架? mpvue 是一个使用 Vue.js 开发小程序的前端框架.框架基于 Vue.js 核心(所以建议熟练掌握vue再使用mpvue框架,否则还是建议去使用原生框架去写小程序),mpvue 修改了 Vue.js 的 runtime 和 compiler 实现,使其可以运行在小程序环境中,从而为小程序开发引入了整套 Vue.js 开发体验. 二.必要的开发基础 ① 熟练掌握vue.js(未曾使用过vue这个框架的话,建议vue的官方文档进行学习:https://cn.vue

  • JavaWeb工程中集成YMP框架快速上手（二）

    JavaWeb工程中集成YMP框架快速上手（二）

    本文将介绍如何在Java Web工程中集成YMP框架,操作过程基于IntelliJ IDEA做为开发环境,工程结构采用Maven构建: IntelliJ IDEA下载地址: https://www.jetbrains.com/idea/download/ Maven下载地址: http://maven.apache.org/ 创建项目 1. 打开IDEA开发环境并点击Create New Project按钮开始创建新项目向导,如下图-1所示: 2. 在New Project窗口中选中左侧Mave

  • JavaWeb工程中集成YMP框架快速上手

    JavaWeb工程中集成YMP框架快速上手

    了解YMP框架 YMP于2014年10月25日正式发布1.0版本,在此之前就已在实际项目中得到广泛使用,从最初仅限团队内部使用,到合作伙伴的开发团队,再到身边的朋友,和朋友的朋友们也开始将YMP投入到实际项目中去,所以在这里我要向一直以来帮助.支持我的这些同事.朋友们表示衷心的感谢!是大家的信赖和对它的认可,才使得YMP快速成长起来,在变化过程中它一直在不断的改进.优化直至最终对外发布. 没有完美的框架,只有适合的才是好的,为了让YMP更简单易用,从2015年1月26日正在开始了v2版本的开发,

  • React+Webpack快速上手指南(小结)

    前言 这篇文章不是有关React和Webpack的教程,只是一篇能够让你快速上手使用目前这两种热门技术的前端指南,并假设你对两者有一个基本的认识.如果你想先行了解下React,可以放肆的移步至 React官方教程,如果你已经使用了其他的模块加载与资源打包技术,不妨也来看看 Webpack提供的思路. webstorm+react+webpack 强烈推荐使用webstorm!.(当然你完全可以使用诸如atom,Sublime之类的编辑器,但之所以选择webstorm是因为它默认支持对react

  • 无废话快速上手React路由开发

    无废话快速上手React路由开发

    安装 输入以下命令进行安装: // npm npm install react-router-dom // yarn yarn add react-router-dom react-router相关标签 react-router常用的组件有以下八个: import { BrowserRouter, HashRouter, Route, Redirect, Switch, Link, NavLink, withRouter, } from 'react-router-dom' 简单路由跳转 实现一

  • 快速上手Java单元测试框架JUnit5

    快速上手Java单元测试框架JUnit5

    为什么学JUnit5 Java技术栈的单元测试框架有两个:JUnit和TestNG,有种说法是TestNG比JUnit更强大,学TestNG就够了,但是当我打开GitHub看到star的时候,犹豫了: JUnit TestNG 相差了足足有3K之多.带着这个困惑,我在网上查阅了一番资料,原来JUnit5相较于JUnit4有了重大升级,已经包含了TestNG的所有功能.为了坚定我学JUnit的想法,我咨询了身边做Java开发的朋友,开发写UT都是用的JUnit.这两个理由足以让我开始对JUnit5

  • 详解Java快速上手用户后台管理系统

    详解Java快速上手用户后台管理系统

    目录 主要功能 登录功能 管理员列表 用户列表 订单管理 主要功能 管理员登录功能.管理员列表操作.用户列表操作.订单管理 登录功能 设计思路:前端页面获取输入的数据,然后发送Ajax请求,在servlet中获取数据并调用service层中的方法进行处理,service层中调用dao层的实现方法,最终servlet返回一个结果集,判断登录是否成功. login.html主要功能代码: <script> $(function () { $("#btn_login").clic

  • 基于Bootstrap的Metronic框架实现页面链接收藏夹功能

    基于Bootstrap的Metronic框架实现页面链接收藏夹功能

    在一个系统里面,往往有很多菜单项目,每个菜单项对应一个页面,一般用户只需要用到一些常用的功能,如果每次都需要去各个层次的菜单里面去找对应的功能,那确实有点繁琐.特别是在菜单繁多,而客户又对系统整体不熟悉的情况下,如果有一个类似浏览器的收藏夹模块,把一些常用的菜单连接保存起来,每次从这个收藏夹主页去找对应的页面,那样确实是省事省力,非常方便.本篇随笔就是介绍在基于Metronic的Bootstrap开发框架里面实现这个收藏夹的思路. 1.系统的收藏夹界面处理效果 为了实现这个收藏夹功能,我们也需要

  • Taro集成Redux快速上手的方法示例

    前言的前言 最近被一款来自京东凹凸实验室的多终端开发框架Taro吸粉了,官方对 Taro 的简介是使用React语法,一键生成多终端应用(包括小程序 / H5 / 快应用 / RN 等),而目前 Github 的 Star 也达到了非常可观的数量:4k+.对此,笔者也尝了把鲜,体验了下如何使用Taro写微信小程序.感觉还是十分灵活易用(一气呵成,都没遇到bug!),并且 Taro 还集成了 Redux,解决了小程序没有数据流框架的痛点. 这里贴一个 Taro 的官方文档,有兴趣的同行们可以了解下

随机推荐