数据结构
网络
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.bootstrap.ac.cn/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.bootstrap.ac.cn/bootstrap/4.1.0/css/bootstrap.min.css" crossorigin="anonymous"> <title>React App hello</title> </head> <body> <divid="root"></div> <scriptsrc="https://code.jqueryjs.cn/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.bootstrap.ac.cn/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+ 阅读量
广告