:::

3-2-2-1 用橫向卡片來放文章

一、卡片基本用法

  1. BootStrap5的卡片(Card)有新的橫向功能:https://bootstrap5.hexschool.com/docs/5.0/components/card/#horizontal
  2. 橫向卡片的的基本架構語法為:
    <div class="card">
      <div class="row g-0">
        <div class="col-md-4">圖片</div>
        <div class="col-md-8">
          <div class="card-body">
            <h5 class="card-title">標題</h5>
            <p class="card-text">內文</p>
            <p class="card-text"><small class="text-muted">灰色小文字</small></p>
          </div>
        </div>
      </div>
    </div>
    

  3. 其中圖左文右的設定是靠.row.col等網格工具達成的,關於網格工具可參考:https://bootstrap5.hexschool.com/docs/5.0/layout/grid/
    <div class="row g-0">
      <div class="col-md-4"></div>
      <div class="col-md-8"></div>
    </div>
    

    其中 .g-0 代表欄位之間不要有距離,是緊密結合在一起,詳情可參考 Gutters工具:https://bootstrap5.hexschool.com/docs/5.0/layout/gutters/

  4. 我們將內容稍微改一下,並調整一下順序,將圖片也移到右邊,以便先看看效果:
    <div class="card mb-3">
      <div class="row g-0">
        <div class="col-md-8">
          <div class="card-body">
            <h5 class="card-title">
              <a href="#">耶誕派對歡樂滿點 失智長輩笑開懷</a>
            </h5>
            <p class="card-text">
              <small
                >撰稿:秘書室文宣公關組 徐瑩芷;拍照:秘書室文宣公關組
                徐瑩芷、護五二乙 林冠羽、護四一丙 紀靜宜
              </small>
            </p>
            <p class="card-text">
              <small class="text-muted"
                >2020-12-25 <i class="far fa-eye"></i> 100
              </small>
            </p>
            <p class="card-text">
              「耶誕快樂!來呷糖仔喔!」咦?竟然有91歲的正港耶誕「老公公」發糖果!原來是瑞智憶學苑舉辦耶誕派對,不只有阿公穿上全套耶誕老公公裝,老人家們都戴上鮮紅色的耶誕圖樣口罩,甚至穿上紅色外套、毛衣、圍巾應景,歡唱「慢板」的耶誕歌曲、互送交換禮物,充滿濃濃的耶誕氣息。除了校內的失智社區服務據點瑞智憶學苑的18位老人家,還有秀林
              ...
            </p>
          </div>
        </div>
        <div class="col-md-4">
          <a href="#">
            <img
              src="https://blog.tcust.edu.tw/uploads/20201225/e3426bf0-db8d-461a-9930-108c81b8c0ef.jpg"
              alt="耶誕派對歡樂滿點 失智長輩笑開懷"
            />
          </a>
        </div>
      </div>
    </div>

二、加上上邊框,並讓圖片可以自適應

  1. 修改卡片外框及圖片部份:
    <div class="card mb-3 border border-5 border-bottom-0 border-start-0 border-end-0 py-4">
      <div class="row g-0">
        <div class="col-md-8">
          ...略...
        </div>
        <div class="col-md-4">
          <img
            src="https://blog.tcust.edu.tw/uploads/20201225/e3426bf0-db8d-461a-9930-108c81b8c0ef.jpg"
            alt="耶誕派對歡樂滿點 失智長輩笑開懷"
            class="img-fluid img-thumbnail"
          />
        </div>
      </div>
    </div>
    1. 為了讓卡片只有上方粗邊框,我們在card的部份,多加上了 border border-5 border-bottom-0 border-start-0 border-end-0 一大串樣式設定,也就是先設定要邊框,並設定邊框為最粗,然後分別取消下、左、右的邊框,只留下上邊框。
    2. 另外,加上 py-4,讓下的內距擴大,避免標題和邊框靠太近。
    3. 圖片部份加上img-fluid,讓圖片可以自適應,並加上img-thumbnail 變成縮圖務關,關於圖片可參考:https://bootstrap5.hexschool.com/docs/5.0/content/images/
  2. 最後,為了拿掉標題的連結底線,所以在css/style.css中加入該樣式:
    ...略...
    
    a {
      text-decoration: none;
    }

     


:::

書籍目錄

展開 | 闔起

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

計數器

今天: 4356435643564356
昨天: 5069506950695069
總計: 5134804513480451348045134804513480451348045134804