2025.01.28.
Aktuális cikkekKódolás, keretrendszerekWeboldalak készítése

Reszponzív Kártya Elrendezés Készítése Bootstrap Segítségével

Temesvári László

A reszponzív kártya elrendezések elengedhetetlenek a modern weboldalak tervezésében. Ezek a struktúrák könnyen skálázódnak különböző képernyőméretekhez, és nagyszerűek termékek, szolgáltatások vagy akár blogbejegyzések bemutatására. Ebben a cikkben megmutatjuk, hogyan hozhatsz létre egy reszponzív kártya elrendezést a Bootstrap 5 keretrendszer használatával.

1. lépés: Projekt Struktúra

Először hozzunk létre egy egyszerű projektet az alábbi struktúrával:

Projekt mappa
|
├── index.html            # A fő HTML fájl
└── css                   # Egyéni stílusokhoz (opcionális)
    └── style.css         # Egyéni CSS fájl (opcionális)

2. lépés: Alap HTML

A Bootstrap használatához adjuk hozzá a CDN linkeket az index.html fájlhoz.

<!DOCTYPE html>
<html lang="hu">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Reszponzív Kártya Elrendezés</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="./css/style.css" rel="stylesheet">
</head>
<body>
    <div class="container my-5">
        <h1 class="text-center mb-4">Reszponzív Kártyák</h1>
        <div class="row row-cols-1 row-cols-md-3 g-4">
            <!-- Kártya 1 -->
            <div class="col">
                <div class="card">
                    <img src="./images/image1.png" class="card-img-top" alt="Kép">
                    <div class="card-body">
                        <h5 class="card-title">Kártya címe 1</h5>
                        <p class="card-text">Ez egy rövid leírás a kártyáról. Tartalmazhat fontos információkat.</p>
                        <a href="#" class="btn btn-primary">További információ</a>
                    </div>
                </div>
            </div>
            <!-- Kártya 2 -->
            <div class="col">
                <div class="card">
                    <img src="./images/image2.jpg" class="card-img-top" alt="Kép">
                    <div class="card-body">
                        <h5 class="card-title">Kártya címe 2</h5>
                        <p class="card-text">Ez egy rövid leírás a kártyáról. Tartalmazhat fontos információkat.</p>
                        <a href="#" class="btn btn-primary">További információ</a>
                    </div>
                </div>
            </div>
            <!-- Kártya 3 -->
            <div class="col">
                <div class="card">
                    <img src="./images/image3.jpg" class="card-img-top" alt="Kép">
                    <div class="card-body">
                        <h5 class="card-title">Kártya címe 3</h5>
                        <p class="card-text">Ez egy rövid leírás a kártyáról. Tartalmazhat fontos információkat.</p>
                        <a href="#" class="btn btn-primary">További információ</a>
                    </div>
                </div>
            </div>
            <!-- Kártya 4 -->
            <div class="col">
                <div class="card">
                    <img src="./images/image3.jpg" class="card-img-top" alt="Kép">
                    <div class="card-body">
                        <h5 class="card-title">Kártya címe 4</h5>
                        <p class="card-text">Ez egy rövid leírás a kártyáról. Tartalmazhat fontos információkat.</p>
                        <a href="#" class="btn btn-primary">További információ</a>
                    </div>
                </div>
            </div>
            <!-- Kártya 5 -->
            <div class="col">
                <div class="card">
                    <img src="./images/image1.png" class="card-img-top" alt="Kép">
                    <div class="card-body">
                        <h5 class="card-title">Kártya címe 5</h5>
                        <p class="card-text">Ez egy rövid leírás a kártyáról. Tartalmazhat fontos információkat.</p>
                        <a href="#" class="btn btn-primary">További információ</a>
                    </div>
                </div>
            </div>
            <!-- Kártya 6 -->
            <div class="col">
                <div class="card">
                    <img src="./images/image2.jpg" class="card-img-top" alt="Kép">
                    <div class="card-body">
                        <h5 class="card-title">Kártya címe 6</h5>
                        <p class="card-text">Ez egy rövid leírás a kártyáról. Tartalmazhat fontos információkat.</p>
                        <a href="#" class="btn btn-primary">További információ</a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

3. lépés: Reszponzív Rács Rendszer

A Bootstrap rács rendszere segítségével a kártyák automatikusan átrendeződnek különböző képernyőméretekhez:

  • row-cols-1: Egy oszlop kisebb képernyőn.
  • row-cols-md-3: Három oszlop közepes és nagyobb képernyőkön.
  • g-4: Rácsközök beállítása (gap).

4. lépés: Egyéni Stílusok (Opcionális)

.card-img-top {
    height: 200px; /* Állítsd be a kívánt magasságot */
    object-fit: cover; /* Arányosan méretezett kép, ami kitölti a magasságot */
}

.card {
    transition: transform 0.3s ease;
}

.card:hover {
    transform: scale(1.05);
}

Letöltés

Kapcsolódó cikkek