Day_21 整合前端框架如Bootstrap或Tailwind CSS

2024 iThome 鐵人賽

DAY 21

Modern Web

ASP.NET Core的終極奧義：從零到無敵系列第 21 篇

16th鐵人賽

clevens1008

團隊NUTC imac

2024-09-29 00:25:57

130 瀏覽

分享至

在ASP.NET Core應用中，使用前端框架如Bootstrap或Tailwind CSS可以快速提升頁面的美觀與可用性。這些框架提供了預設的樣式與元件，讓我們能夠專注於核心功能開發。本篇將講解如何將這些框架整合到ASP.NET Core專案中，並探討其優勢與使用方式。

1. 為什麼選擇前端框架？
採用前端框架的主要好處包括：

快速開發：透過預設樣式與元件，能夠減少樣式編寫的時間。
一致性：設定好的一致樣式讓整個應用變得更加協調。
響應式設計：許多框架都內建響應式設計，能夠自適應不同裝置。

2. 整合Bootstrap到ASP.NET Core
要在ASP.NET Core專案中使用Bootstrap，您可以按照以下步驟進行：

步驟 1：安裝Bootstrap

我們可以透過NuGet包管理器安裝Bootstrap。在Package Manager Console中執行以下命令：

Install-Package bootstrap

步驟 2：添加Bootstrap樣式

在專案的_Layout.cshtml檔案中，增加Bootstrap的CSS引用。通常位於Views/Shared/_Layout.cshtml：

<head>
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
</head>

步驟 3：使用Bootstrap元件

在你的Razor頁面中，你可以開始使用Bootstrap的預設元件，例如：

<div class="container">
    <h1 class="my-4">歡迎使用Bootstrap</h1>
    <button class="btn btn-primary">點我!</button>
</div>

3. 整合Tailwind CSS到ASP.NET Core

步驟 1：安裝Tailwind CSS

Tailwind CSS可以透過npm安裝。首先，在根目錄中執行以下命令初始化npm專案：

npm init -y

然後安裝Tailwind CSS：

npm install tailwindcss

步驟 2：配置Tailwind CSS

接下來，在專案根目錄中創建Tailwind CSS配置檔案：

npx tailwindcss init

修改tailwind.config.js以設定purge選項，確保未使用的樣式不被編譯：

module.exports = {
  purge: ['./Views/**/*.cshtml', './wwwroot/**/*.html'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

步驟 3：在CSS中引入Tailwind

創建wwwroot/css/tailwind.css並加入以下內容：

@tailwind base;
@tailwind components;
@tailwind utilities;

接下來，使用Tailwind CLI編譯CSS：

npx tailwindcss -i ./wwwroot/css/tailwind.css -o ./wwwroot/css/output.css --watch

然後在_Layout.cshtml中引入編譯後的CSS：

<head>
    <link rel="stylesheet" href="~/css/output.css" />
</head>

4. 使用框架的優勢
整合Bootstrap或Tailwind CSS後，您將能快速創建漂亮的界面。例如：

<div class="bg-gray-100 p-4 rounded shadow">
    <h2 class="text-xl font-bold">Tailwind CSS的優勢</h2>
    <p>使用Tailwind CSS可讓您輕鬆定義樣式和佈局，並快速開發具響應式的Web應用。</p>
</div>

5. 小結
透過整合前端框架如Bootstrap或Tailwind CSS，我們不僅能提升應用的視覺效果，也提升了開發效率。這些框架的多樣元件和強大功能，讓開發者能夠專注於用戶體驗與業務邏輯，而非樣式的細節。

在接下來的文章中，我們將探討使用AJAX實現無刷新操作的技巧，讓應用更加流暢。敬請期待！