ReactJS - Bootstrap

Bootstrap 是一個流行的 CSS 框架，全球前端開發者都在使用它。Bootstrap 透過其靈活、響應式和高效能的實用 CSS 元件，為網頁設計提供了極好的支援。Bootstrap 還提供大量基於 jQuery 的 UI 元件。

使用 Bootstrap 的 CSS 和 JavaScript 元件，前端開發者可以設計出美觀的網頁，併為任何裝置提供響應式支援。React 可以與 Bootstrap 一起使用，並在其 Web 應用中獲得 Bootstrap 的所有好處。本章將介紹如何將 Bootstrap 整合到 React 應用中。

整合 Bootstrap

可以透過多種方式將 Bootstrap 整合到 React 應用中。如果開發者只想使用 Bootstrap 庫中的 CSS 功能，那麼開發者可以透過 CDN 匯入 Bootstrap 庫，並在需要的地方使用 Bootstrap CSS 類。

如果開發者想要使用 Bootstrap JavaScript 庫，那麼開發者可以使用包裹在原始 Bootstrap jQuery 元件周圍的 React 元件，或者使用專門設計的 React UI 庫來利用 Bootstrap 庫的功能。

以下是將 Bootstrap 庫整合到 React 應用中的選項列表。

Link 標籤（僅限 CSS）。
import 功能（僅限 CSS）。
Link 標籤（Bootstrap + jQuery UI）。
包裝器 React 元件。
原生 React Bootstrap 元件。

Link 標籤（僅限 CSS）

本章將學習如何透過建立 React 應用來應用 link 標籤。首先，使用以下命令建立一個新的 React 應用並啟動它。

create-react-app myapp
cd myapp
npm start

接下來，開啟主 html 頁面 (public/index.html) 並在 head 中包含以下標籤

<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css"
rel="stylesheet" crossorigin="anonymous">

接下來，開啟 App.css (src/App.css) 並更新 CSS 以設定按鈕元素的邊距。

button {
   margin: 5px;
}

接下來，開啟 App 元件 (src/App.js) 並使用 Bootstrap 按鈕更新內容，如下所示：

import './App.css'
function App() {
   return (
      <div className="container">
         <button type="button" class="btn btn-primary">Primary</button>
         <button type="button" class="btn btn-secondary">Secondary</button>
         <button type="button" class="btn btn-success">Success</button>
         <button type="button" class="btn btn-danger">Danger</button>
         <button type="button" class="btn btn-warning">Warning</button>
         <button type="button" class="btn btn-info">Info</button>
         <button type="button" class="btn btn-light">Light</button>
         <button type="button" class="btn btn-dark">Dark</button>
         <button type="button" class="btn btn-link">Link</button>
      </div>
   );
}
export default App;

這裡：

應用了不同型別按鈕的 Bootstrap CSS 類。
包含了 App.css 樣式。

最後，在瀏覽器中開啟應用程式，並檢查 Bootstrap 類是否已正確應用於按鈕元素，如下所示：

import 功能（僅限 CSS）

本節將介紹如何使用 import 功能整合 Bootstrap CSS。

首先，使用以下命令建立一個新的 React 應用並啟動它。

create-react-app myapp
cd myapp
npm start

接下來，使用以下命令安裝 Bootstrap 庫。

npm install --save bootstrap

接下來，開啟 App.css (src/App.css) 並更新 CSS 以設定按鈕元素的邊距。

button {
   margin: 5px;
}

接下來，開啟 App 元件 (src/App.js)，匯入 Bootstrap css 並使用 Bootstrap 按鈕更新內容，如下所示：

// Bootstrap CSS
import "bootstrap/dist/css/bootstrap.min.css";
// Bootstrap Bundle JS
import "bootstrap/dist/js/bootstrap.bundle.min";
import './App.css'
function App() {
   return (
      <div className="container">
         <button type="button" class="btn btn-primary">Primary</button>
         <button type="button" class="btn btn-secondary">Secondary</button>
         <button type="button" class="btn btn-success">Success</button>
         <button type="button" class="btn btn-danger">Danger</button>
         <button type="button" class="btn btn-warning">Warning</button>
         <button type="button" class="btn btn-info">Info</button>
         <button type="button" class="btn btn-light">Light</button>
         <button type="button" class="btn btn-dark">Dark</button>
         <button type="button" class="btn btn-link">Link</button>
      </div>
   );
}
export default App;

這裡：

使用 import 語句匯入了 Bootstrap 類。
應用了不同型別按鈕的 Bootstrap CSS 類。
包含了 App.css 樣式。

最後，在瀏覽器中開啟應用程式，並檢查 Bootstrap 類是否已正確應用於按鈕元素，如下所示：

Link 標籤（Bootstrap + jQuery UI）

React 允許開發者使用 createRoot 方法將 React 元件整合到網頁的特定部分。此功能使開發者能夠在一個網頁中使用 React 和 Bootstrap 元件。開發者可以混合使用這兩個庫而不會互相影響。對於小型網頁來說，這是簡單且最佳的選項。由於它不需要任何額外的學習，因此在 Web 應用中易於安全地實現。

包裝器 React 元件

開發者可以為必要的 Bootstrap 元件建立一個包裝器 React 元件，並將其用於他們的應用程式。此方法可用於 Bootstrap 元件使用不廣泛的中等至複雜的 Web 應用。

原生 React Bootstrap 元件

React 社群建立了許多集成了 Bootstrap 和 React 的元件庫。一些流行的庫如下：

React-Bootstrap (https://react-bootstrap.github.io/)
Bootstrap 4 React (https://bootstrap-4-react.com//)
Reactstrap (https://reactstrap.github.io/)
來自 coreUI 的 Bootstrap React (https://coreui.io/bootstrap-react/)

本章將透過建立一個簡單的 React 應用來學習如何使用 React-bootstrap。

首先，使用以下命令建立一個新的 React 應用並啟動它。

create-react-app myapp
cd myapp
npm start

接下來，使用以下命令安裝 Bootstrap 庫：

npm install --save react-bootstrap bootstrap

接下來，開啟 App.css (src/App.css) 並更新 CSS 以設定按鈕元素的邊距。

button {
   margin: 5px;
}

接下來，開啟 App 元件 (src/App.js)，匯入 Bootstrap css 並使用 Bootstrap 按鈕更新內容，如下所示：

// Bootstrap CSS
import "bootstrap/dist/css/bootstrap.min.css";
// Bootstrap Bundle JS
import "bootstrap/dist/js/bootstrap.bundle.min";
import './App.css'
import { Button } from 'react-bootstrap';
function App() {
   return (
      <div className="container">
         <Button variant="primary">Primary</Button>{' '}
         <Button variant="secondary">Secondary</Button>{' '}
         <Button variant="success">Success</Button>{' '}
         <Button variant="warning">Warning</Button>{' '}
         <Button variant="danger">Danger</Button>{' '}
         <Button variant="info">Info</Button>{' '}
         <Button variant="light">Light</Button>{' '}
         <Button variant="dark">Dark</Button> <Button variant="link">Link</Button>
      </div>
   );
}
export default App;

這裡：

使用 import 語句匯入了 Bootstrap 類。
匯入了 Bootstrap 按鈕元件。
使用不同變體的按鈕元件。
包含了 App.css 樣式。

最後，在瀏覽器中開啟應用程式，並檢查 Bootstrap 類是否已正確應用於按鈕元素，如下所示：

總結

React 有許多選項可以與 Bootstrap 庫整合。React 能夠在 Web 應用中將 Bootstrap 元件平滑遷移到 React Bootstrap 元件。豐富的第三方 Bootstrap 元件集使開發者能夠提供出色的 UI/UX 體驗，而無需離開 Bootstrap 庫。

列印頁面