這週的內容主題放在「表單」,這個讓設計師、工程師往往爭論不休、對使用者來說稀鬆平常的部分。除了表單標籤的必備成員外,也提到了手機版的呈現差異。接著進入 Bootstrap 4 的介紹,並試用一些官方文件內的範例。
第五週課程重點
input 表單標籤
form, input 和 submit 是表單必備的三個元素,可以跟後端伺服器溝通,進行 CRUD。
ID 可以用來作 focus 效果:label 的 for 對應到 input 的 id。
form 的 action 是告知傳送到的網址,也可以指定 method (表單只支援 GET 和 POST)
重設 CSS 和新增你的個人設定
CSS Reset 後,再加上全站設定 (CSS Base)
Bootstrap 4
BS4 內建 CSS Normalized ,不需要再 reset css 了。
BS4 本身是用 Sass 結構,且手寫樣式要和 Bootstrap CSS 分離。
經驗談
Tel 和 Date
在手機版上,和電腦版的效果是有差別的。若你越方便使用者輸入,那麼轉換率會比較穩定。
讓人驚艷的表單設計 Google,不過有些時候,為了自定樣式方便,會是「模擬」效果。
Select 的侷限
select 標籤預設是沒有辦法改變樣式的,尤其是其跳出選單的部份(手機版更是從螢幕下方出現)。如果你要修改跳出選單,那只能模擬個跳出選單 <div>,要動用到 JavaScript。
CSS Reset 和 Normalized
CSS reset :全部清空
CSS normalized:有一些預設樣式
工具類 utility Scss
可以嘗試做自己的 util.scss,讓自己有辦法抽離每個專案共用的 CSS。可以自定一些自己常用的 class。
切版練習結果
目前改放置到 Github Pages 上,歡迎大家前往觀看。
網址:https://github.com/andy922200/HexSchool2020Spring