XOOPS輕鬆架 - 線上書籍

:::

PHP8入門
======

1. 文章分為左右兩邊，約 9:3，左邊文字，右邊圖片
2. 快速語法： 
    ```bash
    .row>.col-md-9+.col-md-3
    ```
    
    可產生
    
     
    ```markup
    <div class="row">
      <div class="col-md-9">文章標題摘要</div>
      <div class="col-md-3">文章圖片</div>
    </div>
    ```
3. 填入測試內容，如： 
    ```markup
    <h3><a href="#">資訊組Line服務上線</a></h3>
    <p>撰稿、拍照：陳老師</p>
    <p>2023-06-30 點閱數：4</p>
    <p>隨著科技發展，Line已成為大家手機裡的必備軟體。為了提供更高效、便捷的校園服務，六月三十日，資訊組推出Line官方帳號，除了可以自動回覆問題外，還能提供最新公告與資訊。是不是常在學校網頁裡迷失方向，找不到想要的資訊？官方帳號將學生常面臨問題設置在精選，更方便獲取所需資訊，快速解決疑問，打造超高...</p>
    ```
4. 插入圖片：
    
     
    ```markup
    <img src="圖片路徑" alt="">
    ```
5. 可加入 BootStrap5 的 `.img-thumbnail` （圖片縮圖），但只是為圖片加上圓角邊框，並不會真的縮圖，詳情請參考：<https://bootstrap5.hexschool.com/docs/5.0/content/images/#image-thumbnails>
    
     
    ```markup
    <img src="圖片路徑" alt="" class="img-thumbnail">
    ```
6. 若欲使之真的縮圖，所以，自行加入CSS語法控制之： 
    ```markup
    <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. 完整文章內容： 
    ```markup
    <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>
    ```

:::