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); }