以下是原文翻译成繁體中文的Markdown格式：

Bootstrap - Input Groups

# Bootstrap - 輸入群組：初學者的友好指南

你好，未來的網頁開發者們！我很興奮能夠成為你們在Bootstrap輸入群組這段興奮旅程中的導遊。作為一個教了多年計算機科學的人，我見過無數學生在掌握這些概念時眼睛發亮。那麼，讓我們一起深入探索，讓你的網頁表單看起來棒極了！

## 什麼是輸入群組？

在我們開始之前，想像你正在為一個披薩外送服務設計表單。你需要字段來填寫顧客的姓名、地址，當然還有非常重要的披薩配料。輸入群組就像秘密醬汁一樣，讓這些表單元素看起來緊湊且專業。

在Bootstrap中，輸入群組允許你為表單控件添加前綴、後綴或其他元素。它們提升了你的表單的視覺吸引力與功能性，使其更加用戶友好和直觀。

### 範例：基本輸入群組

讓我們從一個簡單的範例開始：

```html
<div class="input-group mb-3">
  <span class="input-group-text">@</span>
  <input type="text" class="form-control" placeholder="用戶名">
</div>

在這段代碼中：

我們創建了一個帶有 input-group 類的容器。
mb-3 類在底部添加了一些邊距。
我們使用 input-group-text 為 '@' 符號前綴。
輸入字段使用 form-control 類來設計樣式。

這樣就創造了一個時尚的輸入字段，帶有 '@' 符號，非常適合輸入用戶名或電子郵件地址！

包裹

有時候，你的輸入群組可能會因為太長而無法單行顯示。別擔心；Bootstrap為你提供了自動包裹的功能。

範例：包裹輸入群組

<div class="input-group flex-nowrap">
  <span class="input-group-text">@</span>
  <input type="text" class="form-control" placeholder="用戶名">
  <span class="input-group-text">.com</span>
</div>

在這裡，我們在輸入群組中添加了 flex-nowrap。這樣可以確保所有元素在可能情況下都保持在同一行，但如果屏幕太窄，它們會很好地包裹。

尺寸

就像Goldilocks一樣，有時候你需要你的輸入群組尺寸剛剛好。Bootstrap提供了不同的尺寸選項來滿足你的需求。

範例：不同尺寸的輸入群組

<div class="input-group input-group-sm mb-3">
  <span class="input-group-text">小型</span>
  <input type="text" class="form-control">
</div>

<div class="input-group mb-3">
  <span class="input-group-text">默認</span>
  <input type="text" class="form-control">
</div>

<div class="input-group input-group-lg">
  <span class="input-group-text">大型</span>
  <input type="text" class="form-control">
</div>

透過添加 input-group-sm 或 input-group-lg，你可以創建小型或大型的輸入群組。默認尺寸不需要任何額外的類。

勾選框和單選按鈕

有時候，一個簡單的文本輸入是不夠的。你可能想要在輸入群組中添加勾選框或單選按鈕。讓我們看看我們如何做到這一點！

範例：勾選框在輸入群組中

<div class="input-group mb-3">
  <div class="input-group-text">
    <input class="form-check-input mt-0" type="checkbox">
  </div>
  <input type="text" class="form-control" placeholder="勾選框在這裡">
</div>

在這個範例中，我們在 input-group-text div 中嵌入了勾選框。form-check-input 類為我們的勾選框設計樣式，而 mt-0 移除了頂部邊距。

多個輸入

何必滿足於一個輸入，當你可以有許多輸入？讓我們創建一個具有多個字段的輸入群組。

範例：多個輸入

<div class="input-group">
  <span class="input-group-text">第一名和姓氏</span>
  <input type="text" class="form-control" placeholder="第一名">
  <input type="text" class="form-control" placeholder="姓氏">
</div>

這樣就創造了兩個並排的輸入字段，非常適合收集用戶的全名！

按鈕附加元件

按鈕可以為你的輸入群組添加互動性。讓我們看看如何將它們整合。

範例：按鈕附加元件

<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="收件人的用戶名">
  <button class="btn btn-outline-secondary" type="button">按鈕</button>
</div>

在這裡，我們在輸入字段旁邊添加了一個按鈕。這可以用於提交表單或觸發搜索等操作。

带下拉菜单的按钮

想要給用戶更多選項？讓我們為我們的按鈕附加元件添加一個下拉菜單。

範例：帶下拉菜單的按鈕

<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="搜索...">
  <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
    選項
  </button>
  <ul class="dropdown-menu dropdown-menu-end">
    <li><a class="dropdown-item" href="#">動作</a></li>
    <li><a class="dropdown-item" href="#">另一個動作</a></li>
    <li><a class="dropdown-item" href="#">在這裡的其他東西</a></li>
  </ul>
</div>

這樣就在我們的輸入字段旁邊創建了一個帶有下拉菜單的按鈕，為用戶提供了額外的選項。

自定義表單

Bootstrap還允許你在輸入群組中創建自定義表單元素。讓我們看看一個自定義選擇的範例。

範例：自定義選擇

<div class="input-group mb-3">
  <label class="input-group-text" for="inputGroupSelect01">選項</label>
  <select class="form-select" id="inputGroupSelect01">
    <option selected>選擇...</option>
    <option value="1">一</option>
    <option value="2">二</option>
    <option value="3">三</option>
  </select>
</div>

這樣就在我們的輸入群組中創建了一個自定義的下拉選擇菜單，與其他Bootstrap元素風格一致。

自定義文件輸入

最後但同樣重要的是，讓我們看看如何在輸入群組中創建自定義的文件輸入。

範例：自定義文件輸入

<div class="input-group mb-3">
  <label class="input-group-text" for="inputGroupFile01">上傳</label>
  <input type="file" class="form-control" id="inputGroupFile01">
</div>

這樣就創造了一個時尚的文件輸入字段，非常適合讓用戶通過你的表單上傳文件。

結論

這就是你們，各位！我們一起穿越了Bootstrap輸入群組的世界，從基本範例到更複雜的配置。記住，掌握這些概念關鍵在於實踐。嘗試組合不同的元素，玩轉尺寸和樣式，最重要的是，樂在其中！

當我們結束時，我回想起了有個學生曾經告訴我，“Bootstrap就像樂高積木一樣對網頁設計。”而你知道嗎？他絕對是對的。現在你有了所有這些美妙的積木 - 是時候建造一些令人驚艷的東西了！

快樂編程，願你的表單永遠用戶友好且視覺吸引！



请注意，Markdown格式中的代码块会以原始格式显示，因此HTML代码中的标签和类名会保持原文的样式。

Credits: Image by storyset