[[oktatas:web:front-end_framework:bootstrap 4|< Bootsrap 4]]

====== Kártyák ======

  * **Szerző:** Sallai András
  * Copyright (c) Sallai András, 2020
  * Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|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 =====

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

===== Fejléc és lábléc =====

<code html5>
<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>
</code>

===== 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

<code html>
<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>
</code>

===== Képkártya =====

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

<code html>
<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>
</code>


===== Nyúló linkek =====

Osztály:
  * .stretched-link


<code html>
<a href="#" class="btn btn-primary stretched-link"></a>
</code>

===== Kártyakép rétegek =====

Osztály:
  * .card-img-overlay

<code html>
<div class="card" style="width:500px">
  <img class="card-img-top" src="janos.png" alt="János képe">
  <div class="card-img-overlay">
    <h4 class="card-title">Nagy János</h4>
    <p class="card-text">Jelentkezz a Jánosnál</p>
    <a href="#" class="btn btn-primary">Néz meg a leírását</a>
  </div>
</div>
</code>


===== Kártyaoszlopok =====

Osztály:
  * .card-columns

<code html>
<div class="card-columns">
  <div class="card bg-info">
    <div class="card-body text-center">
      <p class="card-text">Egyik</p>
    </div>
  </div>
  <div class="card bg-success">
    <div class="card-body text-center">
      <p class="card-text">Másik</p>
    </div>
  </div>
  <div class="card bg-warning">
    <div class="card-body text-center">
      <p class="card-text">Harmadik</p>
    </div>
  </div>
  <div class="card bg-danger">
    <div class="card-body text-center">
      <p class="card-text">Negyedik</p>
    </div>
  </div>
  <div class="card bg-light">
    <div class="card-body text-center">
      <p class="card-text">Ötödik</p>
    </div>
  </div>
  <div class="card bg-primary">
    <div class="card-body text-center">
      <p class="card-text">Hatodik</p>
    </div>
  </div>
</div>
</code>

===== Díszkártyák =====

Osztály:
  * .card-deck

<code html>
<div class="card-deck">
  <div class="card bg-primary">
    <div class="card-body text-center">
      <p class="card-text">Lorem ipsum</p>
    </div>
  </div>
  <div class="card bg-info">
    <div class="card-body text-center">
      <p class="card-text">Lorem ipsum</p>
    </div>
  </div>
</div>
</code>


===== Kártyacsoportok =====

Osztály:
  * .card-group

<code html>
<div class="card-group">
  <div class="card bg-primary">
    <div class="card-body text-center">
      <p class="card-text">Lorem ipsum</p>
    </div>
  </div>
  <div class="card bg-info">
    <div class="card-body text-center">
      <p class="card-text">Lorem ipsum</p>
    </div>
  </div>
</div>
</code>