Különbségek

A kiválasztott változat és az aktuális verzió közötti különbségek a következők.

--- oktatas:web:front-end_framework:bootstrap_4:kartyak [2020/12/10 22:32] – [Hiperszöveges kártya] admin
+++ oktatas:web:front-end_framework:bootstrap_4:kartyak [2020/12/10 22:46] (aktuális) – [Kártyaoszlopok] admin
@@ Sor 83: / Sor 83: @@
 </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>