# 🏅 Day 41 - Bootstrap input group

## Bootstrap input group

Bootstrap 的 [Input Group](https://getbootstrap.com/docs/4.0/components/input-group/) 是一個實用的工具，
若純手刻一個輸入資料的表格時，
需要將按鍵與表格本身組合在一起，
但 Input Group 將基本架構組合完成，
只需要針對個別化的部分進行編輯即可得到一個架構完整符合自身需要的表單。

### 題目概念介紹

這周作業實作第六周作業搜尋區塊

內容處有三個區塊組成為

1. 搜尋文章：屬於該區塊的搜尋標題 label
2. 輸入處：此區塊以 input 構成
3. 送出資料按鈕：此可使用 button 或者 a ，但考量到 button 會較多預設格式，所以若無需要使用到 [btn](https://getbootstrap.com/docs/4.0/components/buttons/) 的元件，大多會以 a 為主要使用對象。

使用 input group 會自帶 bootstrap 的設定，目前需抵銷為線條的部分，以下介紹此次會需要注意之 CSS 設定

1. input-group 為此表格最外框，此處須設定邊線。
2. input-group-text 為左右 label 與 a 之設定，會自帶 border 需移除。
3. form-control 為 input 之 class 名稱，也會自帶 border 需移除。

最後是 focus 效果，當我們點擊此區塊時，會出現我們想要之效果(與 hover 概念相同，但 hover 是接觸時便觸發)，但原先都只能控制本身，這邊可以使用 :focus-within 的語法控制鄰近元素

.a:focus-within .b{
    color: red
};

當我點擊 a 時，b 的顏色能變成紅色。

### 題目

可以具上述提示實作此區塊，亦可參考 [模板](https://codepen.io/jmimiding4104/pen/PorOyWR) 調整 HTML、CSS `***` 的部分，將其與設計稿相符。

## 回報流程

將答案寫在 CodePen 並複製 CodePen 連結貼至底下回報就算完成了喔!
解答位置請參考下圖（需打開程式碼的部分觀看）


<!-- 解答：
https://codepen.io/jmimiding4104/pen/jOjYGNK
-->

回報區
---

|#|Discord|CodePen / 答案|
|:----:|:----:|:----:|
| 01 | hsiu8767 | [Codepen](https://codepen.io/hsiu8767/pen/GRbQmYM) |
| 02 | NocabWang(培根) | [Codepen](https://codepen.io/PeihanWang/pen/YzoeVaN?editors=1100) |
| 03 | 毛巾 | [Codepen](https://codepen.io/bqdcjboa-the-solid/pen/ExBQmKz) |
|04|Hailey|[Codepen](https://codepen.io/sxbokfja-the-flexboxer/pen/poXawoX)|
| 05 | Dolce_墨 |[Codepen](https://codepen.io/DolceTseng1026/pen/ExBQXRm)|
| 06 | tim |[Codepen](https://codepen.io/jskrtivy-the-animator/pen/rNEyQKB)|
| 07 | lianne._. | [Codepen](https://codepen.io/Elaina-L/pen/yLdvoqP) |
|08 | Ariel | [Codepen](https://codepen.io/ariel0510/pen/LYKQzyV?editors=1100) |
|09 | Kaya | [Codepen](https://codepen.io/kayaribi/pen/qBzxVYV) |
| 10| ya_meow |[Codepen](https://codepen.io/gkfxzvcb-the-bashful/pen/mdZXxbp)|
| 11| Sonia |[Codepen](https://codepen.io/YUJOU/pen/WNqMMyK?editors=1100)|
| 12 | Mike | [Codepen](https://codepen.io/mike2049/pen/rNEJvxz) |
| 13 | yoishere | [Codepen](https://codepen.io/yoishere/pen/BagYdvQ) |
| 14 | 泊岸 | [Codepen](https://codepen.io/qoq77416416/pen/mdZXwOL) |
| 15 | 陳小廷 | [Codepen](https://codepen.io/ting1124/pen/rNEJozp) |
| 16 | 邵 |[Codepen](https://codepen.io/ukscrlno-the-typescripter/pen/vYqdMEQ)|
| 17 | PoWei |[Codepen](https://codepen.io/Po-Wei-Lai/pen/abgYJXa)|
| 18 | wind | [Codepen](https://codepen.io/wind7y/pen/jOjxyXo) |
| 19 | glen_69515| [Codepen](https://codepen.io/glenyaochih/pen/YzoLLEO)|
| 20 | kawa | [Codepen](https://codepen.io/z83xji6/pen/WNqJKJY?editors=1100) |
| 21 | anderson |[Codepen](https://codepen.io/goodmanbuild/pen/abgGxRV)|
| 22 | emmayo |[Codepen](https://codepen.io/emmayo/pen/WNqyQeX)|
| 23 | zaoannihao | [Codepen](https://codepen.io/ckhwdvrx-the-solid/pen/JjQZeXQ) |
| 24 | Ana | [Codepen](https://codepen.io/Ana-Wu/pen/mdZjJev?editors=1100) |
| 25 | yaoling.liang | [Codepen](https://codepen.io/Yao-Ling-L-/pen/WNqKxyz) |
| 26 | Mars | [Codepen](https://codepen.io/MarsKuo/pen/zYVLRLW) |
| 27 | hao jing | [Codepen](https://codepen.io/MarsKuo/pen/zYVLRLW) |
| 28 | chris | [Codepen](https://codepen.io/chris-chen-the-selector/pen/GRbLbPQ?editors=1100) |
| 29 | Amy(咂摳) | [Codepen](https://codepen.io/nnxucgmc-the-builder/pen/LYKwPYO) |
| 30 | Jainee | [Codepen](https://codepen.io/Jainee0110/pen/eYqYYmv) |
| 31 | KOMATSU PEI | [Codepen](https://codepen.io/Komatsu2021/pen/LEYvzmE?editors=1100) |
<!--
| No | Discord | [Codepen]() |
-->