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

Jak stworzyć Bootstrap 5 Stoły?

1

Bootstrap pozwala tworzyć piękne tabele za pomocą frameworka CSS. Wersja 4 ma kilka nowych klas do odwracania koloru tabeli i sprawiania, że ​​tabela jest responsywna. W najnowszej wersji 5 możesz łatwo wybierać różne typy stołów. W tym samouczku omówimy różne możliwości tworzenia tabel za pomocą Bootstrap 5. Możesz pobrać pliki użyte w tym samouczku tutaj.

Tagi. W naszym przykładzie utwórzmy prosty arkusz ocen w formacie tabeli z czterema nazwiskami uczniów (w wierszach) i pięcioma przedmiotami ze średnią wartością procentową (w kolumnach). Poniżej znajduje się kod domyślnej tabeli Bootstrap.

Domyślnie jedyną klasą CSS wymaganą do utworzenia tabeli Bootstrap jest klasa „table" zastosowana bezpośrednio na elemencie tabeli HTML. Nie musisz tworzyć tabeli

tag do wstawiania tabel w Bootstrap. Domyślny tag da następujący wynik:

Jak stworzyć Bootstrap 5 Stoły?

Odwracanie kolorów stołu

Bootstrap 4 pozwala odwrócić kolor stołu, dodając „table-inverse” do

etykietka. Odwróci tło na ciemne, a tekst na jasne kolory. Kod powinien wyglądać jak poniżej:

<table class="table table-inverse"> All content remains same here similar to default table. <table>

Tabela odwrotna będzie miała bardzo ciemne i atrakcyjne tło, jak pokazano poniżej:

Jak stworzyć Bootstrap 5 Stoły?

Tabela odwrotnego nagłówka

W poprzednim przypadku klasa „table-inverse” została zastosowana do całej tabeli. Bootstrap 4 pozwala również odwrócić tylko tło nagłówka i kolory tekstu. Aby odwrócić nagłówek, po prostu dodaj klasę „thead-inverse” do

etykietka.

<table class="table"> <thead class="thead-inverse"> </thead> </table>

A nasza tabela arkuszy znaków będzie miała czarny wiersz nagłówka, jak poniżej:

Jak stworzyć Bootstrap 5 Stoły?

To nie wszystko!!! Z Bootstrapem jest o wiele więcej opcji. Stwórzmy jeszcze kilka wariacji.

Striped Bootstrap 4 Stół

Tabela w paski umożliwia tworzenie alternatywnych kolorów dla wierszy. Wystarczy dodać „table-striped” do istniejącej klasy „table” i tabela będzie miała wzór w paski. Jasnoszary kolor tła zostanie zastosowany do wszystkich nieparzystych wierszy, począwszy od pierwszego wiersza.

<table class="table table-striped"> </table>

Najczęściej preferowana jest tabela w paski, aby odróżnić wiersze i zaprezentować zawartość odwiedzającym.

Jak stworzyć Bootstrap 5 Stoły?

Stół z obramowaniem Bootstrap

Ten po prostu doda obramowanie do domyślnej tabeli. To, czego potrzebujesz, to dołączenie klasy „table-bordered” do istniejącej klasy „table”.

<table class="table table-bordered"> </table>

Nasza tabela arkuszy z obramowaniem powinna wyglądać jak poniżej:

Jak stworzyć Bootstrap 5 Stoły?

Możesz również łatwo stworzyć tabelę obramowaną z paskami w rzędach.

<table class="table table-striped table-bordered"> </table>

Tabela z efektami najechania na wiersze

Co powiesz na dodanie efektów najechania do stołu? Klasa „table-hover” zrobi to za Ciebie. Najedź myszką na tabelę, aby zobaczyć, że odpowiedni wiersz jest podświetlony jasnoszarym kolorem tła.

<table class="table table-hover"> </table>

Poniżej przedstawiamy, jak powinna wyglądać Twoja tabela po najechaniu myszą na drugi wiersz.

Jak stworzyć Bootstrap 5 Stoły?

Responsywna tabela Bootstrap dla urządzeń mniejszych niż 768 pikseli

Tworzenie responsywnej tabeli w Bootstrap 4 jest bardzo proste. Nie musisz dodawać dodatkowych

za dodanie responsywności. Wystarczy wstawić klasę „table-responsywną”, a poziomy pasek przewijania zostanie automatycznie dodany do tabeli podczas przeglądania w przeglądarce o rozmiarze ekranu poniżej 768 pikseli.

<table class="table table-responsive"> </table>

Oto jak będzie wyglądał nasz responsywny stół. Pamiętaj, że poziomy pasek przewijania pojawi się tylko wtedy, gdy tabela będzie wyświetlana na ekranie o rozmiarze mniejszym niż 768 pikseli. W przeciwnym razie nie znajdziesz żadnej różnicy w porównaniu ze zwykłym stołem Bootstrap.

Jak stworzyć Bootstrap 5 Stoły?

Tabela Bootstrap ze skompresowanym tekstem

Czasami konieczne jest skompresowanie wysokości stołu, aby zmniejszyć zajmowaną przestrzeń. Bootstrap umożliwia to poprzez dodanie klasy „table-sm” do istniejącej klasy „table”, jak pokazano poniżej:

<table class="table table-sm"> </table>

Spowoduje to usunięcie wyściółki i zmniejszy wysokość stołu.

Jak stworzyć Bootstrap 5 Stoły?

Tworzenie tabeli Bootstrap z kolorem tła

Od teraz omówiliśmy tworzenie prostej tabeli lub domyślne jasnoszare tło dla wierszy. Bootstrap umożliwia również pokolorowanie komórek i wierszy tabeli, aby była piękna. Możesz podświetlić dowolne wiersze lub dowolne komórki tabeli w pięciu różnych kolorach. Istnieją dwa zestawy klas CSS, które pomagają dodawać kolory tła – jedna to klasy kontekstowe, a druga to klasy narzędziowe tła. Poniższa tabela wyjaśnia różne dostępne opcje:

Klasy kontekstowe tabeli
stół-aktywny Jasnoszary kolor najechania?
tabela-sukces Jasnozielony sukces lub pozytywne działanie
informacje o stole Jasnoniebieski dla wiadomości informacyjnej
ostrzeżenie przy stole Jasnożółty do wskazywania ostrzeżenia;
stół-niebezpieczeństwo Jasnoczerwony do wskazania niebezpieczeństwa
podstawowa tabela Jasnoniebieski dla wskazania koloru podstawowego w Bootstrap
tabela-wtórny Jasnoczerwony do wskazania niebezpieczeństwa
lampka stołowa Jasnoszary dla wskazania braku koloru
stół-ciemny Jasnoczarny do wskazywania ciemności
Narzędzia w tle / Klasy kontekstowe
bg-primary Średni niebieski jako kolor podstawowy
bg-sukces Leśna zieleń na sukces
bg-ostrzeżenie

Wolna mowa zielony kolor  dla ostrzeżenia

bg-informacje Jasna morska zieleń dla informacji
bg-niebezpieczeństwo Czerwony (Cinnabar) oznacza niebezpieczeństwo
Bg-światło Samotność dla światła
bg-ciemny Kolor Mirage dla ciemności
bg-wtórny Kolor aluminium dla wtórnego

Pamiętaj, że te klasy mogą być stosowane do poszczególnych wierszy i komórek tabeli Bootstrap w dowolnej kombinacji.

Kolorowe wiersze z klasami kontekstowymi

Zastosujmy klasy kontekstowe w naszej tabeli arkusza znaków, aby zobaczyć, jak działają. Poniższy kod stosuje klasę „table-active” do pierwszego wiersza tabeli, aby zmienić kolor tła na jasnoszary.

<table class="table"> <tr class="table-active"> <td>Thomas</td> <td>80</td> <td>90</td> <td>70</td> <td>80</td> <td>75</td> <td>79</td> </tr> <tr> </table>

Poniżej przedstawiamy, jak będzie wyglądać pełna tabela po zastosowaniu klas „sukces tabeli”, „ostrzeżenie tabeli” i „niebezpieczeństwo tabeli” do drugiej, trzeciej i czwartej

elementy stołu.

Jak stworzyć Bootstrap 5 Stoły?

Kolorowe rzędy z kolorami tła

Podobnie jak w przypadku klas kontekstowych tabeli, można zastosować kolory tła do wierszy przy użyciu klas kontekstowych tła.

<table class="table"> <tr class="bg-success"> <td>Thomas</td> <td>80</td> <td>90</td> <td>70</td> <td>80</td> <td>75</td> <td>79</td> </tr> <tr> </table>

Poniżej znajduje się przyciągająca wzrok tabela z „bg-success”, „bg-danger”, „bg-warning”, „bg-info” i innymi klasami narzędzi w tle zastosowanymi do wierszy.

Jak stworzyć Bootstrap 5 Stoły?

Kolorowe komórki z klasami kontekstowymi

Każdą komórkę tabeli Bootstrap można zastosować z jedną z klas kontekstowych, aby wyróżnić ją z innych komórek. Będzie to bardzo przydatne, gdy masz większy stół i chcesz podświetlić tylko kilka komórek. Poniższy kod pokazuje zastosowanie klasy kontekstowej „table-active” do komórki tabeli.

<table class="table"> <tr> <td>Thomas</td> <td class="table-active">80</td> <td>90</td> <td>70</td> <td>80</td> <td>75</td> <td>79</td> </tr> <tr> </table>

Poniższa tabela zawiera losowo cztery komórki z różnymi kolorami tła.

Jak stworzyć Bootstrap 5 Stoły?

Kolorowe wiersze i komórki z kolorami tła i klasami kontekstowymi

Na koniec możesz zastosować klasę kontekstową tabeli i klasę kontekstową tła w dowolnej kombinacji, aby uzyskać różne kolory tła dla wierszy i komórek.

<table class="table"> <tr class="table-active"> <td>Thomas</td> <td class="table-info">80</td> <td>90</td> <td>70</td> <td>80</td> <td>75</td> <td class="bg-success">79</td> </tr> <tr> </table>

Oto jak będzie wyglądać przykładowa tabela z różnymi kolorami zastosowanymi do wierszy i komórek.

Jak stworzyć Bootstrap 5 Stoły?


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