Erstellen Sie mit Bootstrap eine elegante benutzerdefinierte Seite

In diesem Tutorial Bootstrap Der Entwickler Mark Otto führt Sie durch die Grundlagen von Bootstrap: Was ist enthalten, wie wird es in einem Projekt verwendet und wie kann man eine typische Bootstrap-Vorlage am besten anpassen?

'Die Verwendung von Bootstrap muss nicht mit den Standardkomponenten und -stilen aufhören', sagt er. 'Mit ein wenig HTML und CSS können wir fast alles machen. Also, lass uns eintauchen!

Einstieg

Während alle CSS in Bootstrap ist in WENIGER geschrieben, wir werden nur das vollständig kompilierte CSS (und eine Prise von) verwenden JavaScript ). Um die Verwendung von Bootstrap am besten zu demonstrieren, erstellen wir eine brandneue Beispielvorlage, die in einer zukünftigen Version des Projekts enthalten sein soll.



Wir haben alles, was Sie für dieses Projekt benötigen, in einer separaten Zip-Datei zusammengefasst, die Sie herunterladen können Hier . Beim Öffnen finden Sie Bootstraps kompiliertes CSS, kompiliertes JavaScript und unsere neue Vorlage in verschiedenen Phasen.

Bootstrap-Tutorial

Die Bootstrap-Dokumente sind ein weiteres Beispiel dafür, wie Sie das Framework anpassen können, um eine ansprechendere Site zu erstellen und ihr einen eigenen Geschmack zu verleihen

Wir müssen die grundlegendste Version unserer Seitenvorlage zusammenstellen: HTML-Gerüste, um die Seite zu rendern und einen Link zu den Bootstrap-Assets zu erstellen.







Hallo Welt!





Dies ist die grundlegendste Form einer Bootstrapped-Webseite: einfaches HTML mit nur dem enthaltenen CSS. Das kann in einigen Fällen gut funktionieren, aber wir möchten wirklich eine Seite mit einigen Bootstrap-Komponenten, einigen benutzerdefinierten Inhalten und einigen Design-Optimierungen, um das Ganze abzurunden.

Es ist Zeit, einige Bootstrap-Komponenten hinzuzufügen. Wir werden unsere 'Hallo Welt' -Nachricht gegen eine Navigationsleiste und ein Karussell austauschen und das Rastersystem verwenden, um einen dreispaltigen Abschnitt für unsere Marketingkopie zu schreiben.




...

...


...
...
...

Bootstrap-Tutorial

Das Standard-Bootstrap-Karussell vor der Anpassung bietet einige der offensichtlicheren und kontrastreicheren Stile für Benutzerfreundlichkeit und Lesbarkeit

Beachten Sie, dass wir in diesem Beitrag auch den HTML-Code vereinfachen, der vollständige Code jedoch in den Downloads enthalten ist.

Das Erstellen von Spalten in Bootstrap ist mit dem integrierten 12-Spalten-Rastersystem einfach. Um es zu verwenden, erstellen Sie eine .row, um die Spalten unterzubringen. Geben Sie für jede Inhaltsspalte an, wie viele Rastereinheiten die Spalte umfassen soll.

In diesem Fall möchten wir drei Spalten, die sich über vier Rastereinheiten erstrecken, also haben wir drei Instanzen von .span4. Mit dem Rastersystem können Sie jedes Layout so gestalten, dass es nahezu jeden Inhalt enthält. Erstellen Sie einfach die Spalten und fügen Sie Ihren Inhalt hinzu.

Unterhalb der Spalten fügen wir unsere eigene neue Komponente .featurette hinzu (unter Verwendung einiger der in Bootstrap enthaltenen Best Practices für die Codierung), um einige größere Marketingnachrichten und Grafiken aufzunehmen.



...


...







...


...


Sie werden sehen, dass wir eine Basisklasse, .featurette, für die Kernkomponente haben. Innerhalb dieses Bereichs werden vorangestellte Klassen wie .featurette-image und .featurette-Heading verwendet, um Elemente in unserer Komponente einfach als Ziel festzulegen. Präfixierte Klassen sorgen für kürzere CSS-Selektoren, weniger Codezeilen und intelligentere kategoriale Benennungsschemata. Mit diesen Grundlagen für unsere neue Komponente ist es Zeit, weiterzumachen.

Mit CSS anpassen

OK, wir haben unsere neue HTML-Seite gebootet, einige der vorgefertigten Komponenten und das Rastersystem verwendet und unsere eigene Komponente geschrieben. Als nächstes passen wir das Standardkarussell und die Navigationsleiste ein wenig an. Wir strecken das Karussell aus und stylen jede Folie, erhöhen dann die Höhe der Navigationsleiste und legen sie auf das Karussell.

Es gibt zwei grundlegende Möglichkeiten, Bootstrap-Komponenten anzupassen: Ändern von HTML und Hinzufügen von zusätzlichem CSS. Die besten Implementierungen machen beides, und dieses Tutorial ist nicht anders. Wenn Sie sich an unser HTML erinnern, haben wir die Navigationsleiste in einen eigenen Container (zum Zentrieren auf der Seite) verpackt, während das Karussell alleine sitzt.

Dies ist wichtig, da wir sie auf einfache Weise positionieren und gleichzeitig die Karussellfolien besser anpassen können. Finagle die Navigationsleiste in Position, indem du auf den Container .nav bar-wrapper mit etwas CSS zielst:

.nav bar-wrapper {
Position: relativ;
Z-Index: 10;
Rand oben: 20px;
Rand-unten: & minus; 90px;
}}

Wir gebrauchen Position und Z-Index um die Navigationsleiste auf einer höheren Ebene als das Karussell zu rendern, und einen negativen Randrand, um das Karussell hochzuziehen. Wir werden auch die Polsterung der Navigationsleisten-Links erhöhen, um sie etwas größer zu machen.

.nav bar .brand,
.nav bar .nav> li> a
Polsterung: 15px 20px;
}}

Bootstrap-Tutorial

wie man einen Layer Photoshop dreht
Zu diesem Zeitpunkt haben wir nur Skelett-Markups und Inhalte mit grundlegenden Bootstrap-Stilen. Auf diese Weise können Sie Ihren eigenen Stil auf die nackten Knochen des Rahmenwerks anwenden

Jetzt müssen wir den Text in jeder Karussellfolie am Rest der Seite ausrichten. Standardmäßig enthält das Karussell nur eine für den Hintergrund jeder Folie und eine für die Beschriftung.




...


Das Karussell wird gedehnt, um sein Elternteil zu füllen, wenn wir die Breite einstellen: 100%; im Bootstrap-Kern. Fügen Sie ein um die Beschriftung herum ein, um den benutzerdefinierten Inhalt innerhalb jeder Folie am Rest der Seite auszurichten. Sobald dies erledigt ist, sollte das Folienmarkup folgendermaßen aussehen:




...

Bootstrap-Tutorial

Nachdem die Änderungen abgeschlossen sind, haben wir die leicht neu gestaltete Navigationsleiste über unserem maßgeschneiderten Karussell in voller Breite - und sie sieht bereits ziemlich gut aus

Damit das Karussell wie unser letztes Beispiel aussieht, ändern wir das nächste und das vorherige Steuerelement und passen die Beschriftungen an. Das CSS ist leichtgewichtig und beinhaltet einige leichte Überschreibungen und Modifikationen.

Textschatten: 0 1px 1px rgba (0,0,0, .4); / * Höherer Kontrast * / Hintergrundfarbe: transparent;
Rand: 0;
}}
.Karussell-Beschriftung {Position: statisch;
maximale Breite: 50%;
Polsterung: 0;
Rand unten: 100px;
Hintergrundfarbe: transparent;
}}

Mit ein paar Änderungen am Text in der Beschriftung haben wir unser fertiges Karussell. Leichte HTML-Änderungen und rund 20 CSS-Zeilen verleihen uns ein individuelles Erscheinungsbild, während die beeindruckende Standardkomponente von Bootstrap erhalten bleibt.

Jetzt ist es Zeit, unsere eigene Komponente zu schreiben, die Featurette. Wir haben bereits fast den gesamten HTML-Code geschrieben. Lassen Sie uns also nur einige grundlegende Stile einführen. Unsere Inspiration für diese Komponente ist die Vermarktung von Inhalten wie dem von Apfel : große Überschriften, leichter Text und einige große Grafiken.

.featurette-Teiler {
Rand: 80px 0; / *


zwischen jedem * /
}}
.featurette {
Polsterung: 120px;
Überlauf versteckt; / * Schwimmer löschen * /
}}
.featurette-image {
Rand oben: & minus; 120px; / * Bild vertikal mit dem Text zentrieren * /
}}
.featurette-Überschrift {
Schriftgröße: 50px;
Schriftgröße: 300;
Zeilenhöhe: 1;
Buchstabenabstand: -1px;
}}
.featurette-image.pull-left {
Rand rechts: 40px;
}}
.featurette-image.pull-right {
Rand links: 40px;
}}

Bootstrap-Tutorial

Tausende von Websites, die Bootstrap verwenden - wie die oben genannten - nutzen das Toolkit optimal, indem sie Standardstile mit ihrem eigenen Flair kombinieren

Und das ist es wirklich. Angesichts der Standardstile von Bootstrap ist die Menge an benutzerdefiniertem CSS, die wir für eine neue Komponente schreiben müssen, recht gering. Die Standardtypografiestile von Bootstrap wie .lead bieten uns großartig aussehenden Marketingtext, während Dienstprogrammklassen wie .pull-right superschnelle Floats ermöglichen. Ohne diese müssten wir das gemeinsame CSS für jede benutzerdefinierte Komponente neu schreiben.

Mark Otto ist Entwickler von Bootstrap und Designer, der sich auf HTML-, CSS- und Design-Systeme spezialisiert hat.

Lesen Sie auch: