Day20 React 使用Bootstrap 5快速建立网页

首先先要安装Bootstrap 5的套件

安装Bootstrap 5套件连结

• Install with npm : npm install bootstrap
• Install with yarn : yarn add bootstrap

安装好Bootstrap套件後可到package.json的dependencies看看是否有安装成功。

"dependencies": {    
    "bootstrap": "^5.1.1",
     },

如何使用Bootstrap 建立WebPage

Step:1

在App.js中汇入 Bootstrap档案路径的连结

import React from 'react';
import "../node_modules/bootstrap/dist/css/bootstrap.min.css";

step:2

Bootstrap5画面连结

到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>
    )

step:3

到Bootstrap5主画面左边栏位点选Components>Card在右边画面复制Card的程序码,把程序码贴入在Column的地方,贴入後记得更改<img src="..." class="card-img-top" alt="..."/>为自闭标签,全部的class改为className,Style的值必需加上二个{{}} =>style={{width: '18rem' }}

step:4

可以到Lorem Picsum假图产生器网站,只需在URL 後添加您想要的图像尺寸(宽度和高度),您就会得到一个随机图像。

Lorem Picsum网站

最後程序码与简单制作出的网页如下:

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;

https://ithelp.ithome.com.tw/upload/images/20211004/201398003Komsr8D31.png


<<:  DAY20-EXCEL统计分析:单因子变异数分析实例

>>:  Day20 NiFi - 与 GCP Cloud Storage 对接设定

IOS、Python自学心得30天 Day-12 模组训练改善-4

前言: 利用while True:的方法後,已经能够以少次数的 epochs 来重复储存模型,但至於...

day21: side effect

今天提到的是 side effect,就像之前提到的, side effect 通常出现在以下几种情...

Day-21 Child Process

Child Process tags: IT铁人 Context Switching 前面提到电脑会...

Day-23 AVL Tree

树的高度(height of the tree) 在Binary Search tree中,我们知道...

Outlook 开启後,工作管理员内的记忆体使用率一直增加

Outlook开启後,工作管理员内的记忆体使用率一直增加,不论是断网路,或是还原系统,重灌Outlo...