zoukankan      html  css  js  c++  java
  • 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:效果

  • 相关阅读:
    遍历文件夹及子文件夹_函数
    wbadmin与vssadmin
    WSB备份到远程共享文件夹的限制
    Linux 性能工具集
    shell 与 空格
    Git 仓库结构 (二)***
    Linux下scp的用法***
    FINDSTR 命令使用详解
    Git 的origin和master分析 ***
    Git push *****
  • 原文地址:https://www.cnblogs.com/zqblog1314/p/12924697.html
Copyright © 2011-2022 走看看