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

Darmowe widżety Bootstrap dla Twojej witryny

3

Bootstrap to framework frontendowy do tworzenia stron internetowych przyjaznych dla urządzeń mobilnych bez kłopotów. Większa część Bootstrap jest obsługiwana przez CSS, podczas gdy istnieją również wtyczki, które wymagają JavaScript. Kiedy korzystasz z frameworka w swojej witrynie, łatwo jest wstawiać poszczególne wbudowane komponenty, takie jak przyciski, karuzele, odznaki, alerty itp. Możesz jednak również tworzyć niestandardowe widżety Bootstrap, modyfikując kod. Oto zbiór najpopularniejszych darmowych widżetów Bootstrap dla Twojej witryny.

  • Są to niestandardowe widżety wykonane za pomocą frameworka Bootstrap 4 i 5.
  • Możesz skopiować i wkleić te widżety w swojej witrynie lub przetestować je razem z szablonem początkowym.
  • Wyjaśniliśmy każdy widżet kodem i wersją demonstracyjną, dzięki czemu możesz po prostu kopiować i wklejać.
  • Możesz dodatkowo dostosować widżet za pomocą własnego kodu.

Aby wyjaśnić użycie widżetu jako niezależnego komponentu, pokazaliśmy, jak korzystać z niektórych widżetów na stronie Weebly. Chociaż Weebly jest zwykłą platformą HTML i CSS, może być konieczne dostosowanie niektórych parametrów do wykorzystania w Twojej witrynie. Najlepszym przykładem jest właściwość box-sizing w CSS, być może trzeba będzie zmienić ją na content-box lub border-box dla określonych elementów widżetu, jeśli zauważysz problemy z dopełnieniem.

1 Widżet Wykrzywionej Karty Bootstrap

Pierwszy widżet na liście to prosta karta, która wyświetli się w przekrzywionym formacie. Będzie to wyglądać elegancko w Twojej witrynie przy użyciu domyślnego komponentu karty i minimalnego dostosowania CSS. Poniżej kilka przykładów przekrzywionej karty.

Darmowe widżety Bootstrap dla Twojej witryny

Przekrzywiona karta ze zwykłym tekstem

Darmowe widżety Bootstrap dla Twojej witryny

+8 stopni w osi X

Darmowe widżety Bootstrap dla Twojej witryny

Przekrzywiona karta z -8 stopni w osi X

2 Widżet karty profilu użytkownika

Następny widget to kolorowy widget profilu użytkownika. Możesz dostosować zdjęcie profilowe, linki społecznościowe i krótki opis zgodnie ze swoimi potrzebami. To dobry sposób na zaprezentowanie użytkownikom witryny.

Darmowe widżety Bootstrap dla Twojej witryny

Karta użytkownika z lewym zdjęciem profilowym

Darmowe widżety Bootstrap dla Twojej witryny

Karta profilu użytkownika Bootstrap

3 Odwróć Widget Karty

Odwróć kartę to przydatny sposób na pokazanie treści tekstowej za obrazem. Użytkownicy mogą najechać kursorem na obraz, aby przeczytać tekst. Możesz włożyć pojedynczą kartę lub wiele kartek typu flip, aby wyglądała jak galeria. Widżet pokaże Ci, jak odwrócić komponent karty w Bootstrap w kierunku poziomym i pionowym.

Darmowe widżety Bootstrap dla Twojej witryny

Widżet odwracania karty poziomej Bootstrap

Darmowe widżety Bootstrap dla Twojej witryny

Widżet odwracania kart w pionie Bootstrap

4 członków zespołu Bootstrap z tłem paralaksy

Jeśli prowadzisz agencję lub firmę, warto zaprezentować wszystkich członków zespołu na swojej stronie internetowej. Na szczęście nie musisz spędzać zbyt dużo czasu, a oto widżet kopiuj wklej członka zespołu dla Ciebie. Widżet będzie wyglądał pięknie z tłem paralaksy i ikonami społecznościowymi.

Darmowe widżety Bootstrap dla Twojej witryny

Widżet członka zespołu Bootstrap z tłem paralaksy

5 Tabela cen CSS z Bootstrapem

Wielu użytkowników dodaje tabelę cen w swojej witrynie za pomocą niestandardowego kodu JavaScript. Chociaż JavaScript działa w tym celu dobrze, możesz użyć pełnego CSS, aby stworzyć piękne tabele cenowe za pomocą Bootstrap. Poniżej przedstawiamy, jak będą wyglądać tabele i możesz dostosować zawartość i liczbę kolumn do swoich potrzeb.

Darmowe widżety Bootstrap dla Twojej witryny

Widżet tabeli cen CSS

6 Suwak referencji

Jeśli masz wiele opinii od użytkowników, oto widżet suwaka dla Ciebie. Zaprezentuj wszystkie opinie klientów na automatycznie obracającym się suwaku z zawartością obrazu i tekstu.

Darmowe widżety Bootstrap dla Twojej witryny

Suwak świadectwa dwóch równych kolumn

7 cytatów z bloków Bootstrap

Cytaty blokowe są przydatne do prezentowania cytatów, cytowań i treści referencyjnych. Bootstrap domyślnie nie zawiera komponentu cytatu. Możesz jednak łatwo tworzyć różne style cytatów blokowych, dokonując drobnych dostosowań kodu CSS.

Darmowe widżety Bootstrap dla Twojej witryny

Style cytatów blokowych Bootstrap

8 Strona paralaksy CSS

Możesz stworzyć efekt paralaksy z kompletnym CSS bez żadnego JavaScript. Komponent jumbotron jest jednym z najmniej znanych i możesz użyć dostosowanego jumbotronu do tworzenia stron paralaksy o pełnej szerokości.

Darmowe widżety Bootstrap dla Twojej witryny

Strona Bootstrap Parallax z Jumbotron

9 Widżet suwaka akordeonu

Bootstrap 5 wprowadził osobny komponent akordeonu, który można utworzyć za pomocą funkcji zwijania z poprzednimi wersjami. Oto widget suwaka akordeonu, którego możesz użyć do wstawienia dowolnych elementów w stylowym stylu akordeonu.

Darmowe widżety Bootstrap dla Twojej witryny

Suwak zawartości akordeonu Bootstrap

10 Widżet pionowej osi czasu Bootstrap

Pionowa oś czasu to sposób na zaprezentowanie wydarzeń, które miały miejsce w sekwencji. Możesz również użyć tej osi czasu, aby pokazać przyszłe premiery produktów lub wydarzeń. Poniżej znajduje się wygląd pionowego widżetu osi czasu:

Darmowe widżety Bootstrap dla Twojej witryny

11 Zaawansowana tabela danych z Bootstrapem

Bootstrap ma wbudowany komponent do wstawiania wielu odmian tabel na twoją stronę. Potrzebujesz jednak zaawansowanej tabeli danych, aby mieć takie funkcje, jak sortowanie, wyszukiwanie i filtrowanie. Jest to bardzo przydatne, gdy masz duże treści i chcesz zaprezentować się w tabeli.

Darmowe widżety Bootstrap dla Twojej witryny

Zaawansowana tabela danych

Streszczenie

Mamy nadzieję, że powyższe widżety przydadzą się na Twojej stronie i oszczędzą Twój czas. Możliwości są nieograniczone dzięki Bootstrap 5 i możesz tworzyć nowe widżety lub dostosowywać istniejące komponenty zgodnie z potrzebami.

Ź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