• Install with npm : npm install bootstrap
• Install with yarn : yarn add bootstrap
安装好Bootstrap套件後可到package.json的dependencies看看是否有安装成功。
"dependencies": {
"bootstrap": "^5.1.1",
},
在App.js中汇入 Bootstrap档案路径的连结
import React from 'react';
import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
到Bootstrap5主画面左边栏位点选Layout>Grid,在右边画面复制三个等宽的columns的程序码,将程序码贴入<div></div>
的区块中
const App = () => {
return (
<div>
<div class="container">
<div class="row">
<div class="col">
Column
</div>
<div class="col">
Column
</div>
<div class="col">
Column
</div>
</div>
</div>
</div>
)
到Bootstrap5主画面左边栏位点选Components>Card在右边画面复制Card的程序码,把程序码贴入在Column的地方,贴入後记得更改<img src="..." class="card-img-top" alt="..."/>
为自闭标签,全部的class改为className,Style的值必需加上二个{{}} =>style={{width: '18rem' }}
可以到Lorem Picsum假图产生器网站,只需在URL 後添加您想要的图像尺寸(宽度和高度),您就会得到一个随机图像。
最後程序码与简单制作出的网页如下:
import React from 'react';
import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
const App = () => {
return (
<div>
<h1 className="text-center" style={{margin:'40px'}}>Welcome</h1>
<div className="container">
<div className="row">
<div className="col">
<div className="card text-center" style={{width: '18rem' }}>
<img src="https://picsum.photos/seed/picsum/200/300" className="card-img-top" alt="..."/>
<div className="card-body">
<h5 className="card-title">Card title</h5>
<p className="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" className="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div className="col">
<div className="card text-center" style={{width: '18rem' }} >
<img src="https://picsum.photos/200/300?grayscale" className="card-img-top" alt="..."/>
<div className="card-body">
<h5 className="card-title">Card title</h5>
<p className="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" className="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div className="col">
<div className="card text-center" style={{width: '18rem' }} >
<img src="https://picsum.photos/seed/picsum/200/300" className="card-img-top" alt="..."/>
<div className="card-body">
<h5 className="card-title">Card title</h5>
<p className="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" className="btn btn-primary ">Go somewhere</a>
</div>
</div>
</div>
</div>
</div>
</div>
)
}
export default App;
<<: DAY20-EXCEL统计分析:单因子变异数分析实例
>>: Day20 NiFi - 与 GCP Cloud Storage 对接设定
前言: 利用while True:的方法後,已经能够以少次数的 epochs 来重复储存模型,但至於...
今天提到的是 side effect,就像之前提到的, side effect 通常出现在以下几种情...
Child Process tags: IT铁人 Context Switching 前面提到电脑会...
树的高度(height of the tree) 在Binary Search tree中,我们知道...
Outlook开启後,工作管理员内的记忆体使用率一直增加,不论是断网路,或是还原系统,重灌Outlo...