自我成長

六角學院切版直播班2020秋季Week5

By Jiang 20 November 2020
六角學院切版直播班2020秋季Week5

Photo by Ben Kolde on Unsplash

這週手刻了一個後台表單設計，真的好難啊，頭快要炸了，目前還不太會什麼 OOCSS BEM之類的，Bootstrap元件也還不會使用，所以很單純地用自己這幾週所學的會的語法拼湊出來，上周的 gulp & scss也都還沒搞清楚，這周末要繼續拚之前還沒搞懂的東西（ 更新 11/21 順利地 git build -> git deploy)，但上傳過程大概搞了四個小時，中間一直有問題，一直失敗一直找問題點，找不到問題沒有上傳就更焦慮，一直卡在git build & git deploy，總覺得就是沒有學會才會這樣，心裡想著一定要上傳成功，參考了Ray助教的 Gulp教學，看了大概十次影片，最後終於成功了！！！這大概是這週最有成就感的事情吧，對於gh-pages 又多了一層了解！原來開發者最有成就感的事情就是順利把問題解決（筆記）！最後發現一直出錯是因為.git檔案沒刪掉，還有一堆瑣碎的小問題，還待釐清，另外，出錯的問題點一直圍繞在sudo，sudo你真的好煩呀！

第五週 - 後台表單設計

本週訓練菜單

slack 問題集

  • component 與 util 的拆分
<div class="card">
   <div class="card__item">
</div>

<div class="fz-26 mb-3 mb-md-4 w50 fon-xl font-sm-xl'>
  <div class="w100 d-flex"></div>
</div>

Bootstrap4

補充資料

11/18 助教切版直播影片、11/18 助教切版直播筆記

Material design system

本週作業 Icon 導入 Material design system icon

  • 常見圖示使用技巧 以 Material Icon 為例，載入CDN 
    <link href="<https://fonts.googleapis.com/icon?family=Material+Icons>" rel="stylesheet">

    加入到網頁的寫法有兩種

    <span class="material-icons">
    accessibility
</span>

    或是

    <i class="material-icons">
    accessibility
</i>

input 表單標籤

  • input 常見種類與屬性介紹
  • form、input、submit 三劍客
    • w3schools
    • 讓人驚艷的表單設計 Google
    • name 屬性為後端傳值、id 為 label 所用
    • method="post"傳送給後端
    • button是用來和js互動用 無法送出表單
    • submit是可以送出表單
    • name="account” 是for後端
    • label for id 提升使用體驗
  • 設計響應式時需注意的項目(date、tel)
    • input type="date” 瀏覽器的資源度不一樣，最好不要使用
    • 可以找套件 calendar jqueryui datepicker
    • 日期套件
  • 屬性：value、readonly、disabled
    • readonly 只能看不能改，唯讀
  • select option 在 mobile 的侷限
    • 無法改動樣式的，辦不到，除非自己寫 div css js

css reset 差異

  • meyerweb CSS Reset meyerweb 全部清空
  • normalize normalize 會保留基本網頁樣式 (BS4使用)
  • 共通點 ex margin:0;
  • 用 BS4 的話，就不需要再次載入 CSS Reset

CSS Base

用 BS4 的話，就不需要再次載入 CSS Reset

載入 BS4，展示一個 btn

  1. 載入css
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
        integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
  1. 載入js
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
  1. 實做測試看是否有載入bs成功
<a href="#" class="btn btn-primary">按鈕</a>

Utilities, flex, spacing

BS4 元件介紹

清除 BS4 ul li 樣式

  • ul 移除逗點
    • 清除列表實心圓內容 BS4：list-unstyled

Bootstrap 表單 + Btn

<input type="submit" value="送出">
  • input一定要搭配form標籤

手寫 SCSS 結構參考

@import "variable";// 變數  
@import "reset";  // reset.css  
@import "base"; // 全站設定
@import "util"; // 工具類 class，.mb-1、.pr-3

// layout 共同框架,第一層
@import "layout/header";
@import "layout/footer";
@import "layout/menu";
@import "layout/aisde";

// 頁面設計
@import "pages/index";     
@import "pages/cart";

老師解析

  • 容器
  • 元件
  • 第三週主線

第五週主線任務 圖片空間 、 Material design system icon

ICON 載入教學

  • 請觀看卡斯伯老師在上一梯的影片介紹，了解這版型的 ICON 要如何透過 CSS 載入，時間點為 38 分 00 秒

作業等級表

  1. LV1：做一頁版型，並有設計 Modal 功能

第五週每日任務

  • 11/16 Bootstrap元件
  • 11/17 Forms 元件
  • 11/18 元件組合 card + media object
  • 11/19 元件 + 通用類別
  • 11/20 互動視窗 Modal

第五週小組任務

第五週小組任務一 modal效果 第五週小組任務二 表格標籤(table、th、tr、td) 第五週小組任務三 版型佈局

comments powered by Disqus