首頁  >  文章  >  web前端  >  Bootstrap有react版嗎

Bootstrap有react版嗎

青灯夜游
青灯夜游原創
2020-12-21 10:08:461919瀏覽

Bootstrap有react版的,名稱為React-Bootstrap,是一款基於React對Bootstrap進行封裝的函式庫,是可重複使用的前端元件庫。

Bootstrap有react版嗎

本教學操作環境: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 框架獲得更清爽的程式碼。

Bootstrap有react版嗎

react中使用React-bootstrap

1、使用下列指令進行安裝

cnpm  install react-bootstrap  --save
//或者
$ bower install react react-bootstrap

2、寫內容元件要用到react-bootstrap的元件的時候,要從react-bootstrap中匯入所需的元件;

例如:在元件component.js中,要用到React-bootstrap的Button元件,具體寫法如下:

  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版嗎的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn