React 引入bootstrap美化组件

1:安装bootstrap

npm i bootstrap

2:/src/index.js 中加入

import React from "react";
import ReactDOM from "react-dom"; 
// 全局引入 bootstrap ,组件中都可以使用bootstrap提供的样式表
import 'bootstrap/dist/css/bootstrap.css' 
import Cmtlist from
"./components/Cmtlist" ReactDOM.render(<Cmtlist/>, document.getElementById("app"));

 3:在组件中使用

<div className="card">
            <div className="card-header">
                评论人:{props.data.user}
            </div>
            <div className="card-body">
                <blockquote className="blockquote mb-0">
                    <p>{props.data.content}</p>
                    <footer className="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
                </blockquote>
            </div>
        </div>

这里使用的是bootstrap的卡片组件,有点麻烦的是,直接从bootstrap官网copy的代码,它的类名不符合React的规范,会报Warning,要手动改。。。。。。。(希望有大佬看到可以给出解决办法,Thanks♪(・ω・)ノ)

4:效果

原文地址:https://www.cnblogs.com/zqblog1314/p/12924697.html