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

Jak stworzyć karty Bootstrap 5?

2

Bootstrap 4 wprowadził nowy komponent zwany kartami. Komponenty takie jak panele, miniatury i studzienki w Bootstrap 3 zostały usunięte i wykonane jako jeden komponent zwany kartami w Bootstrap 4. Karty są elementami przyjaznymi dla urządzeń mobilnych i stały się najbardziej popularne dzięki użyciu w Google Material Design. W tym samouczku omówimy, jak tworzyć różne karty w czasie rzeczywistym przy użyciu najnowszego Bootstrapa 5.

Możesz pobrać przykłady użyte w tym samouczku tutaj.

Samouczek Bootstrap 5 Cards

Ten samouczek obejmuje następujące rozdziały:

  1. Co to jest składnik karty?
  2. Podstawowa karta Bootstrap 5
  3. Rozmiary kart
  4. Karta z napisami i linkami
  5. Wyrównywanie tekstu
  6. Dodawanie nagłówka i stopki
  7. Korzystanie z kart nawigacyjnych
  8. Obraz na dole karty
  9. Karta z nakładką obrazu
  10. Odwrócona lub czarna karta
  11. Karty z kolorami tła
  12. Karty konspektu
  13. Układy kart

1 Czym są karty w Bootstrapie?

Karty są płynem kontener zawierający nagłówek, stopkę i treść. Część treści może zawierać różne rodzaje elementów, takie jak tytuł, opis, obraz, przyciski itp. Dzięki mieszaniu i dopasowywaniu różnych elementów istnieje wiele możliwości tworzenia różnych typów kart. Zakrywamy karty podstawowym i najbardziej atrakcyjnym wyglądem.

2 karty podstawowe

Podstawowy składnik karty będzie miał obraz, tytuł, opis i przycisk. Jest to najbardziej ogólna forma używania kart na blogach i projektach układu strony.

Jak stworzyć karty Bootstrap 5?

Poniżej znajduje się fragment kodu do stworzenia karty podstawowej wraz z kompletnym szablonem startowym :

<!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> <!-- Basic Card with Image, Title and Description --> <div class="card" style="width:20rem;"> <img class="card-img-top img-fluid" src="https://img.webnots.com/2017/04/Bootstrap-Card-Image.png" alt="card image"> <div class="card-body"> <h4 class="card-title">Card Title</h4> <p class="card-text">This is basic card with image on top, title, description and button.</p> <a href="#" class="btn btn-primary">Button</a> </div> </div> <!-- 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>

W idealnym przypadku nie ma potrzeby stosowania skryptów dla kart, o ile w bloku kart używane są tylko proste elementy. Jak zauważyłeś, do stworzenia karty używanych jest wiele klas CSS.

  • Karta powinna być identyfikowana klasą „.card" opakowaną w

    etykietka.

  • Obraz jest opcjonalnym elementem na karcie. Aby umieścić obraz na górze, należy dodać klasę „.card-img-top”. Dodawana jest dodatkowa klasa „.img-fluid”, aby zapewnić, że obraz jest responsywny i pasuje do szerokości kontenera.

  • Karta może mieć wiele bloków kart owiniętych w osobny

    tag z klasą CSS „.card-body”. Każdy blok karty zawiera treść dla tego bloku, taką jak tytuł, opis itp.

  • W naszym przykładzie użyliśmy

    nagłówek do tytułu z klasą „.card-title”. Po tytule mamy krótki opis za pomocą

    tag z klasą „.card-text”. Wreszcie mamy przycisk identyfikowany z normalną klasą przycisku Bootstrap.

Pamiętaj, że „.card” i „.card-body” wystarczą, aby mieć kartę z dowolną zawartością wewnątrz bloku.

3 Rozmiar komponentu karty

Składnik karty domyślnie jest płynny i rozciąga się na całą szerokość kontenera. W powyższym przykładzie karty podstawowej użyliśmy „style=”width:20rem;””, aby ograniczyć szerokość do 20rem. Możesz użyć różnych sposobów ograniczenia szerokości.

  • Używając stylu inline jak w powyższym przykładzie.
  • Korzystanie z układu siatki.
  • Wykorzystanie klas użyteczności do dostosowania szerokości i wysokości.

We wszystkich naszych przykładach użyjemy stylu inline, aby uzyskać określoną szerokość karty.

4 karta z napisami i linkami

Zacznijmy modyfikować podstawową kartę, aby zamiast przycisku miała napisy i linki. Podtytuł można dodać za pomocą klasy „.card-subtitle” i należy dodać dolny margines, aby utworzyć wymaganą przerwę między tytułem a podtytułem. Linki są tworzone przy użyciu standardowych znaczników kotwic HTML.

<div class="card" style="width:20rem;"> <div class="card-body"> <h4 class="card-title">Card Title</h4> <h6 class="card-subtitle mb-2 text-muted">Card Subtitle</h6> <p class="card-text">This card has no image but has subtitle and two links instead of button.</p> <a href="#" class="card-link">Link 1</a> <a href="#" class="card-link">Link 2</a> </div> </div>

Powinno to dać następujący wynik w przeglądarce:

Jak stworzyć karty Bootstrap 5?

5 Karta z wyrównaniem tekstu

Domyślnie elementy karty są wyrównywane do lewej, co można zmienić na prawy i wyśrodkowany za pomocą klas „.text-right” i „.text-center” odpowiednio do klasy „.card-block”.

<!-- Card with Center Text Alignment --> <div class="card" style="width:20rem;"> <div class="card-body text-center"> <h4 class="card-title">Card Title</h4> <p class="card-text">This is a card with center text alignment.</p> <a href="#" class="btn btn-primary">Button</a> </div> </div> <!-- Card with Right Text Alignment --> <div class="card" style="width:20rem;"> <div class="card-body text-right"> <h4 class="card-title">Card Title</h4> <p class="card-text">This is a card with right text alignment.</p> <a href="#" class="btn btn-primary">Button</a> </div> </div>

Ostateczny wynik będzie wyglądał jak poniżej:

Jak stworzyć karty Bootstrap 5?

Element obrazu został usunięty w powyższym przykładzie karty, aby pokazać wyrównanie tekstu.

6 Dodawanie nagłówka i stopki

A co z dodawaniem nagłówka i stopki do karty, podobnie jak w przypadku panelu w Bootstrap 3? Tak, możesz dodać nagłówek i stopkę za pomocą klas „.card-header” i „.card-footer”, jak poniżej:

<div class="card" style="width:20rem;"> <div class="card-header"> This is a Header </div> <div class="card-body"> <h4 class="card-title">Card Title</h4> <p class="card-text">This is a card component with header and footer.</p> <a href="#" class="btn btn-primary">Button</a> </div> <div class="card-footer"> This is a Footer </div> </div>

Pamiętaj, aby dodać klasy nagłówka lub stopki do rozdzielenia

tagi przed i po sekcji „.card-block”. Wyjście karty z nagłówkiem i stopką podano poniżej:

Jak stworzyć karty Bootstrap 5?

7 Korzystanie z zakładek nawigacyjnych na karcie

Część nagłówka karty może używać domyślnego komponentu nawigacyjnego, aby przekonwertować kartę jak pozioma karta, jak poniżej.

Jak stworzyć karty Bootstrap 5?

Kod do karty z nawigacją podany jest poniżej:

<div class="card text-center"> <div class="card-header"> <ul class="nav nav-tabs card-header-tabs"> <li class="nav-item" style="list-style-type: none;"> <a class="nav-link active" href="#">Tab1</a> </li> <li class="nav-item" style="list-style-type: none;"> <a class="nav-link" href="#">Tab2</a> </li> <li class="nav-item" style="list-style-type: none;"> <a class="nav-link disabled" href="#">Tab3</a> </li> </ul> </div> <div class="card-body"> <h4 class="card-title">This is a title for tab 1</h4> <p class="card-text">This card uses navigation with default navigation components.</p> <a href="#" class="btn btn-primary">Button</a> </div> </div>

8 Obraz na dole

Karta domyślna będzie miała obraz na górze karty, jak pokazano w przykładzie karty podstawowej. Możesz przenieść obraz w dół do karty za pomocą „.card-img-bottom” i przesunąć

<div class="card" style="width:20rem;"> <div class="card-body"> <h4 class="card-title">Card Title</h4> <p class="card-text">This is Bootstrap 5 card with image aligned bottom of the card component.</p> <p class="card-text"><small class="text-muted">Enter some text here...</small></p> </div> <img class="card-img-bottom" src="https://img.webnots.com/2017/04/Bootstrap-Card-Image.png" alt="Card Image Down"> </div>

Karta z obrazem w dół będzie wyglądać jak poniżej:

Jak stworzyć karty Bootstrap 5?

9 Karta z nakładką obrazu

Zamiast przesuwać obraz w górę lub w dół, możesz dodać wszystkie elementy tekstowe na górze obrazu, jak nakładkę, jak poniżej:

Jak stworzyć karty Bootstrap 5?

<div class="card bg-dark text-white" style="width:20rem;"> <img class="card-img" src="https://img.webnots.com/2017/04/Bootstrap-Card-Image.png" alt="Card image"> <div class="card-img-overlay"> <h4 class="card-title">Card Title</h4> <p class="card-text">Here is a short description to explain what this card is about.</p> <p class="card-text"><small class="text-muted">Enter some text here...</small></p> </div> </div>

Klasa „.card-img-overlay” jest używana w

tag, który obejmuje wszystkie elementy tekstowe, aby nałożyć je na obraz. Tutaj użyliśmy „.card-inverse”, aby przekonwertować tekst na jasny kolor, ponieważ użyliśmy ciemnego obrazu tła. Możesz przeczytać więcej o odwróconej karcie w następnym przykładzie.

10 Odwrócona lub czarna karta

Domyślnie elementy tekstowe karty używają ciemnych kolorów, zakładając, że kolor tła jest jasny (zazwyczaj biały). Kolor tekstu można łatwo odwrócić na jasny kolor za pomocą klasy „.text-white”. Pamiętaj, że odwróci to tylko kolory tekstu i powinieneś ręcznie zadeklarować tło na ciemny kolor przy użyciu klasy „.bg-dark”, aby zapewnić czytelność.

Poniżej znajduje się kod odwróconej karty z czarnym kolorem tła zadeklarowanej przy użyciu stylu inline.

<div class="card bg-dark text-white mb-3" style="background-color: #333;"> <div class="card-body"> <h3 class="card-title">Special title treatment</h3> <p class="card-text">This is a card with inverse color and background is set as black.</p> <a href="#" class="btn btn-primary">Go somehwere</a> </div> </div>

Odwrócona karta powinna wyglądać jak poniżej:

Jak stworzyć karty Bootstrap 5?

11 kart z różnymi kolorami tła

Patrzenie na karty z białym tłem będzie nudne. Użyj dowolnej z klas narzędziowych tła, aby dodać kolorowe tło do komponentu karty. Możesz zmienić na jeden z kolorów tła, taki jak podstawowy, drugorzędny, sukces, jasny, ciemny, ostrzeżenie, informacja lub niebezpieczeństwo. Poniżej znajduje się karta z nagłówkiem i różnymi kolorami tła.

<div class="card text-white bg-primary mb-3"> <div class="card-header">Primary</div> <div class="card-body"> <h4 class="card-title">Card Title</h4> <p class="card-text">This is a card text paragraph with primary color background.</p> </div> </div> <div class="card text-white bg-secondary mb-3"> <div class="card-header">Secondary</div> <div class="card-body"> <h4 class="card-title">Card Title</h4> <p class="card-text">This is a card text paragraph with secondary color background.</p> </div> </div> <div class="card text-white bg-success mb-3"> <div class="card-header">Success</div> <div class="card-body"> <h4 class="card-title">Card Title</h4> <p class="card-text">This is a card text paragraph with green color background.</p> </div> </div> <div class="card text-white bg-info mb-3"> <div class="card-header">Info</div> <div class="card-body"> <h4 class="card-title">Card Title</h4> <p class="card-text">This is a card text paragraph with blue color background.</p> </div> </div> <div class="card text-white bg-warning mb-3 text-center"> <div class="card-header">Warning</div> <div class="card-body"> <h4 class="card-title">Card Title</h4> <p class="card-text">This is a card text paragraph with yellow color background and aligned center.</p> </div> </div> <div class="card text-white bg-danger mb-3 text-center"> <div class="card-header">Danger</div> <div class="card-body"> <h4 class="card-title">Card Title</h4> <p class="card-text">This is a card text paragraph with red color background and aligned center.</p> </div> </div> <div class="card bg-light mb-3 text-center"> <div class="card-header">Light</div> <div class="card-body"> <h4 class="card-title">Card Title</h4> <p class="card-text">This is a card text paragraph with light color background and aligned center.</p> </div> </div> <div class="card text-white bg-dark mb-3 text-center"> <div class="card-header">Dark</div> <div class="card-body"> <h4 class="card-title">Card Title</h4> <p class="card-text">This is a card text paragraph with dark color background and aligned center.</p> </div> </div>

Pamiętaj, aby uwzględnić klasę „.text-white”, ponieważ wszystkie te tła mają ciemniejszy kolor, co wymaga, aby tekst był jaśniejszy.

Karty z różnymi kolorami tła są pokazane poniżej:

Jak stworzyć karty Bootstrap 5?

12 kart Zarysów

Karty konturowe będą miały gładkie białe tło z różnymi kolorami obramowania za pomocą „.card-outline-primary”,”.card-outline-secondary”,”.card-outline-success”,”.card-outline-info”,” klasy .card-outline-warning” i .card-outline-danger”.

<div class="card border-primary mb-3 text-center"> <div class="card-header">Primary Border</div> <div class="card-body text-primary"> <h4 class="card-title">Card Title</h4> <p class="card-text">This is a card text paragraph with primary color background.</p> </div> </div> <div class="card border-secondary mb-3 text-center"> <div class="card-header">Secondary Border</div> <div class="card-body text-secondary"> <h4 class="card-title">Card Title</h4> <p class="card-text">This is a card text paragraph with primary color background.</p> </div> </div> <div class="card border-light mb-3 text-center"> <div class="card-header">Light Border</div> <div class="card-body"> <h4 class="card-title">Card Title</h4> <p class="card-text">This is a card text paragraph with primary color background.</p> </div> </div> <div class="card border-dark mb-3 text-center"> <div class="card-header">Dark Border</div> <div class="card-body text-dark"> <p>This is a card text paragraph with secondary color background without title.</p> <footer>Quote by <cite title="Source Title">Someone said</cite></footer> </div> </div> <div class="card border-success mb-3 text-center"> <div class="card-header">Success Border</div> <div class="card-body text-success"> <h4 class="card-title">Card Title</h4> <p class="card-text">This is a card text paragraph with green color background.</p> </div> </div> <div class="card border-info mb-3 text-center"> <div class="card-header">Info Border</div> <div class="card-body text-info"> <h4 class="card-title">Card Title</h4> <p class="card-text">This is a card text paragraph with blue color background.</p> </div> </div> <div class="card border-warning mb-3 text-center"> <div class="card-header">Warning Border</div> <div class="card-body text-warning"> <h4 class="card-title">Card Title</h4> <p class="card-text">This is a card text paragraph with yellow color background.</p> </div> </div> <div class="card border-danger text-center"> <div class="card-header">Danger Border</div> <div class="card-body text-danger"> <h4 class="card-title">Card Title</h4> <p class="card-text">This is a card text paragraph with red color background.</p> </div> </div>

Karty konspektu będą wyglądać jak poniżej:

Jak stworzyć karty Bootstrap 5?

13 Bootstrap 5 układów kart

Wszystkie powyższe przykłady dotyczą tworzenia karty jako pojedynczego komponentu. Bootstrap oferuje również trzy klasy do tworzenia układu kart, który jest bardziej odpowiedni dla układów blogów.

  • grupa kart
  • talia kart
  • kolumny-karty

Omówimy te klasy układu kart w naszym następnym samouczku.


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