「 有了基本畫面後，接下來就是讓它看起來更像 App，而不是簡單的 HTML。今天我們要加入 CSS 或套件（Bootstrap / Tailwind），調整輸入框、按鈕、結果卡片的外觀與排版，讓整個畫面更舒服，使用者操作起來更直覺。」

內容重點：

• 使用 CSS 或套件（Bootstrap / Tailwind）美化輸入框、按鈕、結果卡片
• 調整排版、字體、間距

程式說明：

• 加入 Bootstrap CDN：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

• 將 <input> 和 <button> 用 Bootstrap class：

<input class="form-control d-inline w-auto" id="cityInput" placeholder="輸入城市，例如 Taipei">
<button class="btn btn-primary" onclick="getWeather()">查詢</button>

• #result 改用 card 樣式：

<div id="result" class="card mt-3 p-3">請輸入城市名稱</div>