Kürzlich habe ich eine gute Sache namens Bootstrap entdeckt, das beliebteste reaktionsschnelle CSS -Framework, das mobile Geräte priorisiert und sich schnell an verschiedene Geräte anpassen kann. Verwenden Sie es, um reaktionsschnelle Seiten schnell und bequem zu schreiben, und blockiert Browserunterschiede. Mit Bootstrap können Sie sich das tragische Leben des Schreibens von Webseiten in Original -CSS in der Vergangenheit nicht mehr vorstellen.
Nach dem Lernen stellte ich fest, dass ich auch die Fähigkeit hatte, in Minuten eine High-End-Seite zu entwickeln. In diesem Artikel wird Ihnen Bootstrap vorgestellt und Sie zusammen implementieren, um eine reaktionsschnelle Seite zusammenzuführen.
Abbildung 1. Mobile Priorität, angepasst an verschiedene Geräte
1. Installation
Am einfachsten besteht die direkte Referenz von Bootstrap, die vom Content Distribution Network (CDN) auf der Webseite bereitgestellt wird. Wenn ein Benutzer auf die Webseite zugreift, erhält er Ressourcen vom nahe gelegenen Server.
Listing 1. Startstrap aus dem Inhaltsverteilungsnetzwerk erhalten
<!-Neueste kompilierte und minifizierte CSS-> <link rel = "styleSheet" href = "bootstrap/3.3.4/css/bootstrap.min.css"> <!-Optionales Thema-> <link rel = "styleSheet" href = "bootstrap/3.3.4/css/bootstrap-the.Min.Min.Min.Min.S. JavaScript -> <script src = "Bootstrap/3.3.4/js/bootstrap.min.js"> </script>
Sie können auch Bootstrap herunterladen, um lokal bereitzustellen. Benutzer können die vollständige Bootstrap auf der Seite herunterladen oder die im Projekt verwendeten Funktionen entsprechend den Projektanforderungen auf der benutzerdefinierten Seite auswählen, eine vereinfachte Version von Bootstrap kompilieren und herunterladen. Nach Abschluss des Downloads wird eine ZIP -Datei erhalten. Die dekomprimierte Verzeichnisstruktur lautet wie folgt:
Listing 2. Bootstrap -Verzeichnisstruktur
Bootstrap/
├── CSS/
│ ├── Bootstrap.css
│ ├── Bootstrap.cs.map
│ ├── Bootstrap.min.css
│ ├── Bootstrap-themen.css
│ ├── Bootstrap-theMe.css.map
│ └── Bootstrap-theMe.min.css
├── js/
│ ├── Bootstrap.js
│ └── Bootstrap.min.js
└── Schriftarten/
├── Glyphicons-Halflings-Regular.eot
├── Glyphicons-Halflings-Regular.svg
├── Glyphicons-Halflings-Regular.ttf
├── Glyphicons-Halflings-Regular.woff
└── Glyphik-Halflings-Regular.WOFF2
Hier konzentrieren wir uns hauptsächlich auf drei vereinfachte Dateien: Bootstrap.min.css ist die Hauptkomponente von Bootstrap und enthält eine große Anzahl von CSS -Klassen, die verwendet werden sollen. Bootstrap-theMe.min.css enthält optionale Bootstrap-Themen; Bootstrap.min.js bietet einige JavaScript -Methoden. Es ist zu beachten, dass Bootstrap von JQuery abhängt, daher muss JQuery vor der Verwendung von Bootstrap.min.js eingeführt werden. Wie bei der Verwendung von Inhaltsverteilungsnetzen verwenden wir relative Pfade, um entsprechende CSS und JavaScript in unsere Seiten einzuführen. In der tatsächlichen Entwicklung verwenden wir häufig die von Bootstrap bereitgestellte Vorlage als Ausgangspunkt. Diese Vorlage führt die Metadaten und die Bootstrap ein, die von Responsive Pages erforderlich sind. Entwickler können auf dieser Grundlage ihre eigenen Reaktionsseiten schreiben:
Auflistung 3. Bootstrap -Grundvorlage
<! DocType html> <html lang = "en"> <head> <meta charset = "utf-8"> <meta http-äquiv = "x-ua-kompatible" content = "ie = edge"> <meta name = "Ansicht" content = "width = motory-Width, initial-scale = 1"> <!> <! Jeder andere Kopfinhalt muss folgen * Nach * diese Tags-> <title> Bootstrap 101 Template </title> <!-Bootstrap-> <link href = "css/bootstrap.min Sie sehen die Seite über Datei an: //-> <!-[Wenn LT IE 9]> <script src = "https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"> </script> <script src = "https://oss.maxcdn.com/respecture/1.4.2/respect.min.js"> </script> <! [endif]-> </head> <body> <h1> Hallo, World! src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"> </script> <!
2. CSS
Bootstrap ist zuerst ein CSS -Framework, das viele CSS -Klassen vordefiniert hat. Entwickler müssen HTML -Elementen nur geeignete CSS -Klassen hinzufügen, um den gewünschten Stil zu erhalten, mit dem das Seitenlayout, das Layout und andere Funktionen vervollständigt werden können. Die von Bootstrap bereitgestellten CSS sind extrem leistungsstark. Dieser Artikel konzentriert sich auf das von ihm bereitgestellte Netzsystem. Für andere Funktionen wird es nur übrigens bei der Anwendung erwähnt. Wenn Sie mehr über die Funktionen erfahren möchten, lesen Sie bitte die offizielle Dokumentation.
Container
Bei Verwendung des Bootstrap -Layouts müssen Sie HTML -Elemente in einen Container (.Container) aufnehmen. Bootstrap bietet zwei Container: .Container und .Container-Fluid. Der erstere zentriert den Inhalt mit fester Breite, während der letztere den Inhalt ermöglicht, das gesamte Browserfenster horizontal zu füllen, wie unten gezeigt:
Listing 4. .Container und .Container-Fluid
<div> <p> "Als ich ein Kind war, würde meine Mutter immer eine Tasse Kaffee für mich zubereiten, wenn ich krank war. Sie sagte sanft:" Ausländer trinken das. "" Ich hatte immer Angst vor Kaffee und die Säure und Bitterkeit waren miteinander verflochten. Jetzt kann ich den Geschmack nicht finden, den ich als Kind getrunken habe, als ich ein Kind war, bis zu diesem Tag trank ich eine Tasse Isatis. Sie sagte sanft: "Ausländer trinken das." "Als jung hatte ich immer Angst vor Kaffee und die Sauer und Bitterkeit sind miteinander verflochten. Jetzt kann ich den Geschmack nicht finden, den ich als Kind trank, als ich ein Kind war, bis zu diesem Tag trank ich eine Tasse Isatis." </p> </div>
Das folgende Bild zeigt, wie es im Browser aussieht:
Abbildung 2. Behälter
Netzsystem
Wie das Grid-System, das wir beim Schreiben der ersten reaktionsschnellen Seite entworfen haben, unterteilt Bootstrap die Seite in Zeilen (.Row) mit 12 Spalten pro Zeile (.col-md-*). Die Zeilen müssen im Behälter enthalten sein. Nach der Bildschirmgröße sind die Spalten in .col-xs-, .col-sm-, .col-md- und .col-lg-, entsprechend Mobiltelefonen (<768px), Tablets (≥ 768px), Medium-Screen-Computern (≥ 992px) und Großbildcomputern (≥1200px) unterteilt. Diese Pixel, die darin erscheinen, werden als kritische Punkte bezeichnet. Immer wenn die Browsergröße oder Bildschirmgröße einen weiteren kritischen Punkt erreicht, funktioniert die entsprechende CSS -Klasse und das Seitenlayout ändert sich. Einzelheiten finden Sie in der folgenden Abbildung:
Abbildung 3. Grid -System
Wie verstehen Sie die obige Tabelle? Wenn Sie die Seite beim Surfen einer Seite auf einem Computer in drei Spalten graben müssen, die 1/4, 2/4 und 1/4 der Zeilenbreite berücksichtigt, können Sie den Code wie folgt schreiben:
Listing 5. Eine Zeile ist in drei Spalten unterteilt
<div> <div> .col-md-3 </div> <div> .col-md-6 </div> <div> .col-md-3 </div> </div >>. col-md-3 </div> </div>
Öffnen Sie den Browser und Sie können sehen, dass sie jeweils 3, 6 und 3 der 12 Spalten belegen, die genau 12 Spalten addieren. Wenn wir das Browserfenster eingrenzen, bis es weniger als 970px ist, werden wir feststellen, dass es zu drei Linien geworden ist, die zusammen gestapelt sind, um angezeigt zu werden. Mit Ausnahme von .col-XS- verhalten sich andere CSS-Klassen gleich. Wenn die Bildschirmgröße kleiner als ihr kritischer Punkt ist, wird sie aufgehäuft angezeigt. Es wird nur in Spalten angezeigt, wenn die Bildschirmgröße größer als der kritische Punkt ist, und .Col-XS- wird in jedem Fall in Spalten angezeigt.
CSS -Klassen, die unterschiedlichen Bildschirmgrößen entsprechen, können gemischt verwendet werden. Wenn ich beispielsweise eine Seite möchte, um 3 Spalten auf dem Computer und 2 Spalten auf dem Telefon anzuzeigen, kann ich den Code wie folgt schreiben. Auf dem Telefon wird die dritte Spalte in der nächsten Zeile angezeigt und die Hälfte der Linienbreite besetzt:
Listing 6. Zeigen Sie verschiedene Spalten auf Computern und Telefonen an
<div> <div> .col-md-3 </div> <div> .col-md-6 </div> <div> .col-md-3 </div> </div >>. col-md-3 </div> </div>
Wenn Sie auf allen Geräten dieselbe Spalte anzeigen möchten, müssen Sie nur die Mindestgröße. Col-XS- definieren, und das Layout wird automatisch auf eine größere Größe erweitert, andernfalls wird es nicht gehalten:
Auflistung 7. Die gleiche Anzahl von Spalten wird auf allen Geräten angezeigt
<div> <div> .col-XS-6 </div> <div> .col-XS-6 </div> </div>
Sie können auch einen bestimmten Offset für die Spalte geben, z. B. der ersten Spalte enthält 1/4 der Zeilenbreite, und wir möchten, dass die zweite Spalte 6 Spalten nach rechts ausgleichen und 3 Spalten am Ende der Zeile besetzt:
Auflistung 8. Spaltenversatz
<div> <div> .col-md-3 </div> <div> .col-md-3 </div> </div>
Die Reihenfolge der Spalten kann auch mit .col-md-push-* und .col-md-pull-* eingestellt werden. Ihre Bedeutung ist es, ein Element rückwärts zu drücken oder mehrere Spalten nach vorne zu ziehen. Entwickler können diese Funktion verwenden, um wichtige Inhalte nach vorne zu ziehen, wenn Sie sie auf dem Telefon anzeigen:
Auflistung 9. Säule drücken und ziehen
<div> <div> .col-md-9 .col-md-push-3 </div> <div> .col-md-3 .col-md-pull-9 </div> </div>
Noch aufregender ist, dass dieses Netzsystem auch verschachtelt werden kann, damit verschiedene komplexe Layouts durchgeführt werden können:
Listing 10. Nisting
<div><div>Level 1: .col-sm-9<div><div>Level 2: .col-xs-8 .col-sm-6</div><div>Level 2: .col-xs-4 .col-sm-6</div></div><div>Level 1: .col-sm-3</div></div></div>
Der obige Code ist im Allgemeinen in zwei Spalten unterteilt, und die erste Spalte hat zwei Spalten verschachtelt.
Die Grid -Funktion von Bootstrap bietet verschiedene Möglichkeiten für das Webseiten -Layout und ist sehr einfach zu verwenden. Nehmen wir einen Fall, um zu sehen, wie einfach es ist, eine reaktionsschnelle Seite mit Bootstrap zu schreiben.
3.. Tatsächlicher Kampf
Angenommen, Sie möchten eine Webseite implementieren, wie im folgenden Bild gezeigt:
Abbildung 4. Webdesign
Zunächst teilen wir die Webseitenelemente in entsprechende Zeilen und Spalten. Die folgende Abbildung zeigt die Abteilung des Autors:
Abbildung 5. Teilen des Webdesigns in Zeilen und Spalten aufteilt
Definieren Sie dementsprechend unsere HTML -Struktur und fügen Sie die entsprechende Bootstrap -CSS -Klasse hinzu:
Auflistung 11. Definieren der HTML -Struktur
<div> <div> <img src = "http://placehold.it/150x150"> </div> <div> <h1> Jane doette </h1> <h3> Front-End Ninja </h3> </div> <hr> <div> <IM> <img enden </h3> </div> <div> <div> <img> <img enden </h3> </div> <div> <div> <img> <img enden src = "http://placehold.it/950x350"> </div> <div> <h2> Vorgezogene Arbeit </h2> </div> <div> <div> <img src = "http://placehold.it/250x250"> <h2> appelly </h2> <a href = "https://github.com/udacity/applify"> https://github.com/udacity/applify </a> </div> <div> <img src = "http://placehold.it/250x250"> <h2> Sunflower </h2> <a href = "https://github.com/udacity/sunflower"> https://github.com/udacity/sunflower </a> </div> <div> <img src = "http://placehold.it/250x250"> <H2> Bokeh </h2> <a </h2> <a </h2> <a </h2> <a < href = "https://github.com/udacity/bokeh"> https://github.com/udacity/bokeh </a> </div> </div>
Es dauerte weniger als 10 Minuten, bis der Autor den oben genannten Code geschrieben hatte, und da es keine Bilder gab, verwendete der Autor die Online -Bereitstellung der Platzhalterbilder. Das Öffnen dieser Seite in einem Browser steht in der Nähe von Design, aber die Schriftart, Großbuchstaben, Großbuchstaben und Schrift stehen immer noch mit dem Design wider. Als nächstes müssen Sie das Bootstrap-Dokument gut abschneiden und stöbern, um verwandte CSS-Klassen zu entdecken. Der endgültige Effekt ist in der folgenden Abbildung dargestellt:
Abbildung 6. Realisierungseffekt
Interessanter ist, dass Sie, wenn Sie das Browserfenster eingrenzen oder auf die Seite von Ihrem Telefon aus greifen, feststellen, dass es sich bereits um eine einfache Reaktionsseite handelt, und wir haben keinen zusätzlichen Code hinzugefügt! In der Zeit dauerte es insgesamt weniger als 20 Minuten, und ich erfüllte auch mein Versprechen, in Minuten eine reaktionsschnelle Seite zu schreiben.