22 kostenlose Bootstrap-Tabs-Beispiele (die besten) 2021
Veröffentlicht: 2021-05-25Wir haben im Internet viele großartige Beispiele für kostenlose Bootstrap-Tabs gefunden, die wir für das Prototyping verwendet haben.
JEDOCH.
Da es keine wirklich zuverlässigen Lösungen gab, die wir mehrfach verwenden und wiederverwenden könnten, haben wir uns entschieden, eigene Snippets zu erstellen.
Neben vollständiger Reaktionsfähigkeit und regelmäßigen Updates haben wir auch dafür gesorgt, dass jeder mit einem benutzerfreundlichen Code ausgestattet ist.
Perfekt für Anfänger, aber genauso erstaunlich für Profis .
Mit unseren Bootstrap-Tabs ist es ganz einfach, Elemente zu organisieren, Platz auf der Website zu sparen und UX zu steigern.
Sie haben alles, was Sie für eine schnelle Ausführung benötigen. Genießen!
Beste Beispiele für kostenlose Bootstrap-Tabs
Colorlib-Assistent 30
Colorlib Wizard 30 ist ein äußerst nützlicher Formularassistent, der den Formularinhalt mithilfe von Bootstrap-Registerkarten organisiert. Anstatt alle Eingaben des Benutzers in einem großen Schritt zu übernehmen, können Sie mit diesem Assistenten Benutzereingaben in drei Schritten akzeptieren, was den gesamten Prozess für Ihren Kunden erheblich erleichtert.
Es gibt drei Registerkarten für die drei Schritte. Die Registerkartensymbole sind Zahlen, die die Schritte angeben. Die Zahl 1 steht für den ersten Schritt, die Zahl 2 für den zweiten Schritt und 3 für den dritten Schritt.
Dieses Formular sammelt im ersten Schritt den Vornamen und den Nachnamen. Wenn Sie auf die Schaltfläche „Nächster Schritt“ klicken, wird der nächste Schritt angezeigt.
Der Benutzer kann auch einen BESTIMMTEN Schritt sehen, indem er auf die nummerierten Registerkarten klickt.
In der zweiten Registerkarte muss der Benutzer E-Mail-Adresse und Passwort eingeben, während die dritte Registerkarte dem Benutzer ermöglicht, einen Betreff auszuwählen und einen Kommentar zu schreiben.
Weitere Informationen / Demo herunterladenColorlib-Assistent 29
Eine bequeme und schnelle Lösung, wenn Sie einen etwas einfachen und modernen kostenlosen 4-Schritte-Assistenten suchen. Das Tool verwendet Bootstrap Framework, um eine hervorragende Leistung auf allen modernen Geräten zu gewährleisten.
Was ist cool; Wenn Sie zur Live-Demo-Vorschau wechseln, können Sie sie zuerst auf Mobilgeräten und Desktops testen und von dort aus fortfahren.
Die vier Schritte umfassen Benutzername, E-Mail, Passwort und Passwortbestätigung. Wenn Sie jedoch KONFIGURATIONEN durchführen möchten, führen Sie diese auf jeden Fall durch.
Die Struktur ist sehr praktisch und stellt sicher, dass jeder Benutzer das Beste daraus macht.
Weitere Informationen / Demo herunterladenColorlib-Assistent 27
Colorlib Wizard 27 bietet Ihnen vertikale Registerkarten. Dies ist ein ERSTAUNLICHER Formularassistent, mit dem Sie die erforderlichen Details von Ihren Website-Benutzern sammeln können. Dieser Assistent verfügt über drei Registerkarten, die auf der linken Seite des Formulars positioniert sind.
Der Benutzer kann den Inhalt jeder Registerkarte anzeigen, indem er auf die Registerkarten klickt.
Sie können auch den Inhalt der nächsten Registerkarte anzeigen, indem sie auf die Schaltfläche „Weiter“ klicken.
Die Tabs sehen aufgrund des tollen Designs fantastisch aus. Die Farbe des in den Registerkarten verwendeten Textes ist weiß, während die Hintergrundfarbe des Textes in den Registerkarten eine Variation von Blau ist.
Diese Farbkombination ist für das Auge sehr ansprechend . Die Laschen haben eine besondere, schöne Form.
Weitere Informationen / Demo herunterladenColorlib-Assistent 26
Colorlib Wizard 26 enthält drei horizontale Registerkarten. Die Tabs wurden mit Bootstrap entwickelt und sehen sehr modern und cool aus. Beim Anklicken der Registerkarten erscheint der Inhalt der Registerkarten sehr flüssig .
Der Benutzer kann auch den Inhalt der nächsten Registerkarte sehen, indem er auf die Schaltfläche 'Weiter' klickt.
Die Registerkarten sind mit „Persönliche Daten“, „Buchung“ und „Bestätigen“ betitelt.
Wie die Registerkartentitel vermuten lassen, werden auf der ersten Registerkarte persönliche Informationen wie Name und Telefonnummer gesammelt, auf der zweiten Registerkarte werden die Buchungsinformationen des Benutzers abgerufen, während die dritte Registerkarte die eingegebenen Daten und den Preis anzeigt und den Benutzer zur Bestätigung auffordert.
Weitere Informationen / Demo herunterladenColorlib-Assistent 25
Colorlib Wizard 25 ist ein großartiger Formularassistent, der von Colorlib entwickelt wurde. Es gibt Ihnen drei schön gestaltete Registerkarten. Die Überschriften der Registerkarten sind „Persönliche Daten“, „Bankdaten“ und „Daten bestätigen“.
Auf der Registerkarte „Persönliche Daten“ wird der Benutzer aufgefordert, persönliche Daten wie Name, Geburtsdatum usw. einzugeben. Beim Öffnen der Registerkarte 'Bankinformationen' werden die Bankinformationen vom Benutzer abgefragt.
Und die Registerkarte "Details bestätigen" fordert den Benutzer auf, die eingegebenen Daten zu bestätigen.
Das Häkchen-Symbol wurde in den Registerkartensymbolen verwendet. Und für die Schaltfläche 'Weiter' wurde ein Array-Symbol verwendet. Anstelle des Wortes 'Weiter' wird in der Schaltfläche nur ein Pfeil angezeigt, der den nächsten Schritt anzeigt.
Weitere Informationen / Demo herunterladenColorlib-Assistent 24
Colorlib Wizard 24 ist ein erstaunliches Anmeldeformular von Colorlib. In diesem Assistenten sehen Sie schöne Beispiele für Bootstrap-Registerkarten. Dieses Anmeldeformular hat 4 Registerkarten.
Die Registerkarten stellen die Kategorie der Informationen dar, die vom Benutzer in diesem Registrierungsformular gesammelt wurden.
Die Überschriften der Registerkarten enthalten aussagekräftige Texte wie „Über“ und „Konto“. Sie haben auch aussagekräftige Symbole, damit der Benutzer verstehen kann, worum es auf jeder Registerkarte geht.
Die Farbe der Registerkartensymbole ändert sich, wenn sie angeklickt werden. Dies macht das Formular für den Benutzer optisch ansprechend. Es verbessert die Benutzererfahrung.
Weitere Informationen / Demo herunterladenColorlib-Assistent 23
Colorlib Wizard 23 ist einer der besten Wizards von Colorlib. Dies ist ein Anmeldeformular mit mehreren Registerkarten. Es entnimmt dem Benutzer in mehreren Schritten verschiedene Arten von Informationen, wodurch es dem Benutzer leicht gemacht wird, die erforderlichen Details anzugeben.
Dieser Assistent enthält 4 Registerkarten mit entsprechenden Überschriften und Symbolen . Die Überschriften der Registerkarten sind "Konto", "Persönlich", "Zahlung" und "Bestätigen". Durch einen Blick auf die Überschriften und Symbole der Registerkarten kann der Benutzer wissen, worum es bei den einzelnen Registerkarten geht.
Zum Beispiel kann jeder einfach anhand der Registerkartenüberschrift und des Symbols der Registerkarte „Persönlich“ verstehen, dass persönliche Informationen in diese Registerkarte eingegeben werden müssen.
Weitere Informationen / Demo herunterladenColorlib-Assistent 22
Colorlib Wizard 22 ist ein Formularassistent, der Benutzereingaben in 3 Schritten sammelt. Für jeden Schritt gibt es eine Registerkarte und in diesem Assistenten gibt es drei Registerkarten. Die Registerkartensymbole sind Zahlen, die die Schritte angeben.
Der Benutzer kann zum nächsten Schritt gehen, indem er entweder auf die Schaltfläche „Nächster Schritt“ oder auf die nummerierten Registerkarten klickt.
Die Farbe der Registerkartensymbole ändert sich, wenn auf die Schaltfläche für den nächsten Schritt geklickt wird oder wenn auf die Registerkartensymbole geklickt wird.
Die erste Registerkarte sammelt persönliche Informationen wie Name, Telefonnummer und E-Mail.
Auf der zweiten Registerkarte wird der Benutzer aufgefordert, einen Ort, ein Datum und eine Uhrzeit auszuwählen.
Die dritte Registerkarte ermöglicht dem Benutzer, die eingegebenen Daten zu bestätigen.
Weitere Informationen / Demo herunterladenColorlib-Assistent 21
Ein weiterer moderner und einfach zu integrierender kostenloser Bootstrap-Tab, den Sie verfeinern und an Ihre Bedürfnisse anpassen können. Es wird standardmäßig mit einem Hintergrund mit Farbverlauf geliefert, aber Sie können hinter die Kulissen gehen und ihn bearbeiten.
Kurz gesagt, Sie können mit dem kostenlosen Assistenten zwar unverändert arbeiten, ihn aber natürlich an Ihre Bedürfnisse anpassen.
Das Snippet umfasst drei Schritte zur Konto-, Zahlungs- und Informationsbestätigung. Damit erhalten Sie mehrere vordefinierte Felder, die Ihnen zusätzliche Zeit sparen.
Das reaktionsschnelle Layout stellt außerdem sicher, dass der 3-Schritte-Prozess auf verschiedenen Bildschirmgrößen hervorragend funktioniert.
Weitere Informationen / Demo herunterladenColorlib-Assistent 20
Colorlib Wizard 20 ist ein schönes Registrierungsformular, das von Colorlib entwickelt wurde. Dieses Formular enthält drei Registerkarten. Die Registerkarten wurden mit Bootstrap erstellt. Dieses Registrierungsformular ermöglicht eine einfachere Kontoerstellung .
Mit diesem Formularassistenten können Ihre Website-Besucher in nur drei einfachen Schritten ein Konto auf Ihrer Website erstellen.
Die Symbole der Bootstrap-Registerkarte sehen sehr stilvoll aus. Die Überschriften der Registerkarten sind "Kontoeinrichtung", "Soziale Profile" und "Persönliche Daten". In diesem Anmeldeformular können Sie alles ändern. Bei Bedarf können Sie die Überschriften der Registerkarten ändern.
Sie können die Eingabefelder auch ÄNDERN. Wenn Sie nicht alle Eingabefelder in diesem Formular benötigen, können Sie die nicht benötigten Felder entfernen.
Weitere Informationen / Demo herunterladenColorlib-Assistent 19
Colorlib Wizard 19 ist ein weiterer großartiger Formularassistent, der drei Bootstrap-Registerkarten enthält . Die Registerkarten erleichtern Ihren Benutzern die Registrierung auf Ihrer Website.
Da die erforderlichen Informationen in drei kleinen Schritten gesammelt werden, wird es für die Benutzer viel einfacher, ihre Daten anzugeben.
Die Überschriften der Registerkarten spiegeln die Kategorien der erforderlichen Eingaben wider. So können die Benutzer verstehen, welche Art von Informationen in jeder Registerkarte eingegeben werden müssen.
Ihre Website-Besucher können den Inhalt eines bestimmten Tabs sehen, indem Sie auf die Tab-Überschriften klicken. Sie können auch zwischen den Registerkarten navigieren, indem sie auf die Schaltflächen „NEXT“ und „PREV“ klicken.
Weitere Informationen / Demo herunterladenColorlib-Assistent 15
Colorlib Wizard bietet Ihnen drei vertikale Registerkarten. Die Registerkarten sind so positioniert, dass es für die Benutzer bequem ist, auf eine bestimmte Registerkarte zu klicken und ihren Inhalt anzuzeigen.
Für die Registerkarten wurden geeignete Symbole und aussagekräftige Überschriften verwendet, damit der Benutzer versteht, was jede Registerkarte enthält. Die Registerkarte "Persönliche Daten" sagt, dass der Benutzer aufgefordert wird, persönliche Daten wie Name, E-Mail-Adresse, Telefonnummer usw. einzugeben.
Die Zahlen in den Registerkartensymbolen geben die Schritte an. Die Registerkarte mit der Nummer 1 sagt dem Benutzer also, dass dies der erste Schritt ist.
Weitere Informationen / Demo herunterladenColorlib-Assistent 14
Colorlib Wizard 14 ist ein leistungsstarker Formularassistent, den Sie als Registrierungsformular auf Ihrer Website verwenden können. Mit diesem Registrierungsformular können sich Ihre Website-Besucher bei Ihrem Unternehmen oder Ihrer Website registrieren.
Der Titel des Formulars lautet „ERSTELLEN SIE IHR PROFIL“. Sie können diesen Titel in einen für Sie passenderen Titel ändern.
Die Hintergrundfarbe der Seite ist eine Variation von Hellgrün.
Dieser Assistent bietet Ihnen drei Bootstrap-Registerkarten mit den Überschriften 'Über', 'Konto' und 'Adresse'. Jede Registerkarte sammelt eine bestimmte Art von Informationen vom Benutzer. Wenn Sie andere Informationen von Ihrem Benutzer sammeln müssen, können Sie die Überschriften der Registerkarten ändern.
Weitere Informationen / Demo herunterladenColorlib-Assistent 11
Colorlib Wizard 11 ist ein weiteres gutes Beispiel für einen Formularassistenten, der Bootstrap-Registerkarten enthält. Es gibt 4 Registerkarten in diesem Formular. Dieser Formularassistent ermöglicht es dem Benutzer nicht, zur nächsten Registerkarte zu wechseln oder eine andere Registerkarte anzuzeigen, ohne das Formular auf der ersten Registerkarte auszufüllen.
Wenn Ihr Benutzer also zum nächsten Tab wechseln möchte, muss er/sie zunächst alle erforderlichen Felder im ersten Tab ausfüllen.
Ebenso kann der Benutzer, wenn er sich auf der zweiten Registerkarte befindet, nicht zur nächsten Registerkarte oder zur letzten Registerkarte wechseln, ohne die erforderlichen Felder in dieser Registerkarte auszufüllen.
Dies ist eigentlich eine nette Funktion, mit der Ihre Benutzer ein Konto erstellen können, indem Sie dieses Formular auf sehr systematische Weise verwenden.
Weitere Informationen / Demo herunterladenColorlib-Assistent 8
Colorlib Wizard 8 enthält 4 Bootstrap-Registerkarten. Das Design der Tabs ist wirklich toll. Jede Registerkarte hat ein INTERESSANTES Symbol. Die Überschriften der Registerkarten lauten 'Schritt 01', 'Schritt 02' und so weiter.
Dieser Formularassistent ist für Sie geeignet, wenn Sie einen Online-Shop haben, der Früchte verkauft.
Der erste Schritt besteht darin, grundlegende Daten des Käufers wie Name, E-Mail-Adresse und Land einzugeben. Im zweiten Schritt wird der Benutzer aufgefordert, das aktuelle Kennwort des Benutzers zu ändern. Der dritte Schritt führt Ihren Kunden zu seinem Warenkorb. Im letzten Schritt werden die Gesamtsummen des Warenkorbs angezeigt und der Kunde aufgefordert, zur Kasse zu gehen.
Weitere Informationen / Demo herunterladenColorlib-Assistent 5
Colorlib Wizard 5 ist ein fantastischer Formularassistent, der von Colorlib entwickelt wurde. Es gibt Ihnen vier Registerkarten. Bootstrap wurde verwendet, um die Registerkarten zu entwerfen. In diesem Formular kann der Benutzer nur die Überschrift des aktuell geöffneten Tabs sehen.
Er/sie kann die Überschriften anderer inaktiver Registerkarten nicht sehen . Der Benutzer kann ihre Überschriften nur sehen, wenn diese Registerkarten zu aktiven Registerkarten werden. Mit anderen Worten, sie können die Überschriften der Registerkarten sehen, wenn die Registerkarten geöffnet sind.
Dies hat das gesamte Formular vereinfacht. Diese Art von minimalistischem Design sieht SEHR cool aus. Verwenden Sie es auf Ihrer Website und es wird Ihre Kunden beeindrucken.
Weitere Informationen / Demo herunterladenColorlib-Assistent 3
Colorlib Wizard 3 verfügt über Registerkarten mit stilvollen Symbolen. Schauen Sie sich diesen Formularassistenten an, er sieht wirklich fantastisch aus. Wenn Ihnen dieser Formularassistent gefällt, können Sie ihn auf Ihrer Website verwenden, er ist völlig kostenlos und Sie können den Code auch ändern .
Nehmen Sie Änderungen gemäß Ihren Anforderungen und Vorlieben vor. Sie können das Foto ändern, wenn Sie möchten. Dieses Formular ist wie alle anderen in diesem Blogbeitrag erwähnten Formulare vollständig anpassbar.
Um weitere Informationen zu diesem Formularassistenten anzuzeigen oder ihn herunterzuladen, klicken Sie unten auf die Schaltfläche "Weitere Informationen/Download". Um eine VORSCHAU dieses Assistenten anzuzeigen, klicken Sie unten auf die Schaltfläche "Demo".
Weitere Informationen / Demo herunterladenColorlib-Assistent 2
Colorlib Wizard 2 ist genau das Richtige für Sie, wenn Sie eine Hotelwebsite für Ihren Kunden oder für sich selbst entwickeln. Mit diesem Formular können Kunden Zimmer buchen.
Die Schritte zum Vornehmen einer Reservierung werden in diesem Formular in verschiedenen Registerkarten bereitgestellt.
Es gibt vier vertikale Registerkarten. In jeder Registerkarte wird der Benutzer aufgefordert, Details einzugeben und aus verschiedenen Optionen auszuwählen. Die letzte Registerkarte fordert den Benutzer auf, eine Bestätigung über die von ihm getroffenen Entscheidungen und die eingegebenen Daten zu machen.
Die Registerkarten UNTERTEILEN den gesamten Reservierungsprozess in kleine, einfache Schritte.
Weitere Informationen / Demo herunterladenColorlib-Assistent 1
Colorlib Wizard 1 ist ein cooler Assistent für Registrierungsformulare, der von Colorlib entwickelt wurde. Dieses Registrierungsformular bietet Ihnen drei Registerkarten . Die Registerkarten werden mit Bootstrap entworfen.
Nachdem der Benutzer die Felder im ersten Tab ausgefüllt hat, muss er/sie auf die Schaltfläche „Weiter“ klicken, um zum nächsten Tab zu gelangen.
Der Benutzer kann auch zum nächsten Tab wechseln, indem er auf das Symbol des nächsten Tabs klickt.
Jede Registerkarte hat einen aussagekräftigen Titel, der den Benutzer anweist, etwas zu tun. Der Titel des ersten Tabs lautet beispielsweise "Bitte geben Sie Ihre Daten ein", der den Benutzer anweist, seine Daten einzugeben.
Weitere Informationen / Demo herunterladenKostenlose Bonus-Bootstrap-Tabs
Bootstrap-Tabs von Boomer
Bootstrap-Tabs von Boomer ist ein ziemlich fortgeschrittenes Beispiel für Bootstrap-Tabs. Es ist fortgeschritten, weil es verschachtelte Registerkarten hat. Es gibt Registerkarten in Registerkarten. Verschachtelte Registerkarten sind in einigen Fällen nützlich, aber nicht immer.
Verschachtelte Tabs machen Ihre Website komplex. Sie sollten diese Art von Komplexität vermeiden, aber in einigen Fällen ist die Verwendung verschachtelter Registerkarten einfach die beste Option.
Dieses Beispiel von Registerkarten bietet Ihnen 4 Hauptregisterkarten mit den Titeln 'Startseite', 'Profil', 'Nachrichten' und 'Einstellungen'. Unter der Registerkarte 'Startseite' gibt es sekundäre Registerkarten mit den Überschriften 'Option 1' und 'Option 2'.
Sie können die Überschriften der Registerkarten jederzeit über den Code ändern.
Weitere Informationen / Demo herunterladenBootstrap Tab + jQuery Validate von Gabriel Buzzi Venturi
Dieses Beispiel für den Bootstrap-Tab wurde von Gabriel Buzzi Venturi entwickelt. Dieses Beispiel hat zwei Registerkarten mit den Überschriften 'Kontaktinformationen' und 'Adressinformationen'.
In der Registerkarte „Kontaktinformationen“ muss der Benutzer seinen Namen und ihre E-Mail-Adresse eingeben, während in der Registerkarte „Adressinformationen“ die Adresse des Benutzers eingegeben werden muss.
Genauer gesagt muss der Benutzer in der zweiten Registerkarte seine Postleitzahl, Adresse und den Namen seiner / ihrer Stadt eingeben.
Dies ist nur eine Vorlage, mit der Sie natürlich etwas Zeit sparen können, aber Sie müssen viele Dinge in dieser Vorlage ändern, damit sie für Ihre Website geeignet ist.
Weitere Informationen / Demo herunterladenBootstrap Tab/Collapse von Ivan Melgrati
Diese Bootstrap-Registerkartenvorlage hat fünf vertikale Registerkarten. Dieser Stift wurde von Ivan Melgrati entworfen.
Da es sich um eine vollständig anpassbare Bootstrap-Vorlage handelt, können Sie in diesem Beispiel für die Registerkarte Bootstrap alles ändern. Wenn Sie keine fünf Registerkarten benötigen, können Sie einige davon entfernen .
Und wenn Sie der Meinung sind, dass Sie mehr Registerkarten benötigen, können Sie weitere aus dem Code hinzufügen. Sie können das Design und den Inhalt jeder Registerkarte ändern, damit sie Ihren Anforderungen entspricht. Sehen Sie sich den Code dieser Vorlage an und ändern Sie ihn nach Ihren Wünschen.
Durch Ändern des Codes können Sie jeden Aspekt dieser Vorlage ändern.
Weitere Informationen / Demo herunterladenDieser Beitrag gab Ihnen eine Liste der besten Bootstrap-Tabs. Es gibt eine Vielzahl von Beispielen für Bootstrap-Registerkarten im Internet. Aber in diesem Artikel habe ich die Vorlagen für Bootstrap-Tabs erwähnt, die meiner Meinung nach die besten sind. Ich hoffe, Sie fanden diese Liste nützlich.