szit

Ez az oldal csak olvasható. Megtekintheted a forrását, de nem változtathatod meg. Ha úgy gondolod, hogy ez helytelen, kérdezd az Adminisztrátorokat!
[[oktatas:web|< Web]]

====== Reszponzív ======

  * **Szerző:** Sallai András
  * Copyright (c) 2025, Sallai András
  * Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|CC BY-SA 4.0]]
  * Web: https://szit.hu

===== Táblázat celláinak tördelése =====

A lényeg:

<code css style.css>
@media screen and (max-width: 600px) {

  table, thead, tbody, th, td, tr {
    display: block;
  }

}
</code>

De így nem látszanak a határok és a táblázat fejléce is felesleges.


<code css style.css>
@media screen and (max-width: 600px) {

  table, thead, tbody, th, td, tr {
    display: block;
  }

  td {
    text-align: left;
    border: 1px solid #ddd;
    padding: 8px;
  }

  thead tr {
    display: none;
  }

  tbody tr {
    margin-bottom: 8px;
  }

}
</code>

===== Bootstrap kártyák =====

Érdemes kártyákat használni táblázatok helyett. Használjuk a **Card** komponenst.

A kártyakomponenseket tegyük egy divbe, majd állítsunk be d-flex és felx-wrap osztályjelölöket.

<code html>
<div class="d-flex flex-wrap justify-content-center">
  <div class="card" style="width: 18rem;">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Cím</h5>
      <p class="card-text">Leírás</p>
      <a href="#" class="btn btn-primary">Menjünk valahova</a>
    </div>
  </div>
</div>
</code>

==== Angularban ====

Legyen Angualrban egy productList, amit szeretnénk renderelni a weboldalra.
Készítsünk egy div-t, aminek a dispaly tulajdonságát flex értékre állítjuk, majd
mondjuk meg, hogy tördelje a tartalmat ha szükséges a flex tulajdonság wrap-ra állításával.

<code html>
<div class="d-flex flex-wrap justify-content-center">
  @for(product of productList; track product.id) {
    <div class="card m-3" style="width: 18rem;">
      <img src="{{ product.image }}" class="card-img-top" alt="{{ product.name }}"
      width="50px" height="80px">
      <div class="card-body">
        <h5 class="card-title">{{ product.name }}</h5>
        <p class="card-text">{{ product.description }}</p>
        
        <button
        class="btn btn-primary"
        (click)=toCart(emp)
        >Kosárba</button>
      </div>
    </div>
  }
</div>
</code>