Kártyák

Szerző: Sallai András
Copyright © Sallai András, 2020
Licenc: CC Attribution-Share Alike 4.0 International
Web: https://szit.hu

Kártyákról

A Bootstrap 4-ben eltűnt a Panel, megjelent helyette a kártya. A kártya egy szegélyezett doboz, amely a tartalmat belső margóval veszi körül. Lehetőség van fejlécek, láblécek, tartalom és színek megadására.

Osztályok

.card
.card-body

Egyszerű kártya

<div class="card">
  <div class="card-body">Alap</div>
</div>

Fejléc és lábléc

<div class="card">
  <div class="card-header">Fejléc</div>
  <div class="card-body">Tartalom</div>
  <div class="card-footer">Lábléc</div>
</div>

Színezés

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

Hiperszöveges kártya

.card-title
.card-text
.card-body
.card-link

<div class="card">
  <div class="card-body">
    <h4 class="card-title">Kártya címe</h4>
    <p class="card-text">Lorem ipsum dolor set amet</p>
    <a href="http://szit.hu" class="card-link">szit.hu</a>    
  </div>
</div>

Képkártya

.card-img-top
.card-img-bottom
.card-body

<div class="card" style="width:400px">
  <img class="card-img-top" src="kep.png" alt="janos_kepe.png">
  <div class="card-body">
    <h4 class="card-title">Nagy János</h4>
    <p class="card-text">Válassz egy embert</p>
    <a href="http://szit.hu" class="btn btn-primary">szit.hu</a>
  </div>
</div>