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用户体验框架快速上手，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

版权声明 1 本网站名称：偶像资源网
2 本站永久网址：https://www.ox520.com
3 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长 QQ593098775进行删除处理。
4 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
6 本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。

THE END

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

请登录后发表评论