{
"workbench.colorTheme": "Monokai",
// 控制字型大小 (以像素為單位)。
"editor.fontSize": 18,
// - 'bounded' (當檢視區縮至最小並設定 'editor.wordWrapColumn' 時換行).
"editor.wordWrap": "on",
// 控制編輯器是否應自動設定貼上的內容格式。格式器必須可供使用，而且格式器應該能夠設定文件中一個範圍的格式。
"editor.formatOnPaste": true,
// 使用滑鼠滾輪並按住 Ctrl 時，縮放編輯器的字型
"editor.mouseWheelZoom": true,
// 在儲存時設定檔案格式。格式器必須處於可用狀態、檔案不得自動儲存，且編輯器不得關機。
"editor.formatOnSave": true,
// 控制已變更之檔案的自動儲存。接受的值: 'off'、'afterDelay、'onFocusChange' (編輯器失去焦點)、'onWindowChange' (視窗失去焦點)。若設為 'afterDelay'，可以在 "files.autoSaveDelay" 中設定延遲。
"files.autoSave": "onFocusChange",
"files.associations": {
"*.tpl": "html"
},
// 指向 PHP 可執行檔。
"php.validate.executablePath": "D:/xampp/php/php.exe",
// 讓 tab 也可以自動完成
"editor.tabCompletion": "on",
}
Chinese (Traditional) Language Pack for Visual Studio Code ：中文介面phpfmt ：格式化PHP程式碼用，請加入設定：
// php executable path
"phpfmt.php_bin": "D:/xampp/php/php.exe",
// enable auto align of ST_EQUAL and T_DOUBLE_ARROW
"phpfmt.enable_auto_align": true,
// fixes visibiliy order for method in classes - PSR-2 4.2
"phpfmt.visibility_order": true,
// convert multistatement blocks into multiline blocks
"phpfmt.smart_linebreak_after_curly": true,
// Enable per-language
"[php]": {
"editor.formatOnSave": true
},
vscode-goto-documentation ：快速文件搜尋AutoFileName : 讓編輯器自動完成圖片或檔案路徑。Auto Rename Tag : 讓成對的標籤自動一起修改。Auto Close Tag : 讓標籤自動閉合的。Bootstrap 5 Snippets shrikant.bootstrap5：插入Bootstrap 5 語法片段。Bootstrap 5 & Font Awesome Snippets : 插入Bootstrap 5 或 Font awesome 語法片段。Prettier - Code formatter ：美化HTML、JavaScript、CSS...等格式器。
//singleQuote 使用單引號
"prettier.singleQuote": true,
//semi 結束是否加分號
"prettier.semi": false,
//printWidth 行寬
"prettier.printWidth": 120,
//tabWidth 縮排空幾格
"prettier.tabWidth": 2,
indent-rainbow ：以顏色標出縮排。Material Icon Theme ：精美的檔案圖示。PHP intelephense ：自動提示。Fake Image Snippet Collection ：假圖產生index.html
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>待辦清單</title>
</head>
<body>
</body>
</html>
viewport 的作用是告訴瀏覽器，目前裝置有多寬(或多高)，以便在縮放時有個基準。尤其當設定頁面寬度需自動調整時，如寬度100%或螢幕由垂直轉為水平， viewport 大小是一個根據。
// 指定螢幕寬度為裝置寬度，畫面載入初始縮放比例 100%
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
網頁寬度 width 通常設為手機寬度 device-width ，用意是適應各家裝置的大小，這樣寫CSS時就能放心的把版面寬度設為100%。
meta 標籤，及<title></title>來設定頁面名稱meta 標籤主要用於網頁的內容說明，以利自己或搜索引擎使用，有無 meta 標籤，並不影響網頁正常顯示，其最大目的在於提供網頁各種資訊及產生特殊效果。|
標題
|
<h1></h1>（1~6）除了作為標題外，一般也拿來當作網站的架構或大綱。 | ||||
| 段落 | <p></p> | 區塊容器 | <div></div> | 行內容器 | <span></span> |
| 換行 | <br> | 輸出標籤 | <pre></pre> | 引用 | <blockquote></blockquote> |
| 水平線 | <hr> | 註釋標籤 | <!--註釋--> | ||
<p>
<span style="margin-left: 2em;">
教育部發放400萬份，每份價值500元的「動滋券」，7月20日至7月26日登記抽籤，依身分證尾數單雙數分流。
</span><br>
但動滋券網站從凌晨起就被塞爆，許多民眾興匆匆上網登記，網頁無法正常運作，持續一片空白轉圈圈，最後顯示「無法連上這個網站」。
</p>
|
有序列表 |
無序列表 |
定義列表 |
|
<ol> <li>項目1</li> <li>項目2</li> </ol> |
<ul> <li>項目1</li> <li>項目2</li> </ul> |
<dl> <dt>項目名稱</dt> <dd>項目說明</dd> </dl> |
|
<table> <tr><th>表頭1</th><th>表頭2</th></tr> <tr><td>表格1</td><td>表格2</td></tr> </table> |
|
border="1" width="1920" 及表格| 是否完成 | 標題 | 到期日 | 優先順序 | 指派對象 |
|---|
cd D:\xampp\htdocs
npm init -y
npm install bootstrap@next
package.json 檔，此檔會紀錄我們這個專案會用到哪些前端套件，以及各個套件之間的相依性等資訊。@next 表示要裝最新的版本（有可能不是正式版），不加則會安裝最新的正式版本。node_modules 目錄，裡面就有我們要使用的前端套件。
npm install --save @fortawesome/fontawesome-free
index.html ：
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap.min.css" />
<script src="/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="/node_modules/@fortawesome/fontawesome-free/css/all.min.css" />
<title>待辦清單</title>
</head>
<body>
<!-- 省略-->
</body>
</html>
node_modules 下，且正式檔案一般都在 dist 目錄中bootstrap.bundle.min.js 可以取代 popper.min.js + bootstrap.min.js
<i class="fas fa-xxx"></i>
在 Visual Studio Code 中輸入 b5-row 按 Enter 可以快速產生語法。
.row 代表一個橫列，以確保裡面的欄位可以對齊、排序。
.col-sm 斷點前綴詞，後面接的是欄位寬度設定，預設滿版為12欄
若超過12欄，則會自動新增一個 .row
<div class="row">
<div class="col-sm-3">
<p>
日期：2021/03/13
</p>
</div>
<div class="col-sm-9">
<ul>
<li>今天到期：1</li>
<li>逾期：2</li>
</ul>
</div>
</div>
| 超小屏幕 <576px |
小屏幕 ≥576px |
中等屏幕 ≥768px |
大屏幕 ≥992px |
超大屏幕 ≥1200px |
特大屏幕 ≥1400px |
|
|---|---|---|---|---|---|---|
.container |
100% | 540px | 720px | 960px | 1140px | 1320px |
.container-sm |
100% | 540px | 720px | 960px | 1140px | 1320px |
.container-md |
100% | 100% | 720px | 960px | 1140px | 1320px |
.container-lg |
100% | 100% | 100% | 960px | 1140px | 1320px |
.container-xl |
100% | 100% | 100% | 100% | 1140px | 1320px |
.container-xxl |
100% | 100% | 100% | 100% | 100% | 1320px |
.container-fluid |
100% | 100% | 100% | 100% | 100% | 100% |
class=" col-sm-9 " 代表螢幕解析度≥576px時「右邊區域」佔了9欄
左右若想交換，就把2、7行對調一下即可。
表格
快速產生：在 Visual Studio Code 中輸入 b5-table 按 Enter 可以快速產生表格的語法。
<div class="table-responsive">
<table class="table">
...
</table>
</div>
導覽列
快速產生：在 Visual Studio Code 中輸入 b5-nav-default 按 Enter 可以快速產生表格的語法。(需修改 data-toggle 為 data-bs-toggle ，data-target 為 data-bs-target )
修改標題：超連結屬性練習連結位置href、框架位置target。
<img src="https://picsum.photos/1920/240?random=1" class="img-fluid" alt="我的代辦清單">
<!-- Image and text -->
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="/docs/5.0/assets/brand/bootstrap-logo.svg" alt="" width="30" height="24"
class="d-inline-block align-top">
Bootstrap
</a>
</div>
</nav>
.me-auto (bootstrap4 .mr-auto) 把空位放到右邊。.mx-auto 把空位平均分散到左右兩邊 。.ms-auto (bootstrap4 .ml-auto) 把空位放到左邊 。
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" href="#">回首頁</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">發布待辦事項</a>
</li>
</ul>