:::

3-2-3 設計文章版面

  1. 文章分為左右兩邊,約 9:3,左邊文字,右邊圖片
  2. 快速語法:
    .row>.col-md-9+.col-md-3

    可產生

    <div class="row">
      <div class="col-md-9">文章標題摘要</div>
      <div class="col-md-3">文章圖片</div>
    </div>

     

  3. 填入測試內容,如:
    <h3><a href="#">資訊組Line服務上線</a></h3>
    <p>撰稿、拍照:陳老師</p>
    <p>2023-06-30 點閱數:4</p>
    <p>隨著科技發展,Line已成為大家手機裡的必備軟體。為了提供更高效、便捷的校園服務,六月三十日,資訊組推出Line官方帳號,除了可以自動回覆問題外,還能提供最新公告與資訊。是不是常在學校網頁裡迷失方向,找不到想要的資訊?官方帳號將學生常面臨問題設置在精選,更方便獲取所需資訊,快速解決疑問,打造超高...</p>

     

  4. 插入圖片:

    <img src="圖片路徑" alt="">

     

  5. 可加入 BootStrap5 的 .img-thumbnail (圖片縮圖),但只是為圖片加上圓角邊框,並不會真的縮圖,詳情請參考:https://bootstrap5.hexschool.com/docs/5.0/content/images/#image-thumbnails

    <img src="圖片路徑" alt="" class="img-thumbnail">
  6. 若欲使之真的縮圖,所以,自行加入CSS語法控制之:
    <img src="圖片路徑" alt="" class="img-thumbnail" style="object-fit: cover; width: 100%; height: 200px;">
    1. object-fit 用來做區塊填滿設定,常用值有 cover(將圖片塞滿可顯示空間)及 contain(在可顯示空間下顯示完整圖片),詳細可參考:https://tools.wingzero.tw/article/sn/61
    2. height: 200px; 用來限定圖片高度。
  7. 完整文章內容:
    <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>

:::

書籍目錄

展開 | 闔起

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

計數器

今天: 1556155615561556
昨天: 2198219821982198
總計: 7326414732641473264147326414732641473264147326414