当前位置：极客教程 > Bootstrap > Bootstrap教程 > 如何将Bootstrap与React一起使用

如何将Bootstrap与React一起使用

如何将Bootstrap与React一起使用

我们都知道React的流行，以及这个库是如何让前端开发者的开发任务变得更容易的。React是最受欢迎的前端库，用于构建应用程序的用户界面。各行业正在慢慢减少使用jQuery和DOM库来构建他们的应用程序。

如何将Bootstrap与React一起使用？

当涉及到构建响应式应用程序时，CSS框架在市场上很有用。如果你从事前端开发工作，那么Bootstrap、Foundation和Bulma一类的框架对你来说并不陌生。大多数行业都使用Bootstrap框架。数以百万计的网站都在Bootstrap上运行。

在这篇博客中，我们将讨论如何使用React和Bootstrap，如何将bootstrap添加到React应用中。如何安装React bootstrap包以及如何在React应用中使用它。让我们从它开始…

在React中添加Bootstrap的方法

主要有三种方法将Bootstrap添加到React应用中。我们将逐一讨论它们。

  1. 使用Bootstrap CDN。
  2. 在React中导入Bootstrap作为一个依赖项
  3. 安装React Bootstrap包（如bootstrap-react或reactstrap）。

1.使用Bootstrap CDN

这是在你的React应用中使用bootstrap的最简单的方法之一。关于bootstrap CDN最好的一点是不需要安装或下载。你只需要在你的应用程序的头部复制和粘贴一个链接，就可以使它发挥作用。下面是你需要的链接。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" 
integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" 
crossorigin="anonymous">

如果你的应用程序需要JavaScript组件和bootstrap，那么在页面底部放置 <script>标签，就在关闭的</body>标签之前。

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" 
integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" 
crossorigin="anonymous"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" 
integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" 
crossorigin="anonymous"></script>

这些片段将被添加到public/index.html页面。

2.将Bootstrap作为一个依赖项导入

你可能已经在你的应用程序中使用了一些模块捆绑器或webpack，或者你可能听说过这些名字。这个是将bootstrap添加到你的React应用程序的另一个选择。你可以运行下面给出的命令，将bootstrap作为一个依赖项安装在你的应用程序中。

npm install bootstrap

安装完成后，在你的应用程序的条目的JavaScript文件中添加这个。下面是src文件夹里面的index.js文件。

import 'bootstrap/dist/css/bootstrap.min.css';
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

在上面的代码的最上面一行，我们已经导入了Bootstrap minified CSS作为第一个依赖关系。有了这个，我们就可以在我们的React组件中使用Bootstrap类。你还需要同时安装jQuery和popper.js。下面是安装这两个的命令。

npm install jquery popper.js

在index.js文件中做如下修改，以添加新的依赖性。

import 'bootstrap/dist/css/bootstrap.min.css';
import $ from 'jquery';
import Popper from 'popper.js';
import 'bootstrap/dist/js/bootstrap.bundle.min';
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(<Dropdown />, document.getElementById('root'));
registerServiceWorker();

3.安装React Bootstrap包

在你的React组件中添加bootstrap的另一种方法是添加一个内置bootstrap组件的包。这些都是为了与你的React应用组件一起工作。下面是两个流行的包的名称。

  • react-bootstrap
  • reactstrap

两者都是在React应用中使用Bootstrap的好选择。

用Bootstrap创建React应用程序

使用下面的命令，在你的机器上创建一个React应用程序。

create-react-app my-app

现在，运行下面的命令来安装下面的依赖性。

yarn add axios bootstrap reactstrap

在这里，我们把Axios作为一个依赖项安装，它是一个JavaScript库，用于从node.js或XMLHttpRequests的浏览器中进行HTTP请求。Axios允许你从BaconIpsum的JSON API中获取帖子。

现在要使用这个Bootstrap最小化的CSS文件，你需要在src/index.js文件中做一些修改，以包括 它将看起来像下面给出的东西。

import 'bootstrap/dist/css/bootstrap.min.css';
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

现在在你项目的src目录下创建一个文件夹component。创建一个新的文件Header.js，并在其中写下下面的代码。

import React from 'react';
import logo from '../logo.svg';

import {
  Container, Row, Col, Form, Input, Button, Navbar, Nav,
  NavbarBrand, NavLink, NavItem, UncontrolledDropdown,
  DropdownToggle, DropdownMenu, DropdownItem
} from 'reactstrap';

const AVATAR = 'https://www.gravatar.com/avatar/429e504af19fc3e1cfa5c4326ef3394c?s=240&d=mm&r=pg';

const Header = () => (
  <header>
    <Navbar fixed="top" color="light" light expand="xs" className="border-bottom border-gray bg-white" style={{ height: 80 }}>

      <Container>
        <Row noGutters className="position-relative w-100 align-items-center">

          <Col className="d-none d-lg-flex justify-content-start">
            <Nav className="mrx-auto" navbar>

              <NavItem className="d-flex align-items-center">
                <NavLink className="font-weight-bold" href="/">
                  <img src={AVATAR} alt="avatar" className="img-fluid rounded-circle" style={{ width: 36 }} />
                </NavLink>
              </NavItem>

              <NavItem className="d-flex align-items-center">
                <NavLink className="font-weight-bold" href="/">Home</NavLink>
              </NavItem>

              <NavItem className="d-flex align-items-center">
                <NavLink className="font-weight-bold" href="/">Electronics</NavLink>
              </NavItem>

              <UncontrolledDropdown className="d-flex align-items-center" nav inNavbar>
                <DropdownToggle className="font-weight-bold" nav caret>fashion</DropdownToggle>
                <DropdownMenu right>
                  <DropdownItem className="font-weight-bold text-secondary text-uppercase" header disabled>Learn React</DropdownItem>
                  <DropdownItem divider />
                  <DropdownItem>Men</DropdownItem>
                  <DropdownItem>Women</DropdownItem>
                  <DropdownItem>Baby and Kids</DropdownItem>
                </DropdownMenu>
              </UncontrolledDropdown>

            </Nav>
          </Col>

          <Col className="d-flex justify-content-xs-start justify-content-lg-center">
            <NavbarBrand className="d-inline-block p-0" href="/" style={{ width: 80 }}>
              <img src={logo} alt="logo" className="position-relative img-fluid" />
            </NavbarBrand>
          </Col>

          <Col className="d-none d-lg-flex justify-content-end">
            <Form inline>
              <Input type="search" className="mr-3" placeholder="Search React Courses" />
              <Button type="submit" color="info" outline>Search</Button>
            </Form>
          </Col>

        </Row>
      </Container>

    </Navbar>
  </header>
);

export default Header;

在上面的代码中，我们已经包含了导航菜单。现在让我们在组件目录下创建一个LeftCard.js文件，内容如下。

import React, { Fragment } from 'react';

import {
  Button, UncontrolledAlert, Card, CardImg, CardBody,
  CardTitle, CardSubtitle, CardText
} from 'reactstrap';

const BANNER = 'https://i.imgur.com/CaKdFMq.jpg';

const LeftCard = () => (
  <Fragment>

    <UncontrolledAlert color="danger" className="d-none d-lg-block">
      <strong>Account not activated.</strong>
    </UncontrolledAlert>

    <Card>
      <CardImg top width="100%" src={BANNER} alt="banner" />
      <CardBody>
        <CardTitle className="h3 mb-2 pt-2 font-weight-bold text-secondary">Lorem Ipsum</CardTitle>
        <CardSubtitle className="text-secondary mb-3 font-weight-light text-uppercase" style={{ fontSize: '0.8rem' }}>Lorem Ipsum, Lagos</CardSubtitle>
        <CardText className="text-secondary mb-4" style={{ fontSize: '0.75rem' }}>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a gallery of type and scrambled it to make a type specimen book</CardText>
        <Button color="success" className="font-weight-bold">Lorem Ipsum</Button>
      </CardBody>
    </Card>

  </Fragment>
);

export default LeftCard;

现在在组件目录下创建一个Post.js文件，并添加下面给出的片段…

import React, { Component, Fragment } from 'react';
import axios from 'axios';
import { Badge } from 'reactstrap';

class Post extends Component {

  state = { post: null }

  componentDidMount() {
    axios.get('https://baconipsum.com/api/?type=meat-and-filler&paras=4&format=text')
      .then(response => this.setState({ post: response.data }));
  }

  render() {
    return (
      <Fragment>
        { this.state.post && <div className="position-relative">

          <span className="d-block pb-2 mb-0 h6 text-uppercase text-info font-weight-bold">
            Editor's Pick
            <Badge pill color="success" className="text-uppercase px-2 py-1 ml-3 mb-1 align-middle" style={{ fontSize: '0.75rem' }}>New</Badge>
          </span>

          <span className="d-block pb-4 h2 text-dark border-bottom border-gray">React Tutorial</span>

          <article className="pt-5 text-secondary text-justify" style={{ fontSize: '0.9rem', whiteSpace: 'pre-line' }}>{this.state.post}</article>

        </div> }
      </Fragment>
    );
  }

}

export default Post;

上面的代码片段在页面上渲染了帖子。在上面的代码中，帖子的状态将被初始化为空。当React页面渲染和组件加载时，我们使用Axios从BaconIpsum JSON API中获取四个段落。之后，post属性的状态将被改变。

在src/App.js文件中做最后的修改，看起来像下面给出的那样…

import React, { Fragment } from 'react';
import axios from 'axios';
import { Container, Row, Col } from 'reactstrap';

import Post from './components/Post';
import Header from './components/Header';
import LeftCard from './components/LeftCard';

const App = () => (
  <Fragment>

    <Header />

    <main className="my-5 py-5">
      <Container className="px-0">
        <Row noGutters className="pt-2 pt-md-5 w-100 px-4 px-xl-0 position-relative">

          <Col xs={{ order: 2 }} md={{ size: 4, order: 1 }} tag="aside" className="pb-5 mb-5 pb-md-0 mb-md-0 mx-auto mx-md-0">
            <SideCard />
          </Col>

          <Col xs={{ order: 1 }} md={{ size: 7, offset: 1 }} tag="section" className="py-5 mb-5 py-md-0 mb-md-0">
            <Post />
          </Col>

        </Row>
      </Container>
    </main>

  </Fragment>
);

export default App;

总结

所以我们已经讨论了在React应用中包含bootstrap的多种方法。我们还讨论了使用react-bootstrap库。警报、徽章、导航条、下拉、按钮、卡片、导航、表单等是React中bootstrap库的常见组件，你会经常使用。其他有用的组件有表格、模版、工具提示、旋转木马、滚动条、分页、标签等。React bootstrap在给你的网站布局和设计用户界面方面非常有用。一旦你开始使用它，你就会知道其组件的用途。

Python教程

Python 教程

Python 教程
Tkinter 教程

Tkinter 教程
Pandas 教程

Pandas 教程
NumPy 教程

NumPy 教程
Flask 教程

Flask 教程
Django 教程

Django 教程
PySpark 教程

PySpark 教程
wxPython 教程

wxPython 教程
SymPy 教程

SymPy 教程
Seaborn 教程

Seaborn 教程
SciPy 教程

SciPy 教程
RxPY 教程

RxPY 教程
Pycharm 教程

Pycharm 教程
Pygame 教程

Pygame 教程
PyGTK 教程

PyGTK 教程
PyQt 教程

PyQt 教程
PyQt5 教程

PyQt5 教程
PyTorch 教程

PyTorch 教程
Matplotlib 教程

Matplotlib 教程
Web2py 教程

Web2py 教程
BeautifulSoup 教程

BeautifulSoup 教程

Java教程

Java 教程

Java 教程

Web教程

HTML 教程

HTML 教程
CSS 教程

CSS 教程
CSS3 教程

CSS3 教程
jQuery 教程

jQuery 教程
Ajax 教程

Ajax 教程
AngularJS 教程

AngularJS 教程
TypeScript 教程

TypeScript 教程
WordPress 教程

WordPress 教程
Laravel 教程

Laravel 教程
Next.js 教程

Next.js 教程
PhantomJS 教程

PhantomJS 教程
Three.js 教程

Three.js 教程
Underscore.JS 教程

Underscore.JS 教程
WebGL 教程

WebGL 教程
WebRTC 教程

WebRTC 教程
VueJS 教程

VueJS 教程

数据库教程

SQL 教程

SQL 教程
MySQL 教程

MySQL 教程
MongoDB 教程

MongoDB 教程
PostgreSQL 教程

PostgreSQL 教程
SQLite 教程

SQLite 教程
Redis 教程

Redis 教程
MariaDB 教程

MariaDB 教程

图形图像教程

Vulkan 教程

Vulkan 教程
OpenCV 教程

OpenCV 教程

大数据教程

R语言 教程

R语言 教程

开发工具教程

Git 教程

Git 教程
VSCode 教程

VSCode 教程
Docker 教程

Docker 教程
Gerrit 教程

Gerrit 教程
Excel 教程

Excel 教程

计算机教程

Go语言 教程

Go语言 教程
C++ 教程

C++ 教程

Bootstrap教程