--- ###### tags: `web111a` `程式筆記` `RWD` --- # RWD * 時間：2022/5/5 * 老師：麥睿恩 ## 環境建置 ### Sublime * 需先安裝 Package Control 才可以安裝套件 * ctrl + shift + P :arrow_right:輸入package control: install packages，特別留意每一次安裝都要執行這一步 * 推薦套件參考老師講義(以下節錄) * ChineseLocalization: 選單中文介面,有日語、簡中、繁中三種語言。 * ConvertToUTF8:頁面內容編碼。 * Emmet: 可以用代碼方式快速建立頁面語法結構。 * jQuery: 針對 jQuery 程式碼提供較佳的高亮度函式顯示與程式片段。 * SublimeCodeIntel: 智慧型語法、函式自動完成的套件,支援多種語言。 * JsFormat: 格式化 Javascript/JSON 程式碼的套件。 * SublimeLinter: 檢查程式的基礎套件,主要用來檢查程式碼的語法問題。 * ColorPicker :調色盤,按 ctrl+shift+c 就可以叫出色盤自由選色囉! * AutoFileName:輸入路徑或 url 時,自動抓取檔案路徑 * SideBarEnhancements: 加強側邊列(檔案與資料夾)功能的套件。 * BracketHighlighter: 把各種括號符號、標記特別高亮度顯示出來。 * Color Highlighter: 有顏色代碼的地方用顏色標示出來。 * CSS3:可以支援相關新屬性的加入,讓建立更有效率。 * Auto-Save:可以設定頁面自動儲存。 * HTML5:可以支援相關新屬性的加入,讓建立標籤更有效率。 * 額外再加裝套件 * Bootstrap 4x Auto complete * Bootstrap 4x Snippets * 確認安裝 * 工具:arrow_right:指令面板:arrow_right:package control: list packages * 設定快捷鍵 * 設定:arrow_right:快速鍵設定 * 左方預設、右方自訂 * 找到 F12 改成 open_in_browser * 自動備份 * 設定:arrow_right:package settings:arrow_right:auto-save>settings-user * 先到 settings-default 複製指令再貼到 settings-user * auto_save_on_modified 改成 true * auto_save_delay_in_seconds 改 3 * 設定排版、增加多層 * 設定:arrow_right:快速鍵設定 * 將老師提供的設定檔貼上，特別留意要貼在 `[]` 中，指令中間記得 `,` ```json= [ { "keys": ["ctrl+shift+f"], "command": "reindent" , "args": {"single_line": false}}, { "keys": ["ctrl+shift+g"], "command": "emmet_wrap_with_abbreviation" } ] ``` * 快速鍵衝突 * ColorPicker 以及 ConvertTo UTF8 * 設定:arrow_right:瀏覽資源包:arrow_right:找到convertTo UTF8:arrow_right:編輯 Default(Windows).sublime-keymap * ctrl + shift + c 改成 ctrl + shift + alt + c 或是你自己習慣的快捷鍵 * 確認是否解決衝突問題 * 輸入 ctrl + shift + c 看看 color picker 是否有叫出來 ### 測試 1. 新增檔案 1. 右下角確認語言為 html 1. 快捷鍵 ctrl + shift + P 輸入 syntax:HTML 1. emmet 1. `!` + `tab` 1. 第一次需先手動儲存，之後會自動備份（儲存） ## HTML 5 HTML 是一種標籤語言，逐行解釋如下 ```htmlembedded= <!DOCTYPE html> 頁面文件類型宣告，讓瀏覽器辨別該使用版本的HTML標籤定義來呈現，HTML5 就是用這一行，可以找比較舊的網站看看原始碼 HTML4 以前會長得不太一樣 <html lang="en"> 頁面文件語言 <head> 頁面文件頁頭區域，很重要，讓瀏覽器判讀網頁內容，內含標題、檢視、樣式、描述、互動變化等 <meta charset="UTF-8"> 網頁編碼 <meta http-equiv="X-UA-Compatible" content="IE=edge"> IE 支援設定 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 響應式網頁一定要這一行 <title>Document</title> 網頁標題 </head> <body> <!-- 網頁內容顯示的地方 所有瀏覽者看到的內容都是放在這兒 --> </body> </html> ``` ## 前端三要件 * HTMl 骨架、內容 * CSS 美化 * JS 網頁互動、判斷、運算等 * JQuery 是 JS 函式庫 Bootstrap 是上述組合，幫助快速完成版面建置與功能安排。其他框架如 Vue.js、react.js、Angular.js 等 ## emmet 快捷鍵 * 包覆 tag * 選取字串後 ctrl + shift + g 輸入 h1 :::info VS Code 需要額外安裝 Emmet Keybindings 套件，快捷鍵也有所不同 ![vs code emmet shortcut](https://i.imgur.com/9i0PBjO.png) ::: 範例演示如下(VS code 畫面) ![example](https://i.imgur.com/RoSvAqs.png) ## 假文假圖 * 假文產生器：lorem * 假圖： * 利用 [pexels 圖庫](https://www.pexels.com/zh-tw/)，提供創用 CC 授權的文片 * fakeimg.pl ## 練習1 ```css= width 寬度 margin 間距 color 文字顏色 letter-spacing 字距 line-height 行高 text-align: justify 左右對齊 text-indent 首行縮排 ``` ### 兩欄式排版 其中一種寫法 ```css= img { float: left; } p { float: right; } ``` ## [bootstrap](https://getbootstrap.com/) :::info 最新版本 `v5.1.3`，目前市占率 `v4.6`，本課以 `v4.6` 教學 ::: ### 使用方式 * :heavy_check_mark:本課程使用：Download 選擇包含 CSS 及 JS 的，要放在你網頁的根目錄 * [CDN](https://getbootstrap.com/docs/4.6/getting-started/download/#jsdelivr) * VS code 可以用 cdnjs 幫你抓 * 使用[文件範本](https://getbootstrap.com/docs/4.6/getting-started/introduction/#starter-template)，其實也是 CDN 只是他幫你寫好在 HTML 裡 如果你是 Download 的話，需要自己在 HTML 引入，放在 `<head></head>` 裡 ```htmlembedded= <link rel="stylesheet" href="bootstrap-4.6.1-dist/css/bootstrap.min.css"> <script src="bootstrap-4.6.1-dist/js/bootstrap.min.js"></script> ``` #### 使用文件範本自訂程式碼片段 Sublime install package: mysnippets 工具:arrow_right:外掛程式開發:arrow_right:新增程式碼片段，結構如下： ```htmlembedded= <snippet> <content><![CDATA[ Hello, ${1:this} is a ${2:snippet}. ]]></content> <!-- Optional: Set a tabTrigger to define how to trigger the snippet --> <!-- <tabTrigger>hello</tabTrigger> --> <!-- Optional: Set a scope to limit where the snippet will trigger --> <!-- <scope>source.python</scope> --> </snippet> ``` 將[ Bootstrap Starter template ](https://getbootstrap.com/docs/4.6/getting-started/introduction/#starter-template)放在`<content>` 的`[]`中，就是第3行 其中 `<tabTrigger>` 中代表快速鍵，以下代表打 `bs4` + `tab` 就會出現你貼上的程式碼片段 ```htmlembedded= <tabTrigger>bs4</tabTrigger> ``` :::info 記得存檔、記得存檔、記得存檔 存在預設路徑`...\Packages\User` 建議在此建立一個與外掛同名的資料夾(例:Mysnippets)，儲存的檔案名稱要與`<tabTrigger>`內的自訂名稱相同喔!! ::: ## CSS 排版 * float * display * position * flexbox * grid ### bootstrap 排版 * bootstrap 貼心的幫你整合了 flexbox 和 grid * 預設為 12 grid ![960 grid](https://i.imgur.com/NNib2o8.png) 圖源：[960 Grid Demo](https://960.gs/demo.html) 基本架構最外層 container 底層 row 底層 col(注意：要先有row才能有col) ```htmlembedded= <div class="container"> <div class="row"> <div class="col">One of three columns</div> <div class="col">One of three columns</div> <div class="col">One of three columns</div> </div> </div> ``` :::info 補充說明 `class`、`id` 是什麼？ > id 屬性是讓你為元素命名的，整個頁面中的元素名稱也不應有重複 > > class 屬性則可將元素歸為某特定類別，通常也會有很多元素屬於同一種類別 (意即 class 屬性值相同。) > > * 如果你想指定某特定單一元素的樣式，則應使用 id。 > * 若有很多個元素皆有相同樣式，則可使用 class。 > > —— from [CSS FAQ](https://developer.mozilla.org/zh-TW/docs/Learn/CSS/Howto/CSS_FAQ) ::: 根據設備解析度的不同斷點 | class name | width | 支援 | | ---------- | ---------- | ----------- | | col | all device | all version | | col-sm | >= 576px | all version | | col-md | >= 768px | all version | | col-lg | >= 992px | all version | | col-xl | >= 1200px | all version | | col-xxl | >=1400px | v5 以後 | 白話的說以下設定原先佔據滿版(12 格)的寬度，但是當螢幕大於 992px 時，該區塊會佔據 8 格(12 格中的 8 格) ```htmlembedded= ... <div class="col-12 col-lg-8"> </div> ... ``` ### 測試 RWD Windows：`F12` 或右鍵 :arrow_right: 檢查 ![測試 RWD](https://i.imgur.com/M0WYV7S.png) ### 預設樣式 class ```css= .display-4 .text-justify .text-primary 等等 ``` ### 圖片重點整理 rounded:加上圓角效果 rounded-circle:加上橢圓形輪廓 img-fluid:響應式影像 img-thumbnail:縮圖而且是響應式影像效果 ![rwd image](https://i.imgur.com/M564mDa.jpg) --- * 時間：2022/5/19 ## media query [我懶得寫，放上之前筆記](/E00jU6IDQ0G4F0hm5B_CwA#Media-Queries) ## 切版練習：gogoro ![gogoro 2020](https://i.imgur.com/yAhV1i3.jpg) 大致架構如下： ```htmlembedded= <div class="container-fluid"> <div class="row"> <div class="col"> <img src="" alt="" class="img-fluid"> </div> </div> </div> <div class="container"> <div class="row"> <div class="col"> <h1>welcome</h1> </div> </div> </div> <div class="container-fluid"> <div class="row"> <div class="col bg-info jumbotron"></div> </div> </div> ``` > 可以透過 `jumbotron` 幫你把版面先撐起來，注意 Bootstrap 4 以前才有 :::spoiler bootstrap 5 jumbotron 替代寫法 ```htmlembedded= <div class="mt-4 p-5 bg-primary text-white rounded"> <h1>Jumbotron Example</h1> <p>Lorem ipsum...</p> </div> ``` ::: container 跟 container-fluid 的差別 > .container-fluid, which is width: 100% at all breakpoints ![container 跟 container-fluid 的差別](https://i.imgur.com/lSF62UD.png) ### bootstrap 預設間距怎麼清除？ 用 `m-0`、`p-0`，但首先你要先搞懂是誰產生的內距、外距 ```htmlembedded= <div class="container-fluid"> <div class="row"> <div class="col p-0"> <img src="http://fakeimg.pl/2500x300" alt="banner image" class="img-fluid"> </div> </div> </div> ... ``` ### 中間區塊排版 ```htmlembedded= <div class="container my-3 text-center"> <div class="row"> <div class="col"> ... </div> </div> </div> ``` > `my-3` y 軸 margin 3 個單位，不是 `px` 喔，關於單位請參考下圖 > ![rem](https://i.imgur.com/uotEHZC.png) ## 切版練習：profolio ![profolio](https://i.imgur.com/0zKep26.jpg) 大腸包小腸，row 裡面還有 row ```htmlembedded= <div class="container"> <div class="row"> <div class="col"> ... </div> <div class="col"> <div class="row"> <div class="col-3">...</div> <div class="col-3">...</div> <div class="col-3">...</div> <div class="col-3">...</div> </div> <div class="row"> <div class="col-3">...</div> <div class="col-3">...</div> <div class="col-3">...</div> <div class="col-3">...</div> </div> <div class="row"> <div class="col-3">...</div> <div class="col-3">...</div> <div class="col-3">...</div> <div class="col-3">...</div> </div> <div class="row"> <div class="col-3">...</div> <div class="col-3">...</div> <div class="col-3">...</div> <div class="col-3">...</div> </div> </div> </div> </div> ``` :::info 提問：為什麼不是 col 裡面再寫一組 container? 特殊排版才會這樣用，本例的版面單純，row>row 就可以符合要求 ::: ### 加上 RWD | desktop | tablet | phone | | -------- | -------- | -------- | | ![desktop](https://i.imgur.com/lW1d514.jpg) | ![tablet](https://i.imgur.com/1elxmK7.jpg) | ![phone](https://i.imgur.com/K84dCvv.png) | 注意 bootstrap 是 mobile first，結構如下 ```htmlembedded= <div class="container"> <div class="row m-2"> <div class="col-lg-4 col-md-12"> ... </div> <div class="col-lg-8 col-md-12"> <div class="row m-lg-2"> <div class="col-lg-3 col-md-6 my-2">...</div> <div class="col-lg-3 col-md-6 my-2">...</div> <div class="col-lg-3 col-md-6 my-2">...</div> <div class="col-lg-3 col-md-6 my-2">...</div> </div> <div class="row m-lg-2"> <div class="col-lg-3 col-md-6 my-2">...</div> <div class="col-lg-3 col-md-6 my-2">...</div> <div class="col-lg-3 col-md-6 my-2">...</div> <div class="col-lg-3 col-md-6 my-2">...</div> </div> <div class="row m-lg-2"> <div class="col-lg-3 col-md-6 my-2">...</div> <div class="col-lg-3 col-md-6 my-2">...</div> <div class="col-lg-3 col-md-6 my-2">...</div> <div class="col-lg-3 col-md-6 my-2">...</div> </div> <div class="row m-lg-2"> <div class="col-lg-3 col-md-6 my-2">...</div> <div class="col-lg-3 col-md-6 my-2">...</div> <div class="col-lg-3 col-md-6 my-2">...</div> <div class="col-lg-3 col-md-6 my-2">...</div> </div> </div> </div> </div> ``` ### 加上 lightbox 效果 * 引入相關檔案 * jquery.js * lightbox.js * lightboxshow.css * 加入 a tag，連結與圖片相同 * 運用 html5 中的 `data-` 屬性，a tag 上加入 `data-lightbox=""` * 同一組的 `data-lightbox` 要一樣，才能抓到上下頁 ```htmlembedded= ... <a href="./img1.png" data-lightbox="image"> <img src="/.img1.png"/> </a> ... ``` * 加上 prev, next, close icon * 將照片加到 /images 中，取名如下圖 * lightbox2 是用 `background-image`，沒辦法使用 fontawesome 取代，除非改寫他的 CSS prev ![prev](https://i.imgur.com/Pzvskpz.png) next ![next](https://i.imgur.com/E1Vjv9o.png) ### 最終呈現 [RWD 課堂練習 - portfolio](https://codepen.io/mitour/pen/wvydPmY) ## deploy [Netify](https://www.netlify.com/) ## table responsive table 的斷點是往下兼容 * `table-responsive` 全 * `table-responsive-sm` sm 以下 * `table-responsive-md` md 以下 * `table-responsive-xl` xl 以下 * `table-responsive-xxl` xxl 以下 ## embad-responsive Bootstrap 有針對 [embed 內容](https://getbootstrap.com/docs/5.2/helpers/ratio/#example)作響應式 :::info 此例為 Bootstrap 5 可能與 Bootstrap 4 寫法有所不同 ::: ```htmlembedded= <div class="ratio ratio-16x9"> <iframe src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" title="YouTube video" allowfullscreen></iframe> </div> ``` ### 自動播放？ 在 iframe 網址後面加上 `?&autoplay=1` 如果被瀏覽器檔，可以試試多加 `&mute=1` 參考：[Youtube Support](https://support.google.com/youtube/answer/171780?hl=zh-Hant#zippy=) ### 補充：[假影片](https://vimeo.com/?vcid=33587&utm_medium=cpc&utm_source=google&gclid=CjwKCAjwy_aUBhACEiwA2IHHQIuRElE-YKsljrQcUJRPtg7eEhfjqJiWvpuSohukjOYhpx878turexoCDX4QAvD_BwE&gclsrc=aw.ds) ## `@keyframs` 關鍵影格 至少需要兩格（起點、終點）才會動，有兩種方式呈現 * from...to * 0...100% ```css= .animation { animation: animate_width 3s; width: 100%; } @keyframes animate_width { from { width: 0; } to { width: 100%; } } ``` 搭配 javascript 讓文字也跟著動態顯示 ```javascript= let i = 0; let label = document.getElementById("label"); let loop; function ct() { if (i >= 100) { clearTimeout(loop); } else { i++; } label.innerHTML = `${i}%`; loop = setTimeout(ct, 20); } ct(); ``` 完整程式碼：[codepen](https://codepen.io/mitour/pen/eYVPGBv) ![progress bar animation](https://i.imgur.com/YPSnfxE.gif) :::warning 這是簡約版的，其實文字跟實際進度不太相符 :::