繁體中文

ReactJS 教學

鉤子

ReactJS 高階功能

附加概念

ReactJS - Bootstrap：初學者整合Bootstrap的指南

你好，未來的React開發者！我很高興能成為你進入ReactJS和Bootstrap世界的引路人。作為一個教了多年計算機科學的人，我可以向你保證，在這個教學結束時，你將會有一個堅實的理解，知道如何使用Bootstrap讓你的React應用程序看起來時尚而專業。那麼，讓我們開始吧！

ReactJS - Bootstrap

Bootstrap是什麼？

在我們開始整合Bootstrap和React之前，讓我們先來了解什麼是Bootstrap。想像你正在蓋房子。你可以從頭開始創造每一塊磚、釘子和家具，或者你可以使用預製的組件來加快進程。Bootstrap就像是那些預製的組件，但它是為網頁開發而設計的。

Bootstrap是一個流行的CSS框架，提供了一系列預設的組件和樣式。它就像是一個裡面裝滿了即時可用的網頁元素的寶藏箱。使用Bootstrap，你可以快速創建響應式且視覺上吸引人的網頁，而不需要從頭開始編寫所有的CSS。

為什麼要在React中使用Bootstrap？

你可能會想，"我為什麼要在React中使用Bootstrap？"讓我告訴你一個小故事。多年前，我有一個學生非常擅長React，但在設計方面有困難。他的應用程序運行無誤，但看起來像是停留在90年代。然後他發現了Bootstrap，突然之間，他的專案從"一般"變成了"驚艷"。

React非常適合建立動態用戶界面，但它不包含內置的樣式。將React和Bootstrap結合使用，你將得到兩者的最佳結合：React強大的組件基礎架構和Bootstrap美觀的響應式設計元素。

在React中整合Bootstrap

現在，讓我們動手整合Bootstrap和React。主要有兩種方法：

  1. 使用Bootstrap CSS
  2. 使用React-Bootstrap

我們將探討這兩種方法，但首先，讓我們建立一個新的React專案。

建立新的React專案

如果你還沒有安裝Node.js，請先在你的電腦上安裝它。然後打開終端並運行以下命令：

npx create-react-app my-bootstrap-app
cd my-bootstrap-app
npm start

這將創建一個新的React應用程序並啟動開發服務器。你應該會在瀏覽器中看到默認的React應用程序運行。

方法1：使用Bootstrap CSS

將Bootstrap添加到你的React專案中最簡單的方法是包含CSS文件。這樣做：

  1. 安裝Bootstrap：
npm install bootstrap
  1. 在你的src/index.js文件中引入Bootstrap CSS：
import 'bootstrap/dist/css/bootstrap.min.css';

現在，你可以在React組件中使用Bootstrap類。讓我們創建一個簡單的導航欄來看看它是如何工作的：

import React from 'react';

function App() {
return (
<nav className="navbar navbar-expand-lg navbar-light bg-light">
<a className="navbar-brand" href="#">我的Bootstrap應用程序</a>
<button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="切換導航">
<span className="navbar-toggler-icon"></span>
</button>
<div className="collapse navbar-collapse" id="navbarNav">
<ul className="navbar-nav">
<li className="nav-item active">
<a className="nav-link" href="#">首頁</a>
</li>
<li className="nav-item">
<a className="nav-link" href="#">關於</a>
</li>
<li className="nav-item">
<a className="nav-link" href="#">聯繫</a>
</li>
</ul>
</div>
</nav>
);
}

export default App;

這段代碼使用Bootstrap類創建了一個響應式的導航欄。navbar類定義了主要容器，而其他類如navbar-expand-lg和navbar-light則控制其行為和外觀。

方法2：使用React-Bootstrap

直接使用Bootstrap CSS效果很好，但React-Bootstrap進一步提供了整合Bootstrap功能的React組件。這種方法更符合React風格，並且可以導致更清潔、更易於維護的代碼。

讓我們設定它：

  1. 安裝React-Bootstrap和Bootstrap：
npm install react-bootstrap bootstrap
  1. 在你的src/index.js文件中引入Bootstrap CSS（與之前相同）：
import 'bootstrap/dist/css/bootstrap.min.css';

現在，讓我們使用React-Bootstrap組件重寫我們的導航欄：

import React from 'react';
import { Navbar, Nav } from 'react-bootstrap';

function App() {
return (
<Navbar bg="light" expand="lg">
<Navbar.Brand href="#home">我的Bootstrap應用程序</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="mr-auto">
<Nav.Link href="#home">首頁</Nav.Link>
<Nav.Link href="#about">關於</Nav.Link>
<Nav.Link href="#contact">聯繫</Nav.Link>
</Nav>
</Navbar.Collapse>
</Navbar>
);
}

export default App;

這段代碼實現了與我們之前示例相同的效果，但它使用了React-Bootstrap的Navbar和Nav組件，而不是原始的HTML元素和Bootstrap類。這種方法在React中更自然，並且可以讓你的代碼更易於維護。

在React中使用Bootstrap組件

現在，我們已經在React應用程序中設置了Bootstrap，讓我們探索一些流行的Bootstrap組件以及如何在React中使用它們。我們將創建一個簡單的頁面佈局，使用各種Bootstrap組件。

import React from 'react';
import { Container, Row, Col, Card, Button } from 'react-bootstrap';

function App() {
return (
<Container>
<Row className="mt-5">
<Col md={4}>
<Card>
<Card.Img variant="top" src="https://via.placeholder.com/150" />
<Card.Body>
<Card.Title>卡片1</Card.Title>
<Card.Text>
這是一張帶有一些內容的示例卡片。
</Card.Text>
<Button variant="primary">了解更多</Button>
</Card.Body>
</Card>
</Col>
<Col md={4}>
<Card>
<Card.Img variant="top" src="https://via.placeholder.com/150" />
<Card.Body>
<Card.Title>卡片2</Card.Title>
<Card.Text>
另一張帶有不同內容的卡片。
</Card.Text>
<Button variant="secondary">探索</Button>
</Card.Body>
</Card>
</Col>
<Col md={4}>
<Card>
<Card.Img variant="top" src="https://via.placeholder.com/150" />
<Card.Body>
<Card.Title>卡片3</Card.Title>
<Card.Text>
還有一張卡片，展示Bootstrap的功能。
</Card.Text>
<Button variant="success">發現</Button>
</Card.Body>
</Card>
</Col>
</Row>
</Container>
);
}

export default App;

在這個示例中，我們使用了以下Bootstrap組件：

  • Container：為我們的內容創建一個居中的容器。
  • Row和Col：實現Bootstrap的網格系統，以創建響應式佈局。
  • Card：顯示一個可彈性的容器。
  • Button：創建有樣式的按鈕。

md={4}屬性告訴Bootstrap在中等屏幕和大屏幕上每列佔4個單位，這樣就會有三個等寬的列。

在React中自定義Bootstrap

Bootstrap的一個好處是其靈活性。你可以輕鬆地自定義它以符合你的專案獨特的風格。以下是一些自定義Bootstrap的方法：

1. 覆蓋Bootstrap變量

在你的src目錄中創建一個名為custom.scss的文件：

// Custom.scss

// 覆蓋默認變量
$primary: #007bff;
$secondary: #6c757d;
$success: #28a745;

// 引入Bootstrap及其默認變量
@import '~bootstrap/scss/bootstrap.scss';

然後，在你的index.js中引入這個文件，而不是默認的Bootstrap CSS：

import './custom.scss';

2. 添加自定義類

你也可以在Bootstrap類旁邊添加自己的類：

<Button className="my-custom-button" variant="primary">自定義按鈕</Button>

然後在你的CSS（或SCSS）文件中：

.my-custom-button {
border-radius: 25px;
text-transform: uppercase;
}

結論

恭喜你！你已經開始了整合Bootstrap和React世界的第一步。我們已經涵蓋了在React專案中設置Bootstrap的基本知識、使用Bootstrap組件以及如何根據你的需求自定義Bootstrap。

記住，熟練來自練習。嘗試使用你所學的知識建立一個小專案。也許是一個個人作品集頁面或是一個簡單的博客佈局。你使用這些工具越多，你就會越熟悉它們。

當我們結束時，我想到另一個學生，她最初對前端設計感到害怕。在學會使用React和Bootstrap後，她創造了一些我見過的最美觀且功能性強大的網頁應用程序。也許你就是我的下一個成功案例！

持續編程，保持好奇心，最重要的是，享受這個過程。直到下次，祝你在Bootstrap中使用React時玩得開心！

Credits: Image by storyset

上一教程:
ReactJS - 動畫
下一教程:
ReactJS - 地圖