Zajęcia tabel w Bootstrap 5 | Wyjaśnione
Stoły o podstawowym stylu
W celu podawania tabel, podstawowy styl, który ma pewne wyściółki i poziome dzielniki używają .tabela klasa. Oto demonstracja podstawowej tabeli.
Jak utworzyć prosty tabelę za pomocą Bootstrap 5
Załóżmy, że chcesz wygenerować prosty tabelę, to właśnie tak się dzieje.
Html
| Imię autora | Kategoria | Opublikowane artykuły |
|---|---|---|
| Max William | Informatyka | 267 |
| Ana James | Fizyka | 100 |
| Harry Robertson | Biologia | 150 |
W powyższym kodzie umieszczamy tabelę wewnątrz pojemnika Div, a następnie wygenerować tabelę, używamy
| , | Aby utworzyć tabelę. Wyjście Stół otrzymał prosty styl. Stół z granicą Aby dodać granicę do stolika, musisz użyć .Zakładowywanie tabeli klasa. Jak utworzyć tabelę z granicą Utwórzmy stół z granicą. Html
Wygenerowana tutaj tabela jest taka sama jak ta utworzona powyżej z jedyną różnicą, jaką tutaj oprócz nadania jej podstawowego stylu, dodajemy również granice, używając .Klasa objęta tabelą. Wyjście Granice zostały pomyślnie dodane do stołu. Stół bez granic Kolejną interesującą rzeczą, którą możesz zrobić za pomocą Bootstrap 5, jest tworzenie całkowicie bez graniców i do tego, że musisz użyć .BEZPIECZNIK BEZPIECZEŃSTWA klasa. Jak utworzyć stół bez granic w Bootstrap 5 Oto jak generujesz stół bez granic. Html
Powyższy kod wygeneruje tabelę bez granic o podstawowym stylu I.mi. Będzie miał pewne wyściółki i poziome dzielniki, ale nie będzie miał granic. Wyjście Klasa działa poprawnie. Stół z paski Aby upiększyć stół, generując rozebrane wiersze, użyj .Stripowane tabelą klasa. Jak utworzyć stół z paski Aby zrozumieć działanie tej klasy, zapoznaj się z przykładem. Html
Powyższy kod wygeneruje tabelę o podstawowym stylu i w paski rzędach. Wyjście Z powodzeniem wygenerowano stół z rzędami w paski. Stół podnoszony Jeśli chcesz podać swoje rzędowe staniki, a następnie użyj .Wourka na stolik klasa. Kiedy użytkownik wprowadzi myszą na wiersze, wygenerowana zostanie efekt najemnika z szarym kolorem tła. Jak utworzyć stół podnoszący Utwórzmy stolik najemny. Html
Korzystając z powyższego fragmentu kodu, możesz łatwo wygenerować tabelę po prostu w stylu z rzędami o efekcie najemcy. Wyjście Wygenerowaliśmy stół podnoszący. Stół z kolorowymi rzędami Możesz także dodać różne kolory do wielu rzędów w tabeli za pomocą klas kolorów dostarczanych przez Bootstrap 5. Jak utworzyć kolorowy tabelę rzędów w Bootstrap 5 Załóżmy, że chcesz nadać każdemu wierszowi inny kolor, a następnie śledź poniższy przykład. Html
W powyższym kodzie jesteśmy przede wszystkim dajemy ciemne tło głowicy tabeli, a następnie każdemu z pozostałych wierszy przypisano inny kolor. Wyjście Z powodzeniem wygenerowano stół z kolorowymi rzędami. Wszystkie klasy tabeli powiązane z kolorami w bootstrap 5 podano poniżej.
Responsywne tabele W celu tworzenia responsywnych tabel, które odpowiadają szerokości ekranu i odpowiednio zmieniać ich rozmiar, użyj .reagowanie na tabelę klasa. Jak utworzyć responsywną tabelę za pomocą Bootstrap 5 Załóżmy, że chcesz zbudować responsywną tabelę dla swojej strony internetowej. Html
W powyższym kodzie, aby zademonstrować pojęcie reakcji, dodaliśmy więcej wierszy. Wraz z tym wygenerowaliśmy również dodatkowy kontener Div i przypisaliśmy go .klasa reagująca na tabelę. Ponadto stół ma podstawowy styl. Wyjście Klasa działa poprawnie. Różne klasy, które dodają reaktywności na tabele w zależności od szerokości ekranu, są podane poniżej. 1… SM-reagujący na tabelę Dla szerokości ekranu mniej niż 576px. 2… reagowanie na tabelę MD Dla szerokości ekranu niższe niż 768px. 3… LG reagujący na tabelę Dla szerokości ekranu mniej niż 992px. 4… reagowanie na tabelę-XL Dla szerokości ekranu mniej niż 1200px. 5… reagowanie na tabelę-xxl Dla szerokości ekranu mniej niż 1400px. Wniosek Zajęcia stołowe w Bootstrap 5 pozwalają na stylizowanie stołów w bardzo łatwy i szybki sposób. Korzystając z tych klas, możesz podać tabele trochę wyściółki, podziałów poziomych, kolorów, granicy, stanu osobie itp. Ponadto możesz również sprawić, by swoje tabele reagowały za pomocą klas powiązanych z tabelami w Bootstrap 5. Wszystkie zajęcia tabeli wraz z odpowiednimi przykładami zostały omówione w tym raporcie.
|
|---|