TechBlogSD - Wszystko do WordPressa i tworzenia stron internetowych
Instrukcje WEB i WordPress, nowości, recenzje motywów i wtyczek

Jak tworzyć układy kart Bootstrap 5?

2

W naszym poprzednim samouczku wyjaśniliśmy różne sposoby tworzenia kart jako indywidualnego komponentu. Ponieważ karty to zbiór różnych elementów, możesz ich używać do tworzenia kompletnych układów stron, takich jak strony indeksowe blogów. Bootstrap 5 oferuje trzy domyślne klasy CSS do tworzenia układów stron z kartami. W tym samouczku przyjrzyjmy się bliżej tworzeniu układów kart.

Można pobrać przykładowe kody układ przy tym tutorialu tutaj.

Rodzaje układów kart

Bootstrap używa następujących trzech klas CSS do tworzenia układów kart:

  • grupa kart
  • talia kart
  • kolumny-karty

Oprócz tych klas możesz utworzyć układ, umieszczając poszczególne karty w domyślnych kolumnach układu siatki.

Układ 1: Układ grupy kart

Możesz użyć klasy „.card-group", aby pogrupować poszczególne karty w układ flex box z kolumnami o równej wysokości. Poniżej znajduje się przykład grupowania trzech kart jako układu razem przy użyciu grup kart.

Jak tworzyć układy kart Bootstrap 5?

Jak widać, grupa kart będzie wyglądać pięknie bez przerw między poszczególnymi kartami. Możesz mieszać i dopasowywać różne elementy wewnątrz kart, zgodnie z opisem w samouczku dotyczącym kart Bootstrap. W tym przykładzie użyliśmy trzech podobnych kart z obrazem, tytułem, opisem i stopką. Poniżej znajduje się pełny kod układu grupy kart, zasadniczo umieściliśmy kod grup kart między treścią szablonu startowego Bootstrap :

<!DOCTYPE html> <html lang="en"> <head> <!-- Meta Tags for Bootstrap 5 --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Bootstrap 5 CSS --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous"> </head> <body> <!-- Start of Card Groups Layout --> <div class="card-group"> <div class="card"> <img class="card-img-top" src="https://img.webnots.com/2017/04/Bootstrap-Card-Image.png" alt="Flex Card Image 1"> <div class="card-body"> <h4 class="card-title">Card Title</h4> <p class="card-text">Here is a longer description of the card and the height will be auto aligned with flex box.</p> </div> <div class="card-footer"> <small class="text-muted">Here is a footer</small> </div> </div> <div class="card"> <img class="card-img-top" src="https://img.webnots.com/2017/04/Bootstrap-Card-Image.png" alt="Flex Card Image 2"> <div class="card-body"> <h4 class="card-title">Card Title</h4> <p class="card-text">Here is a shorter description of the card.</p> </div> <div class="card-footer"> <small class="text-muted">Here is a footer</small> </div> </div> <div class="card"> <img class="card-img-top" src="https://img.webnots.com/2017/04/Bootstrap-Card-Image.png" alt="Flex Card Image 3"> <div class="card-body"> <h4 class="card-title">Card Title</h4> <p class="card-text">Here is a very long description of the card and the height will be auto aligned with flex box. You can enter longer text to check the cards are aligned perfectly with same height without any gap.</p> </div> <div class="card-footer"> <small class="text-muted">Here is a footer</small> </div> </div> </div> <!-- End of Card Groups Layout --> <!-- Bootstrap 5 Scripts --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script> </body> </html>

Układ 2: Układ talii kart

Klasa „.card-deck” tworzy układ podobny do grupy kart, z wyjątkiem tego, że będzie marginalna luka między poszczególnymi kartami, jak pokazano poniżej:

Jak tworzyć układy kart Bootstrap 5?

Układ talii kart wykorzystuje również pole elastyczne, aby mieć kolumny o równej wysokości w kontenerze, niezależnie od rozmiaru zawartości poszczególnych kart.

Poniżej znajduje się kompletny kod do tworzenia układu talii kart.

<!DOCTYPE html> <html lang="en"> <head> <!-- Meta Tags for Bootstrap 5 --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Bootstrap 5 CSS --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous"> </head> <body> <!-- Start of Card Deck Layout --> <div class="card-deck"> <div class="card"> <img class="card-img-top" src="https://img.webnots.com/2017/04/Bootstrap-Card-Image.png" alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Card Title</h4> <p class="card-text">Here is a longer description of the card and the height will be auto aligned with flex box.</p> </div> <div class="card-footer"> <small class="text-muted">Here is a footer</small> </div> </div> <div class="card"> <img class="card-img-top" src="https://img.webnots.com/2017/04/Bootstrap-Card-Image.png" alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Card Title</h4> <p class="card-text">Here is a shorter description of the card.</p> </div> <div class="card-footer"> <small class="text-muted">Here is a footer</small> </div> </div> <div class="card"> <img class="card-img-top" src="https://img.webnots.com/2017/04/Bootstrap-Card-Image.png" alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Card Title</h4> <p class="card-text">Here is a very long description of the card and the height will be auto aligned with flex box. You can enter longer text to check the cards are aligned perfectly with same height without any gap.</p> </div> <div class="card-footer"> <small class="text-muted">Here is a footer</small> </div> </div> </div> <!-- End of Card Deck Layout --> <!-- Bootstrap 5 Scripts --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script> </body> </html>

Układ 3: Układ kolumn kart lub układ murowany

Układ murowany to jeden z popularnych sposobów na zaprezentowanie strony indeksu bloga z indywidualnymi polami dopasowanymi do dostępnej przestrzeni. Tutaj wysokość poszczególnych kart będzie inna w zależności od rzeczywistego rozmiaru karty. Poniżej przedstawiamy, jak będzie wyglądał układ muru przy użyciu klasy „.card-columns”.

Jak tworzyć układy kart Bootstrap 5?

Pełny kod dla powyższego układu murów podano poniżej:

<!DOCTYPE html> <html lang="en"> <head> <!-- Meta Tags for Bootstrap 5 --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Bootstrap 5 CSS --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous"> </head> <body> <!-- Start of Card Columns Layout --> <div class="card-columns"> <div class="card"> <img class="card-img-top img-fluid" src="https://img.webnots.com/2017/04/Bootstrap-Card-Image.png" alt="Card Columns 1"> <div class="card-body"> <h4 class="card-title">Card Title</h4> <p class="card-text">Here is a very long description of the card and you can enter longer text to check the cards are aligned perfectly like on the masonry layout.</p> </div> </div> <div class="card"> <img class="card-img-top img-fluid" src="https://img.webnots.com/2017/04/Bootstrap-Card-Image.png" alt="Card Columns 2"> <div class="card-body"> <h4 class="card-title">Card Title</h4> <p class="card-text">Here is a shorter description of the card.</p> <p class="card-text"><small class="text-muted">Here is a footer</small></p> </div> </div> <div class="card p-3 bg-dark text-white"> <blockquote class="blockquote mb-0"> <p>This is a blockquote and you can enter any quote from anyone.</p> <footer> <small class="text-muted"> Said by <cite title="Source Title">Someone</cite> </small> </footer> </blockquote> </div> <div class="card bg-primary p-3 text-center text-white"> <blockquote class="blockquote mb-0"> <p>Here is a description for primary card.</p> <footer> <small> Said by <cite title="Source Title">Someone</cite> </small> </footer> </blockquote> </div> <div class="card text-center"> <div class="card-body"> <h4 class="card-title">Card Title</h4> <p>Here is a short description of the card without image.</p> <p class="card-text"><small class="text-muted">Here is a footer</small></p> </div> </div> <div class="card p-3 text-right"> <blockquote class="blockquote mb-0"> <p>Here is a short description without title and image.</p> <footer> <small> Said by <cite title="Source Title">Someone</cite> </small> </footer> </blockquote> </div> <div class="card"> <div class="card-body"> <h4 class="card-title">Card Title</h4> <p class="card-text">Here is a long description for your card, enter anything you would like to enter here.</p> <p class="card-text"><small class="text-muted">Here is a footer</small></p> </div> </div> <div class="card"> <img class="card-img img-fluid" src="https://img.webnots.com/2017/04/Bootstrap-Card-Image.png" alt="Image Only Card"> </div> </div> <!-- End of Card Columns Layout --> <!-- Bootstrap 5 Scripts --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script> </body> </html>

Możesz dodać dowolną liczbę elementów lub wyciągnąć go z blogrolla, aby zaprezentować go jako stronę indeksu.

Punkty do odnotowania:

  • Może być konieczne dodanie 100% szerokości do obrazów używanych w układzie murowanym, takim jak .img-fluid{width:100%;}.

  • Pamiętaj, że klasa „.p-3″ służy do dodawania dopełnienia do karty, która zawiera tylko tekst opisu, aby dodać dopełnienie 1rem.

  • Układy kart nie reagują na urządzeniach mobilnych w początkowej wersji Bootstrap 5.

    • *

Dowiedz się o Bootstrapie 5 (Indeks )


Źródło nagrywania: webnots.com
Leave A Reply

Ta strona korzysta z plików cookie, aby poprawić Twoje wrażenia. Zakładamy, że nie masz nic przeciwko, ale możesz zrezygnować, jeśli chcesz. Akceptuję Więcej szczegółów