React编程 - 2 - 在create-react-app使用react-bootstrap

1. 安装bootstrap

由于笔者在写本文时，react-bootstap只支持bootstrap v3
因此，我们需要安装bootstrap v3的特定版本

npm install [email protected] --save

2. 安装react-bootstrap

npm install --save react react-dom
npm install --save react-bootstrap

3. 添加css引用

在index.js文件中增加css引用。

import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap/dist/css/bootstrap-theme.css';

4. 编写代码

App.js

import React, {Component} from 'react';
import logo from './logo.svg';
import './App.css';
import {Grid, Row, Col, ButtonToolbar, Button} from 'react-bootstrap';

class App extends Component {
    render() {
        return (
            

                

                    
                
                
                    
                        
                            

                                Buttons Demo
                            
                        
                        
                            
                                {/* Standard button */}
                                Default

                                {/* Provides extra visual weight and identifies the primary action in a set of buttons */}
                                Primary

                                {/* Indicates a successful or positive action */}
                                Success

                                {/* Contextual button for informational alert messages */}
                                Info

                                {/* Indicates caution should be taken with this action */}
                                Warning

                                {/* Indicates a dangerous or potentially negative action */}
                                Danger

                                {/* Deemphasize a button by making it look like a link while maintaining button behavior */}
                                Link
                            
                        
                    
                
            
        );
    }
}

export default App;

运行效果

`