# 基本刻板 (index.html, main.css) [TOC] ## 建立基本 index.html 並導入外部檔案 - Bootstrap v5.3 - link: `https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css` - script: `https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js` - （script 建議置於 body 區塊內最底） - Font-Awesome v4.7 - link: `https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css` - 自行建立空白 main.css 並導入 (link) ```xml= <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" rel="stylesheet"> <link href="assets/main.css" rel="stylesheet"> <title>Home</title> </head> <body> <!-- TODO --> <script src="assets/bootstrap-5.3.0-alpha2-dist/js/bootstrap.bundle.min.js"></script> </body> </html> ``` ## 頁面基本架構 我們的頁面分成以下的區塊： - 背景 (banner) - 霧面區塊 (medium) - 內容區塊 (container) ![](https://hackmd.io/_uploads/SJiTu6wU3.png) ## container 置中 主要的內容會放在`container`裡面，我們希望`container`上下左右置中，所以我們會需要運用到之前**position置中**的語法，以下是置中語法的介紹 Position講義：[position 位置](/fQOtNvRmQ2ypJ_e96-QBpA) HTML基本架構： ```xml= <body> <!-- TODO: 置中這個 div --> <div class="container"> <!-- 內容區塊 --> </div> </body> ``` CSS基本架構： ```css= *{ padding: 0; margin: 0; } html, body{ width: 100%; height: 100%; } ``` ## container 區塊架構 我們會在 container 區塊放入以下 3 個內容： - time 區塊 - name 區塊 - to-do-list 區塊 - to-do-list 項目 - to-do-list 控制按鈕 **提示：** - container 有固定的高度（在沒有任何待辦事項的時候依然還有高度） - time, name 區塊裡面的文字最好用一個標籤包起來，可以用`p`標籤或是`span`標籤 - 我們希望三個區塊的排列是直的，而且希望在垂直方向上置中，所以會用到以下的語法： :::info `d-flex`：將一個標籤設為flex屬性。 `flex-column`：將flex區塊的物件變成直向排列。 `justify-content-center`：將flex區塊底下的標籤在主軸方向上置中。 ::: ```xml= <!-- container-內容區塊 --> <div> <!-- time區塊 --> <div></div> <!-- name區塊 --> <div></div> <!-- to-do-list-block區塊 --> <div></div> </div> ``` ![](https://hackmd.io/_uploads/r12zspwUh.png =70%x) ## to-do-list-block架構 這個區塊包含了以下內容： - to-do-list：顯示待辦事項的區塊 - to-do-list button：包含各種to-do-list的功能的button，有新增待辦事項，顯示/隱藏已完成的待辦事項 **需求**：將to-do-list區塊跟按鈕區塊垂直排列，並且控制適當的間距。 **提示**：可以在to-do-list-block的區塊上設定`d-flex`，並且使用`flex-column`垂直排列。 HTML架構： ```xml= <!-- to-do-list-block --> <div class="to-do-list-block"> <!-- to-do-list --> <div class="to-do-list"></div> <!-- to-do-list按鈕 --> <div></div> </div> ``` ![](https://hackmd.io/_uploads/HJhzkJOI3.png =90%x) ## to-do-list 列表架構 每一個to-do-list的事項都是一個標籤，裡面包含一個按鈕和一段說明文字，再將所有的 to-do 事項放進一個標籤 - to-do-list(父層區塊標籤)：包含所有 to-do 事項 - to-do-list-item - 完成項目的按鈕 - 文字內容區塊 ![](https://hackmd.io/_uploads/SJ5xHAvU2.png) * 提示 * 可以在lit-item上設定flex排版方式，使按鈕跟文字水平並排 * 或是使用`span`標籤，因為`button`標籤可以跟`span`標籤並排 ```xml= <div class="to-do-list"> <!-- 第一個 to do 項目 --> <div class="list-item"> <button></button> <p></p> </div> <!-- 第二個 to do 項目 --> <div class="list-item"> <button></button> <p></p> </div> <!-- 第三個 to do 項目 --> <div class="list-item"> <button></button> <p></p> </div> </div> ``` ## Checkpoint * 到這邊為止是6/3的進度 * 提供參考的檔案給大家(可能有略微不同) :::spoiler index.html ```xml! <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="assets/main.css"> </head> <body> <!-- banner --> <!-- medium --> <!-- container --> <div class="container d-flex flex-column justify-content-center"> <div class="time"><p>This is the current time</p></div> <div class="name"><p>Your name</p></div> <!-- to-do-list-block --> <div class="to-do-list-block"> <!-- to-do-list --> <div class="to-do-list"> <div class="list-item d-flex justify-content-center"> <button class="button1"></button> <p class="p-0 m-0">示範文字</p> </div> <div class="list-item d-flex justify-content-center"> <button class="button1"></button> <p class="p-0 m-0">示範文字</p> </div> <div class="list-item d-flex justify-content-center"> <button class="button1"></button> <p class="p-0 m-0">示範文字</p> </div> </div> <!-- to-do-list按鈕 --> <div class="to-do-list-button"></div> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> </body> </html> ``` ::: :::spoiler main.css ```css! * { padding: 0; margin: 0; } html, body { width: 100%; height: 100%; } .container { height: 100%; } button { min-width: 20px; height: 20px; } ``` ::: ## to-do-list 按鈕架構 說明：使用一個標籤包三個按鈕，再讓三個按鈕並排 - 父層標籤：裝三個按鈕 - 新增 - 切換模式 - 開啟設定 提示：使用`flex`可以讓標籤並排 HTML架構： ```xml= <div> <button>新增</button> <button>隱藏/顯示已完成項目</button> <button>設定</button> </div> ``` ## to-do-list button：新增項目 說明：點擊可以跳出新增項目的 modal，並於輸入框中輸入項目內容，包含**取消**與**儲存**按鈕。 :::info Modal 元件參考文件： [Bootstrap (原文)](https://getbootstrap.com/docs/5.3/components/modal/) [六角學院 (繁中)](https://bootstrap5.hexschool.com/docs/5.1/components/modal/) ::: - 參考 modal 該元件用法，並設計輸入框和操作按鈕 ![](https://hackmd.io/_uploads/SyMQ_0wU2.png =80%x) **提示：** - Modal 觸發按鈕的 `data-bs-target` 屬性需指向要開啟的 modal 區塊 `id`，範例中為 `#addItemModal`（`#` 為 ID 選取器，id 本身為 `addItemModal`） - 按鈕中可加上 `data-bs-dismiss="modal"` 屬性，點擊後自動關閉該 Modal 區塊 - 按鈕圖示可直接於 `class` 中使用 Font-Awesome 的 Icon ```xml= <!-- Modal 觸發按鈕 --> <button type="button" class="fa fa-plus btn btn-none p-0 m-0" data-bs-toggle="modal" data-bs-target="#addItemModal"></button> <!-- Modal 元件本體 --> <div class="modal fade" id="addItemModal" tabindex="-1"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h1 class="modal-title fs-5 text-dark" id="addItemModalLabel">新增待辦事項</h1> <button type="button" class="btn-close" data-bs-dismiss="modal"></button> </div> <div class="modal-body"> <!-- TODO: 待辦項目輸入 --> </div> <div class="modal-footer"> <!-- TODO: 取消與儲存按鈕 --> </div> </div> </div> </div> ``` ## to-do-list button：切換模式 說明：透過點選按鈕，選擇是否要看到已完成的待辦事項。此部分先有按鈕畫面即可，下次上課再用javascript達到這個效果 ## to-do-list button：開啟設定 說明：點擊可以開啟進行設定的 offcanvas，下面有 offcanvas 的參考文件 :::info Offcanvas 元件參考文件： [Bootstrap (原文)](https://getbootstrap.com/docs/5.3/components/offcanvas/) [六角學院 (繁中)](https://bootstrap5.hexschool.com/docs/5.1/components/offcanvas/) ::: - 參考 offcanvas 該元件用法，並在 offcanvas 中加入輸入框和按鈕，類似於之前做過的表單（form） ![](https://hackmd.io/_uploads/Hyg7ZCwU3.png =50%x) **提示：** - Offcanvas 觸發按鈕的 `data-bs-target` 屬性需指向要開啟的 offcanvas 區塊 `id`，範例中為 `#sidebar`（`#` 為 ID 選取器，id 本身為 `sidebar`） - 按鈕中可加上 `data-bs-dismiss="offcanvas"` 屬性，點擊後自動關閉該 Offcanvas 區塊 - 按鈕圖示可直接於 `class` 中使用 Font-Awesome 的 Icon ```xml= <!-- offcanvas 觸發按鈕 --> <button class="fa fa-cog btn btn-none p-0 m-0" type="button" data-bs-toggle="offcanvas" data-bs-target="#sidebar" id="settingBtn"> </button> <!-- offcanvas 元件本體 --> <div class="offcanvas offcanvas-start" tabindex="-1" id="sidebar"> <div class="offcanvas-header"> <h5 class="offcanvas-title" id="sidebarLabel">設定</h5> <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button> </div> <div class="offcanvas-body setting-input-group"> <!-- TODO: 使用者名稱輸入、背景圖片主題輸入、儲存按鈕、重設按鈕... --> </div> </div> </div> ``` ## 背景圖片 (banner) 說明：頁面基本架構中banner的部分 需求： 1. 用一個div標籤呈現(不用body標籤是因為加上透明後，body內的所有標籤都會變透明) 2. 背景滿版 3. 模糊處理，下方為模糊的範例css程式碼，括號內的數值越大越模糊 ```css= backdrop-filter: blur(20px); ``` 4. 調整透明度（會顯示出背後元素的顏色） 若要讓背景圖片顏色呈現較深可將背後元素（此處應為`body`）設為黑色，反之設為白色 - 不透明度：1（無調整） ![](https://hackmd.io/_uploads/rybRNJdU3.png) - 不透明度：0.5，父層背景：黑色 ![](https://hackmd.io/_uploads/BJWA4JuUh.png) - 不透明度：0.5，父層背景：白色 ![](https://hackmd.io/_uploads/SkZCNJOUn.png) 補充： Background語法講義：[背景](/K5SDDIabTtajE7nTi1Ep1A) **提示：** - 圖片來源可使用 Unsplash 免費高畫質圖庫，並透過指定主題隨機產生圖片 - URL 格式：`https://source.unsplash.com/1600x900/?{主題名稱}` - URL 範例：`https://source.unsplash.com/featured/?nature,water` - 不同主題可以使用逗號`,`隔開 ## 霧面區塊 (medium) 說明：頁面基本架構中的medium區塊 需求： 1. 用一個獨立的div標籤呈現，並置於banner以及container區塊中間 2. 設定長寬隨頁面大小變化 3. 用position讓div置中 4. 模糊處理，下方為模糊的範例css程式碼，括號內的數值越大越模糊 ```csss= backdrop-filter: blur(20px); ``` **提示：** * 要多大的區塊 * 如何形成霧面 * 如何讓區塊形狀更自然 :::danger 標籤在文件中的排列順序會影響標籤在網頁上的呈現高低，因此我們要將較靠近底部的標籤寫在較前面。 :::spoiler 實際結果 banner -> medium -> container :::