Inhalt
- Was ist Bootstrap?
- Bereiten Sie die Bootstrap-Umgebung vor
- Bootstrap-fähige Basis-Webseitenvorlage
- Einfache Bootstrap-Gitterstruktur
- Hinzufügen des Bootstrap-Standardlayouts für Registerkarten
- Grundlegender Layout-Code für die Registerkarte "Bootstrap"
- Standard-Bootstrap-Registerkarten
- Fügen Sie den Bootstrap-Registerkarten eine Rahmenfarbe hinzu
- Bootstrap-Registerkarten mit Inhalt
- Registerkarten mit Inhalt
- Fügen Sie dem Bootstrap-Inhaltsbereich einen Rand hinzu
- Hintergrundfarbe der Registerkarte hinzufügen
- Stellen Sie die Farbe der aktiven Registerkarte ein
- Farbe des Registerkartenbereichs hinzufügen
Was ist Bootstrap?
Bootstrap ist ein leistungsstarkes Front-End-Entwicklungsframework, mit dem sehr einfach reaktionsfähige Websites erstellt werden können. Die offizielle Website von Bootstrap bietet viele gängige CSS / HTML-Komponenten und Javascript-Komponenten, die sofort einsatzbereit sind. In diesem Artikel werde ich Ihnen zeigen, wie Sie die Bootstrap-Javascript-Registerkartenkomponente verwenden, um ein stilvolles Registerkartenlayout für Ihre Website zu erstellen.
Bereiten Sie die Bootstrap-Umgebung vor
Zunächst müssen Sie die neueste Version des Bootstrap-Frameworks herunterladen. Dann müssen Sie es in einen Ordner extrahieren, in dem Sie arbeiten werden. Im Abschnitt "Erste Schritte" der offiziellen Bootstrap-Website befindet sich eine grundlegende Bootstrap-fähige Website-Seitenvorlage, sodass Sie sie kopieren und eine neue Webseite erstellen können. Sobald Sie eine neue Seite erstellt haben, sieht diese folgendermaßen aus:
Bootstrap-fähige Basis-Webseitenvorlage
! DOCTYPE html> html lang = "en"> head> meta charset = "utf-8"> meta http-equiv = "X-UA-kompatibel" content = "IE = edge"> meta name = "viewport" content = "width = Gerätebreite, initial-scale = 1"> title> Bootstrap 101 Vorlage / Titel>! - Bootstrap -> link href = "css / bootstrap.min.css" rel = "stylesheet">! - HTML5 Shim und Respond.js IE8-Unterstützung von HTML5-Elementen und Medienabfragen ->! - WARNUNG: Respond.js funktioniert nicht, wenn Sie die Seite über die Datei anzeigen: // ->! - [wenn IE 9 ]> script src = "https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"> / script> script src = "https://oss.maxcdn.com/libs/respond. js / 1.4.2 / reply.min.js "> / script>! [endif] -> / head> body> h1> Hallo Welt! / h1>! - jQuery (erforderlich für die JavaScript-Plugins von Bootstrap) - > script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"> / script>! - Schließen Sie alle kompilierten Plugins (unten) oder einzelne Dateien ein nach Bedarf -> script src = "js / bootstrap.min.js"> / script> / body> / html>
Diese Vorlage gibt Ihnen eine "Hallo Welt" -Nachricht als Ausgabe. Richten wir die Grid-Umgebung ein, um andere Bootstrap-Komponenten einzuschließen. Sie können dies wie folgt tun:
- Nach dem Body-Tag müssen Sie alle HTML-Tags in ein div mit dem Klassennamen "container" einschließen. Dieses div hält alle HTML-Steuerelemente in der Mitte der Webseite und das verwendete Container-Bootstrap-Framework passt sich an jede Gerätegröße an. Fügen Sie einen Hintergrundschatten hinzu, um die Verwendung des Containerplatzes anzuzeigen.
- Fügen Sie das grundlegende Rasterlayout hinzu. Bevor Sie eine Bootstrap-Komponente verwenden, müssen Sie das Rasterlayout verwenden. In diesem Beispiel verwende ich die folgende Rasterstruktur.
Einfache Bootstrap-Gitterstruktur
div class = "container" style = "Hintergrundfarbe: #eee;"> div class = "row"> div class = "col-md-8"> h1> Bootstrap-Registerkarten! / h1> / div> / div> / div>
Speichern und aktualisieren Sie nun die Seite. Sie erhalten die folgende Ausgabe.
Hinzufügen des Bootstrap-Standardlayouts für Registerkarten
Der graue Bereich auf dem Bildschirm ist der Containerbereich und wie Sie sehen, ist er zentriert. Jetzt fügen Sie die grundlegende Bootstrap-Registerkartenkomponente hinzu. Beispielcode für Bootstrap-Registerkarten finden Sie im Abschnitt zur Javascript-Komponente unter Registerkarten. Nach dem Hinzufügen des Registerkartencodes sieht die Webseite wie folgt aus:
Grundlegender Layout-Code für die Registerkarte "Bootstrap"
div class = "container" style = "Hintergrundfarbe: #eee;"> div class = "row"> div class = "col-md-8"> h1> Bootstrap-Registerkarten! / h1> ul class = "nav nav -tabs "id =" myTab "> li class =" active "> a href =" # home "data-toggle =" tab "> Home / a> / li> li> a href =" # profile "data-toggle = "tab"> Profil / a> / li> li> a href = "# messages" data-toggle = "tab"> Nachrichten / a> / li> li> a href = "# settings" data-toggle = " tab "> Einstellungen / a> / li> / ul> div class =" tab-content "> div class =" tab-pane active "id =" home "> ... / div> div class =" tab-pane "id =" profile "> ... / div> div class =" tab-pane "id =" messages "> ... / div> div class =" tab-pane "id =" settings "> ... / div> / div> / div> / div> / div>
Speichern Sie den Code und aktualisieren Sie ihn. Sie erhalten eine Ausgabe wie folgt:
Standard-Bootstrap-Registerkarten
Dies ist das grundlegende Layout der Registerkarte "Bootstrap". Wenn Sie Unternehmenswebsites entwickeln, müssen Sie diese nach einem benutzerdefinierten Design gestalten. Lassen Sie uns diese Registerkarten stilvoll gestalten, indem Sie benutzerdefinierte Stile hinzufügen.
Fügen Sie den Bootstrap-Registerkarten eine Rahmenfarbe hinzu
Bevor Sie fortfahren, müssen Sie die Standardstile von Bootstrap suchen. Sie können dies mit jedem Browser tun. Alle Browser sind mit Entwicklungstools ausgestattet, mit denen Sie jedes HTML-Tag und seine Stile untersuchen, Javascript debuggen und vieles mehr können. Ich verwende einen Chrome-Browser und durch Drücken von F12 kann ich die Entwicklungstools erhalten. Unten erhalten Sie zwei neue Fenster. Eine zeigt die HTML-Quelle und die andere zeigt den gesamten vererbten CSS-Code. Klicken Sie auf Suche neben Element und bewegen Sie den Mauszeiger über das Element, zu dem Sie Details suchen möchten. Es wird im CSS-Fenster angezeigt. Das Entwicklungsfenster sieht folgendermaßen aus:
Jetzt ist uns bewusst, dass die Ankertag-Stile geändert werden müssen, um eine benutzerdefinierte Rahmenfarbe zu erhalten. Sie können jede Bootstrap-CSS-Klasse überschreiben, indem Sie ein Style-Tag unter dem Bootstrap-CSS-Link im Header-Bereich hinzufügen. In großen Entwicklungsprojekten verwenden sie separate Stylesheets, um benutzerdefinierte Stile beizubehalten. Lassen Sie mich Ihnen zeigen, welche Stile hinzugefügt werden müssen, um nur Ränder um alle Registerkarten zu erhalten.
Lassen Sie mich jeden Stil im Detail erklären. In der ersten Zeile des Stilcodes erhalten Sie die blaue Farblinie unter den Registerkarten. Aber nur in der aktiven Registerkarte ist es ausgeblendet. Wie macht Bootstrap das? Es wird ein negativer Rand für Listenelemente verwendet, und auf jeder Registerkarte wird der Rand unten transparent.
Wenn Sie den zweiten Stil hinzufügen, werden Sie feststellen, dass alle abgerundeten Registerkarten Ränder haben, einschließlich der aktiven Registerkarte. Entsprechend dem Tab-Design müssen wir den unteren Rand des aktiven Tab-Randes transparent machen. Sie können dies tun, indem Sie die dritte Codezeile in Stile einfügen. Sobald Sie die Seite gespeichert und aktualisiert haben, erhalten Sie eine Ausgabe wie folgt:
Jetzt müssen wir den Inhaltsbereich gestalten. Vorher müssen wir einige Inhalte hinzufügen, um jede Registerkarte einzeln zu unterscheiden. Sie können jederzeit Beispielinhalte über die Iipsum-Website abrufen. Sobald Sie Inhalte hinzugefügt haben, sieht Ihr Code wie folgt aus:
Bootstrap-Registerkarten mit Inhalt
div class = "container"> div class = "row"> div class = "col-md-8"> h1> Bootstrap-Registerkarten! / h1> ul class = "nav nav-tabs" id = "myTab"> li class = "active"> a href = "# home" data-toggle = "tab"> Home / a> / li> li> a href = "# profile" data-toggle = "tab"> Profil / a> / li > li> a href = "# messages" data-toggle = "tab"> Nachrichten / a> / li> li> a href = "# settings" data-toggle = "tab"> Einstellungen / a> / li> / ul> div class = "tab-content my-tab"> div class = "tab-pane active" id = "home"> div class = "row"> div class = "col-md-12"> h3> tab One / h3> p> ist einfach Dummy-Text der Druck- und Satzindustrie. Lorem Ipsum ist seit dem 16. Jahrhundert der Standard-Dummy-Text der Branche, als ein unbekannter Drucker eine Galeere vom Typ nahm und sie zu einem Musterbuch verschlüsselte. / p> / div> / div> / div> div class = "tab-pane" id = "profile"> div class = "row"> div class = "col-md-12"> h3> Tab Two / h3 > p> ist einfach Dummy-Text der Druck- und Satzindustrie. Lorem Ipsum ist seit dem 16. Jahrhundert der Standard-Dummy-Text der Branche, als ein unbekannter Drucker eine Galeere vom Typ nahm und sie zu einem Musterbuch verschlüsselte. / p> / div> / div> / div> div class = "tab-pane" id = "messages"> div class = "row"> div class = "col-md-12"> h3> Tab Three / h3 > p> ist einfach Dummy-Text der Druck- und Satzindustrie. Lorem Ipsum ist seit dem 16. Jahrhundert der Standard-Dummy-Text der Branche, als ein unbekannter Drucker eine Galeere vom Typ nahm und sie zu einem Musterbuch verschlüsselte. / p> / div> / div> / div> div class = "tab-pane" id = "settings"> div class = "row"> div class = "col-md-12"> h3> Tab Four / h3 > p> ist einfach Dummy-Text der Druck- und Satzindustrie. Lorem Ipsum ist seit dem 16. Jahrhundert der Standard-Dummy-Text der Branche, als ein unbekannter Drucker eine Galeere vom Typ nahm und sie zu einem Musterbuch verschlüsselte. / p> / div> / div> / div> / div> / div> / div> / div>
Speichern Sie die Seite und aktualisieren Sie den Browser. Sie erhalten einen Bildschirm, der wie folgt aussieht:
Registerkarten mit Inhalt
Fügen Sie dem Bootstrap-Inhaltsbereich einen Rand hinzu
Jetzt müssen wir für jeden Container dieselbe Grenze fortsetzen. Sie können dies tun, indem Sie dem Registerkartenbereich Stile hinzufügen. Fügen wir div eine Stilklasse mit der Stilklasse "tab-content" hinzu, die "my-tab" heißt. Diese neue Stilklasse überschreibt die Standardklasseneigenschaften. Jetzt können Sie CSS die folgende Codezeile hinzufügen.
.my-tab .tab-pane {Rahmen: durchgehend 1px blau;}
Speichern Sie es und aktualisieren Sie die Seite. Sie erhalten eine Ausgabe wie folgt:
Wie Sie sehen können, überlappen sich zwei obere Ränder, und die aktive Registerkarte hat wieder die untere Randlinie. Wir können diese Probleme beheben, indem wir die Eigenschaft für den oberen Rand des Bereichs ändern. Die obige Stilklasse kann wie folgt geändert werden:
.my-tab .tab-pane {Rand: durchgehend 1px blau; Rand oben: 0; }}
Speichern und aktualisieren Sie die Seite. Sie werden eine Ausgabe wie folgt bemerken:
Beachten Sie, dass Sie das Bootstrap-Grid-System verwenden müssen, bevor Sie Inhalte in die einzelnen Registerkarten einfügen, da sonst das Layout beschädigt wird.
Hintergrundfarbe der Registerkarte hinzufügen
Angenommen, Sie möchten den oberen Registerkarten eine Hintergrundfarbe zuweisen. Sie können dies mithilfe der im Header-Abschnitt definierten Stilklassen tun. Dazu müssen Sie die Stilklasse "#myTab li a" ändern und eine Hintergrundfarbe wie folgt zuweisen;
#myTab li a {Rahmenfarbe: blau; Hintergrundfarbe: # A5C967; }}
Speichern und aktualisieren Sie die Seite. Sie erhalten eine Ausgabe wie folgt:
Stellen Sie die Farbe der aktiven Registerkarte ein
Standardmäßig müssen wir die aktive Registerkarte in einer anderen Farbe anzeigen. Dazu müssen wir die Stilklasse „#myTab li.active a“ wie folgt anpassen:
#myTab li.active a {Rand-Boden-Farbe: transparent; Hintergrundfarbe: Gelb; }}
Über der Stilanpassung wird die Hintergrundfarbe der aktiven Registerkarte gelb. Das Speichern und Aktualisieren der Seitenausgabe erfolgt wie folgt:
Farbe des Registerkartenbereichs hinzufügen
Fügen Sie dem Registerkartenbereich eine benutzerdefinierte Farbe hinzu. Sie können dies tun, indem Sie die benutzerdefinierte Stilklasse ".my-tab .tab-pane" anpassen, indem Sie die bevorzugte Hintergrundfarbe wie folgt hinzufügen.
.my-tab .tab-pane {Rand: durchgehend 1px blau; Rand oben: 0; Hintergrundfarbe: # F7EFC6;}
Speichern Sie die Seite und aktualisieren Sie sie. Sie erhalten eine Seite wie folgt:
Hoffe, Sie können mit meiner Farbauswahl für das Registerkartenlayout ertragen. In diesem Artikel habe ich nur benutzerdefinierte Farben verwendet, um zu demonstrieren, wie Sie das Erscheinungsbild des Standardlayouts für Bootstrap-Registerkarten ändern können. Abhängig von Ihrem Design können Sie jedoch Farben oder sogar Hintergrundbilder auswählen, um die Registerkarten zu gestalten. Sie müssen lediglich die in diesem Artikel definierten Stilklassen optimieren.
Dieser Artikel ist genau und nach bestem Wissen des Autors. Der Inhalt dient nur zu Informations- oder Unterhaltungszwecken und ersetzt nicht die persönliche Beratung oder professionelle Beratung in geschäftlichen, finanziellen, rechtlichen oder technischen Angelegenheiten.
