Kostenlose Bootstrap-Widgets für Ihre Site

Bootstrap ist ein Frontend-Framework zum problemlosen Erstellen mobilfreundlicher Websites. Der größte Teil von Bootstrap wird über CSS abgewickelt, während es auch einige Plugins gibt, die JavaScript benötigen. Wenn Sie das Framework auf Ihrer Site verwenden, ist es einfach, einzelne integrierte Komponenten wie Schaltflächen, Karussells, Abzeichen, Warnungen usw. einzufügen. Sie können jedoch auch benutzerdefinierte Bootstrap-Widgets erstellen, indem Sie den Code ändern. Hier ist eine Sammlung einiger der beliebtesten kostenlosen Bootstrap-Widgets für Ihre Website.

• Dies sind benutzerdefinierte Widgets, die mit dem Bootstrap 4 und 5 Framework erstellt wurden.
• Sie können diese Widgets kopieren und auf Ihrer Site einfügen oder zusammen mit der Startvorlage testen .
• Wir haben jedes Widget mit Code und Demo erklärt, damit Sie es einfach kopieren und einfügen können.
• Sie können das Widget mit Ihrem eigenen Code weiter anpassen.

Um die Verwendung des Widgets als eigenständige Komponente zu erklären, haben wir einige der Widgets in der Weebly-Site gezeigt. Obwohl Weebly eine reine HTML- und CSS-Plattform ist, müssen Sie möglicherweise einige Parameter für die Verwendung auf Ihrer Website anpassen. Das beste Beispiel ist die Box-Sizing-Eigenschaft in CSS. Sie müssen diese möglicherweise für bestimmte Elemente des Widgets in content-box oder border-box ändern, wenn Sie Auffüllprobleme bemerken.

1 Bootstrap schiefes Karten-Widget

Das erste Widget in der Liste ist eine einfache Karte, die in einem schiefen Format angezeigt wird. Dies wird sich elegant auf Ihrer Website die Standard mit Kartenkomponente und minimale Anpassung der CSS. Nachfolgend finden Sie einige Beispiele für die schiefe Karte.

Schräge Karte mit Klartext

+8 Grad in X-Achse

Schräge Karte mit -8 Grad in der X-Achse

2 Benutzerprofilkarten-Widget

Das nächste Widget ist ein farbenfrohes Benutzerprofil-Widget. Sie können das Profilbild, die sozialen Links und die Kurzbeschreibung nach Ihren Wünschen anpassen. Es ist eine gute Möglichkeit, die Benutzer auf Ihrer Website zu präsentieren.

Benutzerkarte mit linkem Profilbild

Bootstrap-Benutzerprofilkarte

3 Flip-Card-Widget

Flipcard ist eine nützliche Methode, um Textinhalte hinter einem Bild anzuzeigen. Benutzer können mit der Maus über das Bild fahren, um den Text zu lesen. Sie können eine einzelne Karte oder mehrere Flip-Karten einfügen, um sie wie eine Galerie zu gestalten. Das Widget zeigt Ihnen, wie Sie die Kartenkomponente in Bootstrap sowohl in horizontaler als auch in vertikaler Richtung spiegeln.

Bootstrap Widget für horizontales Kartenumdrehen

Bootstrap Vertical Card Flip Widget

4 Bootstrap-Teammitglied mit Parallax-Hintergrund

Wenn Sie eine Agentur oder ein Unternehmen leiten, ist es sinnvoll, alle Ihre Teammitglieder auf Ihrer Website zu präsentieren. Glücklicherweise müssen Sie nicht zu viel Zeit aufwenden und hier ist ein Widget für Teammitglieder zum Kopieren und Einfügen für Sie. Das Widget wird mit einem Parallaxenhintergrund und sozialen Symbolen wunderschön aussehen.

Bootstrap Team Member Widget mit Parallax-Hintergrund

5 CSS-Preistabelle mit Bootstrap

Viele Benutzer fügen ihrer Website mithilfe von benutzerdefiniertem JavaScript eine Preistabelle hinzu. Obwohl JavaScript für diesen Zweck gut funktioniert, können Sie vollständiges CSS verwenden, um mit Bootstrap schöne Preistabellen zu erstellen. Unten sehen Sie, wie die Tabellen aussehen und Sie können den Inhalt und die Anzahl der Spalten nach Ihren Bedürfnissen anpassen.

CSS-Preistabellen-Widget

6 Testimonial-Schieberegler

Wenn Sie viele Erfahrungsberichte von Benutzern haben, ist hier ein Slider-Widget für Sie. Präsentieren Sie alle Ihre Kundenfeedbacks in einem automatisch rotierenden Slider mit Bild- und Textinhalten.

Testimonial-Slider mit zwei gleichen Spalten

7 Bootstrap-Block-Zitate

Blockzitate sind nützlich, um Zitate, Zitate und Referenzinhalte zu präsentieren. Bootstrap hat standardmäßig keine Angebotskomponente. Sie können jedoch ganz einfach verschiedene Stile von Blockzitaten erstellen, indem Sie den CSS-Code geringfügig anpassen.

Bootstrap Blockquote-Stile

8 CSS Parallax-Seite

Sie können einen Parallax-ähnlichen Effekt mit vollständigem CSS ohne JavaScript erstellen. Die Jumbotron-Komponente ist eine der am wenigsten bekannten und Sie können benutzerdefiniertes Jumbotron verwenden, um Parallax-Seiten in voller Breite zu erstellen.

Bootstrap Parallax Page mit Jumbotron

9 Akkordeon-Schieberegler-Widget

Bootstrap 5 führte eine separate Akkordeon-Komponente ein, die Sie mithilfe von Collapse mit früheren Versionen erstellen können. Hier ist ein Akkordeon-Schieberegler-Widget, mit dem Sie beliebige Elemente in einem stilvollen Akkordeon-Stil einfügen können.

Bootstrap Akkordeon Inhaltsschieberegler

10 Vertikales Bootstrap-Timeline-Widget

Die vertikale Zeitachse ist die Möglichkeit, Ereignisse zu präsentieren, die in einer Sequenz passiert sind. Sie können diese Zeitachse auch verwenden, um zukünftige Produkt- oder Veranstaltungsstarts anzuzeigen. Im Folgenden sehen Sie, wie das vertikale Zeitachsen-Widget aussehen wird:

11 Erweiterte Datentabelle mit Bootstrap

Bootstrap verfügt über eine integrierte Komponente zum Einfügen vieler verschiedener Tabellen auf Ihrer Site. Sie benötigen jedoch eine erweiterte Datentabelle für Funktionen wie Sortieren, Suchen und Filtern. Dies ist sehr nützlich, wenn Sie große Inhalte haben und in einer Tabelle präsentieren möchten.

Erweiterte Datentabelle

Zusammenfassung

Wir hoffen, dass die oben genannten Widgets für Ihre Website nützlich sind und Ihnen Zeit sparen. Die Möglichkeiten mit Bootstrap 5 sind grenzenlos und Sie können neue Widgets erstellen oder die vorhandenen Komponenten nach Ihren Bedürfnissen anpassen.