بوت اسپرینگ 5 کارڈ

卡片

Bootstrap 5 中的卡片是带边框的框，其内容周围有一些内边距。它包括页眉、页脚、内容、颜色等选项。

基础的卡片

一张基础卡片是用 .card 类创建的，卡片中的内容有一个 .card-body 类：

ਉਦਾਹਰਣ

<div class="card">
  <div class="card-body">基础的卡片</div>
</div>

ਆਪਣੇ ਹੀ ਅਭਿਆਸ ਕਰੋ

页眉和页脚

.card-header 类为卡片添加标题，.card-footer 类为卡片添加页脚：

ਉਦਾਹਰਣ

<div class="card">
  <div class="card-header">页眉</div>
  <div class="card-body">内容</div>
  <div class="card-footer">页脚</div>
</div>

ਆਪਣੇ ਹੀ ਅਭਿਆਸ ਕਰੋ

上下文卡片

如需为卡片添加背景颜色，请使用上下文类：

  • .bg-primary
  • .bg-success
  • .bg-info
  • .bg-warning
  • .bg-danger
  • .bg-secondary
  • .bg-dark
  • .bg-light

ਉਦਾਹਰਣ

ਆਪਣੇ ਹੀ ਅਭਿਆਸ ਕਰੋ

标题、文本和链接

请使用 .card-title 将卡片标题添加到任意标题元素。如果 <p> 元素是 .card-body 中的最后一个子元素（或唯一一个子元素），تو .card-text ਕਲਾਸ ਵਰਤੋਂ ਕਰਕੇ ਹਟਾਓ <p> ਏਲੀਮੈਂਟ ਦੇ ਨੀਚੇ ਬੈਡਿੰਗ.card-link ਕਿਸੇ ਵੀ ਲਿੰਕ ਲਈ ਨੀਲਾ ਅਤੇ ਹੋਵੇਂ ਦਿਖਾਈ ਦਿੰਦੇ ਹਨ。

ਉਦਾਹਰਣ

<div class="card">
  <div class="card-body">
    <h4 class="card-title">ਕਾਰਡ ਸਿਰਲੇਖ</h4>
    <p class="card-text">ਕੁਝ ਉਦਾਹਰਣ ਟੈਕਸਟ। ਕੁਝ ਉਦਾਹਰਣ ਟੈਕਸਟ。</p>
    <a href="#" class="card-link">ਕਾਰਡ ਲਿੰਕ</a>
    <a href="#" class="card-link">ਹੋਰ ਲਿੰਕ</a>
  </div>
</div>

ਆਪਣੇ ਹੀ ਅਭਿਆਸ ਕਰੋ

ਕਾਰਡ ਚਿੱਤਰ .card-img-top ਜਾਂ .card-img-bottom ਜੋੜੋ <img>ਚਿੱਤਰ ਨੂੰ ਕਾਰਡ ਉੱਪਰ ਜਾਂ ਨੀਚੇ ਰੱਖ ਸਕਦੇ ਹਨ。

ਕਿਰਪਾ ਕਰਕੇ ਨੋਟ ਕਰੋ ਕਿ ਅਸੀਂ .card-body ਬਾਹਰ ਚਿੱਤਰ ਜੋੜਿਆ ਹੈ ਤਾਂ ਕਿ ਪੂਰੀ ਚੌੜਾਈ ਖੇਤਰ ਦੇ ਚਾਰੋਂ ਹਨ:

ਉਦਾਹਰਣ

<div class="card" style="width:400px">
  <img class="card-img-top" src="avatar.png" alt="Card image">
  <div class="card-body">
    <h4 class="card-title">ਬਿਲ ਗੇਟਸ</h4>
    <p class="card-text">ਬਿਲ ਗੇਟਸ ਇੱਕ ਪ੍ਰੋਗਰਾਮਰ ਅਤੇ ਇੰਜੀਨੀਅਰ ਹੈ। ਕੁਝ ਉਦਾਹਰਣ ਟੈਕਸਟ। ਕੁਝ ਉਦਾਹਰਣ ਟੈਕਸਟ。</p>
    <a href="#" class="btn btn-primary">ਆਪਣਾ ਪਰਿਚੈ ਦੇਖੋ</a>
  </div>
</div>

ਆਪਣੇ ਹੀ ਅਭਿਆਸ ਕਰੋ

ਕਾਰਡ ਚਿੱਤਰ ਓਵਰਲੇ

ਚਿੱਤਰ ਨੂੰ ਕਾਰਡ ਪਿੱਛੇ ਬਣਾਓ ਅਤੇ ਵਰਤੋਂ: .card-img-overlay ਚਿੱਤਰ ਉੱਪਰ ਟੈਕਸਟ ਜੋੜੋ:

ਉਦਾਹਰਣ

<div class="card" style="width:500px">
  <img class="card-img-top" src="avatar.png" alt="Card image">
  <div class="card-img-overlay">
    <h4 class="card-title">ਬਿਲ ਗੇਟਸ</h4>
    <p class="card-text">ਕੁਝ ਉਦਾਹਰਣ ਟੈਕਸਟ। ਕੁਝ ਉਦਾਹਰਣ ਟੈਕਸਟ。</p>
    <a href="#" class="btn btn-primary">ਆਪਣਾ ਪਰਿਚੈ ਦੇਖੋ</a>
  </div>
</div>

ਆਪਣੇ ਹੀ ਅਭਿਆਸ ਕਰੋ