Jak używać kart Bootstrap 5
Ten zapis ilustruje użycie kart bootstrap, obejmując następujące aspekty:
- Jak utworzyć prostą kartę?
- Jak utworzyć nagłówek karty i stopkę?
- Jak utworzyć kartę z treścią?
- Jak utworzyć kartę z obrazem?
- Jak utworzyć przycisk na karcie?
- Jak stylizować kartę?
- Jak utworzyć kartę z nakładkami obrazu?
- Jak tworzyć grupy list na karcie?
- Jak utworzyć pasek nawigacyjny na karcie?
Jak utworzyć prostą kartę?
„„karta„Klasa z„CARD-CODO”Jest wykorzystywany do stworzenia prostej karty.
Przejrzyjmy przykład, aby uzyskać lepsze zrozumienie.
Przykład
W pliku HTML wykonaj kroki, aby utworzyć prostą kartę:
- Dodać "" element i przypisz go klasę „pojemnik". Jest to podstawowy element konstrukcyjny zawierający wyściółkę i dostosowanie do zawartości w określonym urządzeniu.
- Następnie przypisz to klasę „karta”Wykorzystane do utworzenia podstawowej karty.
- Aby określić treść w karcie, utwórz div z klasą „CARD-CODO”, Który zawiera niezbędne dane z karty:
Karta Linuxhint
Karta w Bootstrap 5 to pudełko z wyściółką wokół tekstu i granicą.
Wyjście
Jak utworzyć nagłówek karty i stopkę?
„„Header”I„ „Kartacja„Zajęcia są wykorzystywane do ustalenia nagłówka i stopki karty. Zrobić to:
- Ustaw element w klasie „pojemnik" I "M-4".
- Dostosuj Div w klasie „karta".
- Odłóż nagłówek karty, wykorzystując klasę „Header".
- Informacje o karcie są umieszczane za pomocą „Kartacja„Klasa na stopce karty:
Karta Bootstrap 5
Linuxhint School
Karta w Bootstrap 5 to pudełko z granicą i wyściółką wokół tekstu.
Kontakt: xxx-xxx-xxxx
Wyjście
Jak utworzyć kartę z treścią?
Możesz dodać zawartość do karty, korzystając z „CARD-CODO„Wyciągalny kontener treści. Poniżej wymienione klasy muszą być uwzględnione w tej klasie:
- "Title”Dostosowuje tytuł na karcie.
- "tekst karty”Opisuje tekst z właściwościami stylizacji na stronie.
- "Link karty„Kojarzy link innego źródła na stronie:
Karta Linuxhint
Linuxhint to doskonała strona internetowa samouczka.
Lekcja wprowadzająca
Odwiedz nasza strone internetowa
Wyjście
Jak utworzyć kartę z obrazem?
Najpopularniejszym sposobem zaprojektowania karty jest dodanie obrazu do karty. Aby to zrobić, bootstrap „karta-img-top„Klasa jest wykorzystywana w następujący sposób:
Linuxhint School
Aby uzyskać więcej informacji, odwiedź naszą oficjalną stronę internetową.
Kliknij tutaj
Kontakt: xxx-xxx-xxxx
Wyjście
Jak utworzyć przycisk na karcie?
Element przycisku można dodać do karty. W tym celu wdrożyć „Btn„Klasa w elemencie. „„BTN-Primary”Wskazuje główną akcję w grupie przycisków i dodaje do niej dodatkową wagę:
Linuxhint School
Aby uzyskać więcej informacji, odwiedź naszą oficjalną stronę internetową.
Kliknij tutaj
Kontakt: xxx-xxx-xxxx
Wyjście
Jak stylizować kartę?
Aby stylizować pojemnik na karty bootstrap, wiele klas można wykorzystać w ten sposób:
Linuxhint
Tytuł karty podstawowej
Zapewniamy światu artykuły i wykłady wideo.
Linuxhint
Tytuł karty podstawowej
Zapewniamy światu artykuły i wykłady wideo.
Wyjście
Jak utworzyć kartę z nakładkami obrazu?
„„Card-Img-Overlay„Klasa dostosowuje obraz jako tło. Aby go wykorzystać, po pierwsze, ustaw obraz karty, wykorzystując „”Tag. Ponadto szerokość obrazu jest ustawiona jako „100%”:
Dział wideo
Dostarczamy wysokiej jakości filmy na tematy informatyczne.
Więcej informacji
Wyjście
Jak tworzyć grupy list na karcie?
Aby zidentyfikować elementy grupy na karcie, wdrożyć DIV ”pojemnik" klasa. Następnie dodaj pojemnik „Div” wraz z klasą „karta".
Aby utworzyć listę, zastosuj „" I "„Tagi z odpowiednimi klasami:
- Html
- Bootstrap
- JavaScript
Poniżej znajduje się opis wyżej używanych klas bootstrap:
- Aby utworzyć grupy listy, bootstrap „grupa listy„Klasa można zastosować. Pomaga określić listę treści dla karty.
- Dodając „Flush z grupa listy”, Możesz wyświetlać elementy grupy listy od krawędzi do krawędzi w pojemniku nadrzędnym, i.mi., karty. Aby to zrobić, usuwa zaokrąglone narożniki i granice.
- „„Item grupy listy„Definiuje elementy listy.
Wyjście
Jak utworzyć pasek nawigacyjny na karcie?
Możesz także dodać pasek nawigacyjny również do kart. Mówiąc dokładniej, prawidłowy, dobrze dostosowany pasek nawigacyjny jest tworzony przy użyciu kilku klas:
Karta zdrowia
Śledź przewodnik po rejestracji
Rejestracja
Tutaj:
- "Nav Nav-Tabs„Klasa jest wykorzystywana do tworzenia kart nawigacyjnych.
- "Tabs na karcie„Klasa pomaga stylizować zakładki w nagłówku karty.
- "Nav-Item”Zapewnia stylizację elementów nawigacji.
- "Nav-Link”Służy do ustalenia łącza innych bloków nawigacyjnych.
Wyjście
Chodziło o korzystanie z klas bootstrap do tworzenia dobrze formatowanych kart.
Wniosek
Bootstrap 5 wykorzystuje wiele klas do stylizacji i tworzenia kart. Zajęcia te pomagają dostosowywać informacje w ustrukturyzowanym formacie. Niektóre zajęcia to „Title”,„tekst karty”,„Header”,„Kartacja", i wiele więcej. Klasy te oferują funkcje, takie jak określenie tytułu, tekstu, nagłówka i stopki karty. W tym artykule pokazano, jak korzystać z kart Bootstrap 5 o różnych funkcjach.