:::

3-2-5 顯示頁面 index.html 初步完成

  1. 目前顯示頁面看起來像這樣:
  2. 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>

     

  3. 實際上課範例:
    <!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>

     


:::

書籍目錄

展開 | 闔起

http%3A%2F%2Fcampus-xoops.tn.edu.tw%2Fmodules%2Ftad_book3%2Fpage.php%3Ftbsn%3D52%26tbdsn%3D1785

計數器

今天: 1458145814581458
昨天: 1416141614161416
總計: 7340105734010573401057340105734010573401057340105