資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究在 React.js 專案中新增 Bootstrap
有多種方法可以在 React 專案中新增 Bootstrap。
- 使用 Bootstrap CDN
- 安裝 Bootstrap 依賴項
- 使用 React Bootstrap 包
使用 Bootstrap CDN
這是新增 Bootstrap 的最簡單方法。與其他 CDN 一樣，我們可以在 React 專案的 index.html 中新增 Bootstrap CDN。
下面是 React CDN 的一個 URL
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
如果我們需要 Bootstrap 的 JavaScript 元件，那麼我們應該在 index.html 中新增 jQuery 和 Popper.js。
這樣，完整的 index.html 將如下所示：
<!DOCTYPE html> <htmllang="en"> <head> <metacharset="utf-8"> <metaname="viewport"content="width=device-width, initial-scale=1, shrink-to-fit=no"> <linkrel="manifest"href="%PUBLIC_URL%/manifest.json"> <linkrel="shortcut icon"href="%PUBLIC_URL%/favicon.ico"> <linkrel="stylesheet"href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" crossorigin="anonymous"> <title>React App hello</title> </head> <body> <divid="root"></div> <scriptsrc="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"> </script> <scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"> </script> <scriptsrc="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"> </script> </body> </html>
新增 Bootstrap 依賴項
npm install bootstrap npm install jquery popper.js
現在，我們可以透過在 React 專案的 index.js 檔案中匯入這些依賴項。
import'bootstrap/dist/css/bootstrap.min.css';
import $ from'jquery';
importPopperfrom'popper.js';
import'bootstrap/dist/js/bootstrap.bundle.min';
importReactfrom'react';
importReactDOMfrom'react-dom';
import'./index.css';
importAppfrom'./App';
importregisterServiceWorkerfrom'./registerServiceWorker';
ReactDOM.render(<Dropdown/>,document.getElementById('root'));
registerServiceWorker();使用 React Bootstrap 包
有兩種方法可以包含 React Bootstrap 包
- react-bootstrap
- reactstrap
使用 npm 安裝
npm install –save react-bootstrap
此包目前僅支援 Bootstrap 3，並且正在努力支援最新的 Bootstrap。
Include it in App.jsx file import'bootstrap/dist/css/bootstrap.css'; import'bootstrap/dist/css/bootstrap-theme.css';
安裝完成後，我們就可以直接在任何元件檔案中使用 Bootstrap 元件了。
import{SplitButton,MenuItem}from'react-bootstrap';
import React, { Component} from 'react';
import { Button } from 'react-bootstrap';
class HelloWorld extends Component {
render() {
return
<div>
<Button bsStyle="primary">Hello World Primary</Button>
<Button bsStyle="success">Hello World Success</Button>
<Button bsStyle="danger">Hello World Danger</Button>
</div>
}
}
export default HelloWorld;使用 reactstrap
npm install –save reactstrap
reactstrap 支援 Bootstrap 4 版本，這意味著它比 react-bootstrap 更新。
由於 Bootstrap 是最流行的 CSS 框架，因此將其與 React 結合使用，我們可以非常快速地建立移動優先的 Web 應用程式。
我們可以從 reactstrap 中匯入元件，這些元件與其他 React 元件類似。
import {
Button,UncontrolledAlert,Card,CardImg,CardBody,
CardTitle,CardSubtitle,CardText
} from'reactstrap';Reactstrap 對模態視窗有很好的支援，它是 React 的首選庫。
還有其他庫，例如 CoreUI-React、react-UI、React-Bootstrap-Table 等。
更新於： 2019年9月4日
2K+ 閱讀量
廣告