Bootstrap有react版吗


本文摘自PHP中文网,作者青灯夜游,侵删。

Bootstrap有react版的,名称为React-Bootstrap,是一款基于React对Bootstrap进行封装的库,是一个是可重用的前端组件库。

本教程操作环境:Windows7系统、bootstrap4&&react16版本,该方法适用于所有品牌电脑。

(推荐教程:React视频教程、bootstrap教程)

Bootstrap有react版的,名称为React-Bootstrap。

React-Bootstrap是一款基于ReactJS对Bootstrap进行封装的库,是一个是可重用的前端组件库。

官网:https://react-bootstrap.github.io

GitHub:https://github.com/react-bootstrap/react-bootstrap

react-bootstrap的样式组件依赖于bootstrap(如下图是官网的解释)。与 Twitter Bootstrap 一致外观与感受,但通过 Facebook 的 React.js 框架获得更清爽的代码。

1.png

react中使用React-bootstrap

1、使用以下命令进行安装

1

2

3

cnpm  install react-bootstrap  --save

//或者

$ bower install react react-bootstrap

2、写内容组件要用到react-bootstrap的组件的时候,要从react-bootstrap中导入所需的组件;

例如:在组件component.js中,要用到React-bootstrap的Button组件,具体写法如下:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

import React  from‘react’;

               import  {Button} from ‘react-bootstrap’;

               export  default class  MyComponent  React.Component{

                         constructor(props){

                                super(props);

                                                     }

                                 render(){

                                          return(

                                                 <div>

                                                        <Button bsStyle="default"></Button>

                                                </div>         

                                            );

                                           }

                                         };

3、在index.ejs的模板头部,引入bootstrap.css。

4、在dist文件夹下放入bootstrap.css源码。

更多编程相关知识,请访问:编程教学!!

以上就是Bootstrap有react版吗的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

springboot怎么用bootstrap

bootstrap有多少种常用class

react中qs是什么

bootstrap table如何删除行

vue和react本质的区别是什么

react子组件怎么向父组件传值?

bootstrap less是什么

bootstrap input不可编辑的实现方法

bootstrap3和4有什么区别

如何利用bootstrap分页

更多相关阅读请进入《bootstrap》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...