:::
3-2-4 側邊欄的列表
3-2-5 顯示頁面 index.html 初步完成
- 目前顯示頁面看起來像這樣：
index.html完整語法範例：<!doctype html> <html lang="en"> <head> <title>校園日誌</title> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS v5.3.1 --> <link href="/node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <header> <!-- place navbar here --> <nav class="navbar navbar-expand-md navbar-dark bg-info mb-5"> <div class="container-fluid"> <a class="navbar-brand" href="/">XX國小學校日誌</a> <button class="navbar-toggler d-lg-none" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavId" aria-controls="collapsibleNavId" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="collapsibleNavId"> <ul class="navbar-nav me-auto mt-2 mt-lg-0"> <li class="nav-item"> <a class="nav-link active" href="#">校園日誌</a> </li> <li class="nav-item"> <a class="nav-link" href="#">榮譽榜</a> </li> <li class="nav-item"> <a class="nav-link" href="#">媒體新聞</a> </li> </ul> <form class="d-flex my-2 my-lg-0"> <input class="form-control me-sm-2" type="text" placeholder="搜尋文章"> <button class="btn btn-warning my-2 my-sm-0 text-nowrap" type="submit">搜尋</button> </form> </div> </div> </nav> </header> <main> <div class="container"> <h3>所有文章</h3> <div class="row"> <div class="col-md-9"> <div class="row"> <div class="col-md-9"> <h3><a href="#">資訊組Line服務上線</a></h3> <p>撰稿、拍照：陳老師</p> <p>2023-06-30 點閱數：4</p> <p>隨著科技發展，Line已成為大家手機裡的必備軟體。為了提供更高效、便捷的校園服務，六月三十日，資訊組推出Line官方帳號，除了可以自動回覆問題外，還能提供最新公告與資訊。是不是常在學校網頁裡迷失方向，找不到想要的資訊？官方帳號將學生常面臨問題設置在精選，更方便獲取所需資訊，快速解決疑問，打造超高...</p> </div> <div class="col-md-3"> <img src="https://blog.tcust.edu.tw/uploads/20230711/2b5498cf-a3d7-90ed-57aa-0048afb0bbaa.png" alt="" class="img-thumbnail" style="object-fit: cover; width: 100%; height: 200px;"> </div> </div> </div> <div class="col-md-3"> <ul class="list-group"> <li class="list-group-item list-group-item-action d-flex justify-content-between align-items-center active"> 2023 <span class="badge bg-success badge-pill">98</span> </li> <li class="list-group-item list-group-item-action d-flex justify-content-between align-items-center"> 2022 <span class="badge bg-success badge-pill">3623</span> </li> <li class="list-group-item list-group-item-action d-flex justify-content-between align-items-center"> 2021 <span class="badge bg-success badge-pill">3567</span> </li> </ul> </div> </div> </div> </main> <footer> <!-- place footer here --> </footer> <!-- Bootstrap JavaScript Libraries --> <script src="/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script> </body> </html>- 實際上課範例：
<!doctype html> <html lang="en"> <head> <title>Title</title> <!-- 必要的 meta 資訊 --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- 載入 Bootstrap v5.3.1 --> <link href="/node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <header> <!-- 導覽列 --> <nav class="navbar navbar-expand-md navbar-dark bg-info mb-3"> <div class="container-fluid"> <a class="navbar-brand" href="/">龍崎國小學校日誌</a> <button class="navbar-toggler d-lg-none" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavId" aria-controls="collapsibleNavId" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="collapsibleNavId"> <ul class="navbar-nav me-auto mt-2 mt-lg-0"> <li class="nav-item"> <a class="nav-link active" href="#">校園日誌</a> </li> <li class="nav-item"> <a class="nav-link" href="#">榮譽榜</a> </li> <li class="nav-item"> <a class="nav-link" href="#">媒體新聞</a> </li> </ul> <form class="d-flex my-2 my-lg-0"> <input class="form-control me-sm-2" type="text" placeholder="請輸入關鍵字"> <button class="btn btn-warning my-2 my-sm-0 text-nowrap" type="submit">搜尋</button> </form> </div> </div> </nav> </header> <main> <div class="container"> <h3>所有文章</h3> <div class="row"> <div class="col-md-9"> <!-- 圖文一則 --> <div class="row"> <div class="col-md-9"> <h3><a href="#">慈科大赴星海外交流 跳脫框架解讀事物</a></h3> <p>張玉佳 梁曉君 周正陽 新加坡報導</p> <p>2023-07-12 點閱數：39</p> <p>您對幸福人生的定義是什麼呢？趁著暑假，慈濟科技大學師生到海外交流，其中有一站到了新加坡，帶隊的人文室主任謝麗華，有一場分享，主題就是「幸福人生會解讀」，透過周遭的溝通案例當例子，讓與會來賓，各有體會跟領悟。慈濟人文青年中心，300個座位無虛席。一段異國婆媳故事，詼諧有深意。慈科大人文室主任 謝麗華：「這個洋媳婦就抱怨，...</p> </div> <div class="col-md-3"> <img src="https://blog.tcust.edu.tw/uploads/20230712/4ec76777-2fd5-fb66-cc46-a492cbe2d217.jpg" class="img-thumbnail" alt="" style="object-fit: cover; width: 100%; height: 200px;"> </div> </div> </div> <div class="col-md-3"> <ul class="list-group"> <li class="list-group-item d-flex justify-content-between align-items-center active"> 2023 <span class="badge bg-success badge-pill">98</span> </li> <li class="list-group-item d-flex justify-content-between align-items-center"> 2022 <span class="badge bg-success badge-pill">123</span> </li> <li class="list-group-item d-flex justify-content-between align-items-center"> 2021 <span class="badge bg-success badge-pill">350</span> </li> </ul> </div> </div> </div> </main> <footer> <!-- 頁尾 --> </footer> <!-- 載入 Bootstrap JavaScript --> <script src="/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script> </body> </html>
