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：效果