< Bootsrap 4

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>

Nyúló linkek

Osztály:

.stretched-link

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

Kártyakép rétegek

Osztály:

.card-img-overlay

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

Kártyaoszlopok

Osztály:

.card-columns

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